Regione Toscana Design System — Servizi Design System Core

Example card component 

<article class="rtds-card rtds-card--information rtds-card--information-02 rtds-card--compact-header 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-5 rtds-h-5 rtds-text-success" aria-hidden="true" focusable="false" role="img">
                            <use href="../../icons.svg#solid--check-circle" />
                        </svg>

                        <span class="rtds-sr-only">Etichetta check</span>
                        <span>&lt;Codice istanza&gt;</span>
                        <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>

                        <span>&lt;Nome soggetto&gt;</span>
                    </div>
                </h3>

                <div class="rtds-flex rtds-items-center rtds-gap-2">
                    <span class="rtds-chip rtds-chip--category">
                        <span class="rtds-sr-only">Stato</span>

                        Stato</span>
                    <div class="rtds-hidden md:rtds-flex md:rtds-justify-end md:rtds-gap-3">
                        <button type="button" class="rtds-btn 
    rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 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#solid--eye" />
                            </svg>
                            <span class="rtds-sr-only">

                                Visualizza dettagli
                            </span>

                        </button>

                        <div class="rtds-dropdown-menu rtds-dropdown-menu is-dropdown-menu--actions rtds-relative">
                            <button class="rtds-dropdown-menu__trigger rtds-dropdown-trigger rtds-group rtds-w-full rtds-flex rtds-items-center  rtds-p-0 rtds-justify-center" aria-expanded="false" aria-controls="actionsMenuDesktop02">

                                <span class="rtds-sr-only">
                                    Titolo pagina -
                                    Opzioni
                                </span>

                                <svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6 rtds-dropdown-menu__trigger-icon" aria-hidden="true" focusable="false" role="img">
                                    <use href="../../icons.svg#mini--ellipsis-vertical" />
                                </svg>

                            </button>

                            <ul class="rtds-dropdown-menu__list rtds-hidden rtds-w-[25ch] rtds-absolute rtds-right-0 rtds-top-10 rtds-bg-white rtds-shadow-lg rtds-z-10 rtds-rounded rtds-border rtds-border-gray-01">

                                <li class="rtds-dropdown-menu__item rtds-group/menu-item">
                                    <a class="rtds-dropdown-menu__link rtds-block rtds-transition" href="">
                                        <div class="rtds-flex rtds-gap-2 rtds-items-center">

                                            <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 rtds-mr-2" aria-hidden="true" focusable="false" role="img">
                                                <use href="../../icons.svg#outline--magnifying-glass-circle" />
                                            </svg>

                                            <span class="rtds-grow">Visualizza profilo</span>

                                        </div>

                                    </a>
                                </li>

                                <li class="rtds-dropdown-menu__item rtds-group/menu-item">
                                    <a class="rtds-dropdown-menu__link rtds-block rtds-transition" href="">
                                        <div class="rtds-flex rtds-gap-2 rtds-items-center">

                                            <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 rtds-mr-2" aria-hidden="true" focusable="false" role="img">
                                                <use href="../../icons.svg#outline--pencil" />
                                            </svg>

                                            <span class="rtds-grow">Modifica</span>

                                        </div>

                                    </a>
                                </li>

                                <li class="rtds-dropdown-menu__item rtds-group/menu-item">
                                    <a class="rtds-dropdown-menu__link rtds-block rtds-transition" href="">
                                        <div class="rtds-flex rtds-gap-2 rtds-items-center">

                                            <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 rtds-mr-2" aria-hidden="true" focusable="false" role="img">
                                                <use href="../../icons.svg#outline--trash" />
                                            </svg>

                                            <span class="rtds-grow">Cancella</span>

                                        </div>

                                    </a>
                                </li>

                            </ul>

                        </div>

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

        </div>

        <div class="rtds-flex rtds-items-center rtds-gap-2">
            <a class="rtds-link rtds-text-xs" href="#">&lt;CONTESTO&gt;</a>
            <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>

            <span class="rtds-text-xs rtds-font-medium">&lt;COMUNE&gt;</span>
            <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>

            <span class="rtds-text-xs rtds-font-medium ">&lt;CODICE PROCEDIMENTO PRINCIPALE&gt;</span>
        </div>

        <div class="rtds-card__description !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. Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.
            </p>
        </div>

        <div class="rtds-border-t rtds-border-gray-03 rtds-pt-3">
            <div class="rtds-flex rtds-flex-wrap rtds-items-center rtds-gap-4">
                <ul class="rtds-flex rtds-flex-wrap rtds-items-center rtds-gap-4 rtds-list-none rtds-p-0 rtds-m-0">
                    <li class="rtds-flex rtds-items-center rtds-gap-2">
                        <svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-content-primary" aria-hidden="true" focusable="false" role="img">
                            <use href="../../icons.svg#outline--user" />
                        </svg>

                        <span class="rtds-text-sm rtds-text-gray-600">Autore</span>
                    </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-flex rtds-items-center rtds-gap-2">
                        <svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-content-primary" aria-hidden="true" focusable="false" role="img">
                            <use href="../../icons.svg#outline--calendar" />
                        </svg>

                        <span class="rtds-text-sm rtds-text-gray-600">28.12.2025 alle 15:00</span>
                    </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-flex rtds-items-center rtds-gap-2">
                        <svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-content-primary" aria-hidden="true" focusable="false" role="img">
                            <use href="../../icons.svg#outline--calendar" />
                        </svg>

                        <span class="rtds-text-sm rtds-text-gray-600">28.12.2025 alle 15:00</span>
                    </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-flex rtds-items-center rtds-gap-2">
                        <svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-content-primary" aria-hidden="true" focusable="false" role="img">
                            <use href="../../icons.svg#outline--calendar" />
                        </svg>

                        <span class="rtds-text-sm rtds-text-gray-600">28.12.2025 alle 15:00</span>
                    </li>
                </ul>
            </div>
        </div>

    </div>

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

