Regione Toscana Design System

Example card component: Notifiche 

<article class="rtds-card rtds-card--information rtds-card--information-02 is-card-fullclickable rtds-group/card">

    <div class="rtds-card__content rtds-gap-3">

        <div class="rtds-card__heading">

            <div class="rtds-flex rtds-items-center rtds-justify-between rtds-w-full">
                <h3 class="rtds-card__title">
                    <div class="rtds-flex rtds-items-center rtds-gap-2">
                        <svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-content-02" aria-hidden="true" focusable="false" role="img">
                            <use href="../../icons.svg#solid--circle" />
                        </svg>

                        <span>Istanza approvata</span>
                    </div>
                </h3>
            </div>

        </div>

        <div class="rtds-card__description rtds-ml-6 lg:rtds-pr-[280px] !rtds-text-sm">
            <p>
                Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et. Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et. Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.
            </p>
        </div>

        <div class="rtds-ml-6 rtds-space-y-2 md:rtds-space-y-0 md:rtds-flex md:rtds-items-baseline md:rtds-justify-between md:rtds-gap-2">

            <ul class="rtds-card__tags rtds-items-center" aria-label="Categorie">
                <li class="rtds-text-xs rtds-font-bold rtds-content-03">10.01.2025</li>
                <div class="rtds-vertical-divider rtds-w-2 md:rtds-w-4 rtds-hidden md:rtds-block">
                    <img class="rtds-w-full rtds-h-auto" src="/images/vertical-divider.svg" alt="">
                </div>

                <li class="rtds-text-xs rtds-uppercase rtds-font-semibold rtds-content-primary">Avanzamento istanza</li>
            </ul>

            <div class="rtds-flex rtds-justify-end rtds-w-full sm:rtds-w-auto">
                <div class="rtds-flex-shrink-0">
                    <a href="#" class="rtds-btn 
    rtds-btn--icon rtds-action-link--has-icon rtds-content-01 hover:rtds-text-white hover:rtds-bg-black focus:rtds-content-03"><svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6" aria-hidden="true" focusable="false" role="img">
                            <use href="../../icons.svg#outline--chevron-right" />
                        </svg>
                        <span class="rtds-sr-only">

                            Visualizza dettagli
                        </span>

                    </a>

                </div>
            </div>
        </div>

    </div>

</article>
 
{% extends "@card" %}

{% block classes %}{{ super() }} rtds-card--information rtds-card--information-02{% endblock classes %}

{% block headingTitle %}
    <div class="rtds-flex rtds-items-center rtds-justify-between rtds-w-full">
        <{% if h2 %}h2{% else %}h3{% endif %} class="rtds-card__title{% if headingClasses %} {{ headingClasses }}{% endif %}">
            <div class="rtds-flex rtds-items-center rtds-gap-2">
                {% render '@icon', {id: 'solid--circle', size: 'rtds-w-4 rtds-h-4', classes: 'rtds-content-02'}, true %}
                <span>Istanza approvata</span>
            </div>
        </{% if h2 %}h2{% else %}h3{% endif %}>
    </div>
{% endblock headingTitle %}

{% block content %}
    {% if 'is-empty' not in excerpt %}
    <div class="rtds-card__description rtds-ml-6 lg:rtds-pr-[280px]{% if excerptClasses %} {{ excerptClasses }}{% endif %}{% if headingLinkIcon %} rtds-pr-8 md:rtds-pr-12{% endif %}">
        <p>
            {% if excerpt %}{{ excerpt | safe }}{% else %}Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.{% endif %}
        </p>
    </div>
    {% endif %}
{% endblock %}

{% block tags %}
    <div class="rtds-ml-6 rtds-space-y-2 md:rtds-space-y-0 md:rtds-flex md:rtds-items-baseline md:rtds-justify-between md:rtds-gap-2">
        {% if tags %}
        <ul class="rtds-card__tags rtds-items-center" aria-label="Categorie">
            <li class="rtds-text-xs rtds-font-bold rtds-content-03">10.01.2025</li>
            {% render '@vertical-divider', { width: 'rtds-w-2 md:rtds-w-4', classes: 'rtds-hidden md:rtds-block' }, true %}
            <li class="rtds-text-xs rtds-uppercase rtds-font-semibold rtds-content-primary">Avanzamento istanza</li>
        </ul>
        {% endif %}
        
        <div class="rtds-flex rtds-justify-end rtds-w-full sm:rtds-w-auto">
            <div class="rtds-flex-shrink-0">
                {% render '@button--icon', {
                    classes: 'rtds-action-link--has-icon rtds-content-01 hover:rtds-text-white hover:rtds-bg-black focus:rtds-content-03',
                    hasIcon: 'true',
                    icon: 'outline--chevron-right',
                    label: "Visualizza dettagli",
                    href: '#',
                    iconClasses: 'rtds-transition-all hover:rtds-translate-x-1'
                }, true %}
            </div>
        </div>
    </div>
{% endblock tags %}
 