{% block classes %}{{ super() }} rtds-card--information rtds-card--information-02 rtds-card--compact-header{% 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--check-circle', size: 'rtds-w-5 rtds-h-5', classes: 'rtds-text-success'}, true %}
                <span class="rtds-sr-only">Etichetta check</span>
                <span>&lt;Codice istanza&gt;</span>
                {% render '@vertical-divider', { width: 'rtds-w-2 md:rtds-w-4', classes: 'rtds-hidden md:rtds-block' }, true %}
                <span>&lt;Nome soggetto&gt;</span>
            </div>
        </{% if h2 %}h2{% else %}h3{% endif %}>
        
        <div class="rtds-flex rtds-items-center rtds-gap-2">
            {% render '@chip--category', {icon: 'none', srLabel: "Stato", label: "Stato"}, true %}
            <div class="rtds-hidden md:rtds-flex md:rtds-justify-end md:rtds-gap-3">
                {% render '@button--icon', {
                    classes: "rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03",
                    icon: "solid--eye",
                    label: "Visualizza dettagli"
                    }, true%}
                {% render '@dropdown-menu--actions', {
                    context: 'Titolo pagina',
                    label: 'Opzioni',
                    id: 'actionsMenuDesktop02',
                    classes: 'rtds-border-0'
                }, true %}
            </div>
        </div>
    </div>
{% endblock headingTitle %}

{% block content %}
    <div class="rtds-flex rtds-items-center rtds-gap-2">
        <a class="rtds-link rtds-text-xs" href="#">&lt;CONTESTO&gt;</a>
        {% render '@vertical-divider', { width: 'rtds-w-2 md:rtds-w-4', classes: 'rtds-hidden md:rtds-block' }, true %}
        <span class="rtds-text-xs rtds-font-medium">&lt;COMUNE&gt;</span>
        {% render '@vertical-divider', { width: 'rtds-w-2 md:rtds-w-4', classes: 'rtds-hidden md:rtds-block' }, true %}
        <span class="rtds-text-xs rtds-font-medium ">&lt;CODICE PROCEDIMENTO PRINCIPALE&gt;</span>
    </div>
    {% if 'is-empty' not in excerpt %}
    <div class="rtds-card__description{% 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 content %}

{% block tags %}
    <div class="rtds-border-t rtds-border-gray-03 rtds-pt-3">
        <div class="rtds-flex rtds-flex-wrap rtds-items-center rtds-gap-4">
            <ul class="rtds-flex rtds-flex-wrap rtds-items-center rtds-gap-4 rtds-list-none rtds-p-0 rtds-m-0">
                <li class="rtds-flex rtds-items-center rtds-gap-2">
                    {% render '@icon', {id: 'outline--user', size: 'rtds-w-4 rtds-h-4', classes: 'rtds-content-primary'}, true %}
                    <span class="rtds-text-sm rtds-text-gray-600">Autore</span>
                </li>
                {% render '@vertical-divider', { width: 'rtds-w-2 md:rtds-w-4', classes: 'rtds-hidden md:rtds-block' }, true %}
                <li class="rtds-flex rtds-items-center rtds-gap-2">
                    {% render '@icon', {id: 'outline--calendar', size: 'rtds-w-4 rtds-h-4', classes: 'rtds-content-primary'}, true %}
                    <span class="rtds-text-sm rtds-text-gray-600">28.12.2025 alle 15:00</span>
                </li>
                {% render '@vertical-divider', { width: 'rtds-w-2 md:rtds-w-4', classes: 'rtds-hidden md:rtds-block' }, true %}
                <li class="rtds-flex rtds-items-center rtds-gap-2">
                    {% render '@icon', {id: 'outline--calendar', size: 'rtds-w-4 rtds-h-4', classes: 'rtds-content-primary'}, true %}
                    <span class="rtds-text-sm rtds-text-gray-600">28.12.2025 alle 15:00</span>
                </li>
                {% render '@vertical-divider', { width: 'rtds-w-2 md:rtds-w-4', classes: 'rtds-hidden md:rtds-block' }, true %}
                <li class="rtds-flex rtds-items-center rtds-gap-2">
                    {% render '@icon', {id: 'outline--calendar', size: 'rtds-w-4 rtds-h-4', classes: 'rtds-content-primary'}, true %}
                    <span class="rtds-text-sm rtds-text-gray-600">28.12.2025 alle 15:00</span>
                </li>
            </ul>
        </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.",
  "ctaIcon": "mini--chevron-right",
  "ctaLinkLabel": "Leggi di più",
  "categoryVariant": "",
  "img": {
    "path": "/images/card-image.jpg",
    "alt": ""
  }
}
  • Content: 
    /**
 * CARD SMART
 * Extends @card component styles for CARD SMART COMPONENTS
 *
*/
/* CARD SMART */
:where(.rtds-card--smart-scadenza.rtds-card--event:not(.rtds-card--event-small)) .rtds-card__content {
    grid-auto-flow: column;
}
@media (min-width: 768px) {
    :where(.rtds-card--smart-scadenza.rtds-card--event:not(.rtds-card--event-small)) .rtds-card__content {
        grid-auto-flow: row;
    }
}
:where(.rtds-card--smart-scadenza.rtds-card--event) .rtds-card__date {
    border-right-width: 1px;
    border-bottom-width: 0px;
    padding-right: var(--spacing-4);
    padding-bottom: var(--spacing-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);
        border-style: solid;
    border-width: 1px;
      }