{
  "article": true,
  "categoryText": "Categoria",
  "heading": "Nunc aliquam phasellus molestie blandit. Nisi, amet, id maecenas diam",
  "text": "Testo",
  "excerpt": "Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et. Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et. Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.",
  "ctaIcon": "mini--chevron-right",
  "ctaLinkLabel": "Leggi di più",
  "categoryVariant": "",
  "img": {
    "path": "/images/card-image.jpg",
    "alt": ""
  },
  "fullClick": true,
  "tags": true,
  "scadenza": true,
  "contentGap": "rtds-gap-3",
  "excerptClasses": "!rtds-text-sm",
  "dataScadenza": "2024-07-23",
  "dataFormattata": "23.07.2024"
}
  • Content: 
    /**
 * CARD SMART
 * Extends @card component styles for CARD SMART COMPONENTS
 *
*/
@layer components {
    /* CARD SMART */

    :where(.rtds-card--smart-scadenza.rtds-card--event:not(.rtds-card--event-small)) .rtds-card__content {
        @apply rtds-grid-flow-col md:rtds-grid-flow-row;
    }

    :where(.rtds-card--smart-scadenza.rtds-card--event) .rtds-card__date {
        @apply rtds-border-r rtds-border-b-0 rtds-pr-4 rtds-pb-0;
    }

    .rtds-card--smart-trascinabile {
        /* Custom properties private con fallback tripli */
        --_card-smart-bg: var(--card-smart-bg, var(--color-background-01, var(--color-neutral-50)));
        --_card-smart-border: var(--card-smart-border, var(--color-border-gray-01, var(--color-neutral-300)));
        --_card-smart-shadow: var(--card-smart-shadow, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1));
        background-color: var(--_card-smart-bg);
        box-shadow: var(--_card-smart-shadow);
        border-color: var(--_card-smart-border);
        @apply rtds-border rtds-border-solid;
      }
      
      .rtds-card--smart-trascinabile.is-selected {
        /* Override solo delle custom properties pubbliche */
        --card-smart-bg: #ffffff;
        --card-smart-border: var(--color-brand-00, var(--color-primary-500));
        --card-smart-shadow: none;
      }

}
  • URL: /components/raw/card-smart/card-smart.css
  • Filesystem Path: components/08-servizi/card-smart/card-smart.css
  • Size: 1.4 KB

Componenti Card Smart - Servizi

Documentazione WORK IN PROGRESS

Introduzione

I componenti Card Smart sono una collezione specializzata di card progettate specificamente per applicazioni di servizi digitali. Questi componenti estendono il sistema base delle card (@card) con funzionalità avanzate per gestire dati strutturati, interazioni complesse e flussi di lavoro specifici dei servizi pubblici.

Le Card Smart sono state spostate dalla sezione generale delle card alla sezione servizi per una migliore organizzazione e specializzazione funzionale.

Architettura e Ereditarietà

Tutte le Card Smart estendono il componente base @card, mantenendo:

  • Tutte le funzionalità base delle card standard
  • Sistema di classi CSS condiviso
  • Pattern di accessibilità consolidati
  • Struttura markup consistente

Varianti Disponibili

Card di Gestione Contenuti

Card Smart Complete (card-smart--complete)

Card completa per la visualizzazione di istanze o pratiche con informazioni dettagliate.

Caratteristiche:

  • Icona di stato (check-circle)
  • Codice istanza e nome soggetto
  • Chip di stato
  • Pulsanti azione (visualizza, menu opzioni)
  • Sezione metadati con autore e date
  • Layout responsivo con azioni nascoste su mobile

Card Smart Accordion (card-smart--accordion)

Card espandibile con contenuto collassabile per gestire informazioni complesse.

Caratteristiche:

  • Pulsante accordion con icona chevron
  • Contenuto espandibile con animazioni CSS
  • Controlli ARIA per accessibilità
  • Metadati e azioni sempre visibili
  • JavaScript integrato per gestione stati

Card di Pianificazione e Scadenze

Card Smart Agenda (card-smart--agenda)

Card specializzata per la gestione di scadenze e appuntamenti.

Caratteristiche:

  • Tipologia e oggetto scadenza prominenti
  • Data formattata con datetime semantico
  • Informazioni amministrative (SUAP, ente)
  • Chip di stato pagamento
  • Link di azione contestuali

Card Smart Scadenza (card-smart--scadenza)

Card per scadenze urgenti con layout ad alta visibilità.

Caratteristiche:

  • Sfondo colorato per urgenza visiva
  • Pulsante di azione posizionato strategicamente
  • Data prominente con formattazione speciale
  • Layout ottimizzato per mobile

🔔 Card di Comunicazione

Card Smart Notifiche (card-smart--notifiche)

Card per notifiche di sistema e aggiornamenti di stato.

Caratteristiche:

  • Icona di stato colorata
  • Contenuto offset per gerarchia visiva
  • Metadati temporali
  • Pulsante di azione contestuale

Card Smart Shortcut (card-smart--shortcut)

Card di accesso rapido per azioni frequenti.

Caratteristiche:

  • Layout orizzontale ottimizzato
  • Icone di azione e navigazione
  • Sfondo distintivo
  • Hover states avanzati

Card Interattive e di Selezione

Card Smart Trascinabile (card-smart--trascinabile)

Card per interfacce drag-and-drop con stati di selezione.

Caratteristiche:

  • Cursore pointer per interattività
  • Stati di selezione visivi
  • Metadati autore e data
  • Menu opzioni integrato
  • CSS custom properties per temi

Card Smart Trascinabile Selected (card-smart--trascinabile-selected)

Variante selezionata della card trascinabile.

Sistema Card Selezione

Un sistema completo di card per form e selezioni multiple:

Card Smart Selezione (card-smart--selezione)

Card base per input di selezione con controlli form integrati.

Varianti Selezione Disponibili:

  • card-smart--selezione-selected - Stato selezionato
  • card-smart--selezione-checkbox - Con checkbox
  • card-smart--selezione-large - Versione grande con azioni
  • card-smart--selezione-large-checkbox - Grande con checkbox
  • card-smart--selezione-large-selected - Grande selezionata

Varianti Procedimento:

  • card-smart--selezione-procedimento - Per gestione procedimenti
  • card-smart--selezione-procedimento-checkbox - Con checkbox
  • card-smart--selezione-procedimento-radio - Con radio button
  • card-smart--selezione-procedimento-checkbox-selected - Checkbox selezionata

Configurazioni Tecniche

Parametri di Configurazione Comuni

Oltre ai parametri base delle card standard, le Card Smart supportano:

  • dataScadenza: Data di scadenza in formato ISO
  • dataFormattata: Data formattata per visualizzazione
  • descrizione: Testo descrittivo aggiuntivo
  • editId: ID univoco per componenti con menu
  • profileDialogId: ID per modal di profilo
  • hasActionMenu: Attiva menu azioni
  • hasActionDelete: Attiva opzione eliminazione
  • input: Configurazione per controlli form integrati

Classi CSS Specializzate

Le Card Smart utilizzano classi CSS specifiche:

.rtds-card--smart-trascinabile     /* Card trascinabili */
.rtds-card--smart-scadenza         /* Card scadenze */
.rtds-card--smart-shortcut         /* Card shortcut */
.rtds-card--compact-header         /* Header compatto */

Stati Interattivi

Sistema di stati avanzato con CSS custom properties:

.rtds-card--smart-trascinabile.is-selected {
  --card-smart-bg: #ffffff;
  --card-smart-border: var(--color-brand-00);
  --card-smart-shadow: none;
}

Accessibilità e Usabilità

Pattern ARIA Implementati

  • aria-expanded per controlli accordion
  • aria-controls per associazioni elementi
  • aria-haspopup per menu contestuali
  • role="region" per aree espandibili
  • aria-labelledby per associazioni semantiche

Screen Reader Support

  • Etichette rtds-sr-only per contesto aggiuntivo
  • Descrizioni semantiche per azioni
  • Navigazione da tastiera ottimizzata
  • Focus management per componenti complessi

Responsive Design

  • Layout adattivi mobile-first
  • Azioni nascoste/mostrate per breakpoint
  • Tipografia scalabile
  • Touch-friendly su dispositivi mobili

JavaScript e Interattività

Accordion Component

// Auto-inizializzazione per elementi con classe
.rtds-js-accordion-toggle

// Gestione stati ARIA
aria-expanded="true/false"

// Animazioni CSS coordinate
.rtds-hidden / .rtds-transition-all

Card Fullclickable

Eredita il sistema JavaScript delle card base per area cliccabile estesa.

Best Practices di Implementazione

1. Scelta della Variante Appropriata

  • Complete: Per dashboard e liste dettagliate
  • Accordion: Per contenuti con molti dettagli
  • Agenda: Per scadenze e appuntamenti
  • Notifiche: Per aggiornamenti di stato
  • Selezione: Per form e processi di scelta

2. Gestione Stati

  • Utilizzare gli stati is-selected per feedback visivo
  • Implementare hover states per interattività
  • Gestire focus states per accessibilità

3. Performance

  • Lazy loading per contenuti accordion
  • Ottimizzazione immagini e icone
  • CSS custom properties per temi dinamici

4. Manutenibilità

  • Estendere sempre da template base
  • Utilizzare blocchi Nunjucks per personalizzazioni
  • Mantenere consistenza con design system

Documentazione aggiornata per la versione corrente del Design System RT-UI-Kit