.rtds-card--smart-trascinabile.is-selected {
        /* Override solo delle custom properties pubbliche */
        --card-smart-bg: var(--color-neutral-50);
        --card-smart-border: var(--color-brand-00, var(--color-primary-500));
        --card-smart-shadow: none;
      }
  • URL: /components/raw/card-smart/card-smart.built.css
  • Filesystem Path: components/08-servizi/card-smart/card-smart.built.css
  • Size: 1.5 KB
  • 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: var(--color-neutral-50);
        --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

Contesto di sviluppo Fractal/Nunjucks — Questa sezione riguarda esclusivamente i parametri del context .config.yml usati durante lo sviluppo nella libreria. Non descrive attributi HTML da usare nei temi o ambienti di implementazione.

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à

WCAG 2.1

Livello AA — criteri pertinenti:

  • 4.1.2 Nome, ruolo, valore — i pulsanti azione hanno label descrittive; i menu contestuali espongono aria-haspopup e aria-expanded; le varianti accordion espongono aria-expanded e aria-controls
  • 1.1.1 Contenuti non testuali — l’icona di stato (solid--check-circle) è accompagnata da un testo nascosto visivamente (rtds-sr-only) per lo screen reader
  • 2.4.6 Intestazioni ed etichette — il titolo della card è un <h2> o <h3> configurabile tramite il parametro h2
  • 1.3.1 Informazioni e correlazioni — il chip di stato fornisce l’etichetta semantica dello stato dell’istanza

Struttura e semantica

  • Il componente è renderizzato estendendo @card — il contenitore è un <article> o <div> in base alla variante base
  • Il titolo della card è un <h2> (con h2: true) o <h3> (default) — scegliere il livello corretto in base alla gerarchia della pagina
  • I pulsanti azione nel header (es. “Visualizza dettagli”) sono fuori dal flusso del titolo per evitare confusione nella navigazione

Attributi ARIA

Attributo Valori Condizione
aria-hidden="true" true Sulle icone decorative SVG (outline–user, outline–calendar, outline–check-circle)
srLabel stringa descrittiva Sul chip di stato — fornisce il testo letto dagli screen reader (es. srLabel: "Stato")
label stringa Sul @button--icon “Visualizza dettagli” — è il testo accessibile del pulsante icona

Per gli attributi ARIA di @dropdown-menu--actions (es. aria-haspopup, aria-expanded, aria-controls), consultare la documentazione del componente dropdown-menu.

Tasto Azione
Tab / Shift+Tab Sposta il focus tra i controlli interattivi della card (pulsanti azione, menu, link)
Enter / Space Attiva il controllo focalizzato

Gestione del focus

  • Focus visibile: lo stile :focus-visible è sempre visibile e non viene rimosso via CSS
  • Le azioni desktop sono nascoste su mobile tramite CSS (rtds-hidden md:rtds-flex): la versione mobile può esporre un menu dropdown alternativo

Screen reader

  • L’icona solid--check-circle è accompagnata da <span class="rtds-sr-only">Etichetta check</span> — fornisce contesto testuale all’icona di stato
  • Il chip di stato usa srLabel per fornire un testo alternativo letto dagli screen reader indipendentemente dal contenuto visivo
  • I pulsanti icona (@button--icon) usano il parametro label come testo accessibile (aria-label o testo visivamente nascosto)

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