Regione Toscana Design System Design System Servizi

Example card component: Accordion 

<article class="rtds-card rtds-card--information rtds-card--information-02 rtds-card--compact-header">

    <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 rtds-flex-wrap md:rtds-flex-nowrap rtds-gap-2">
                <div class="rtds-flex rtds-items-center rtds-gap-2 rtds-flex-1 rtds-min-w-0">
                    <h3 class="rtds-accordion__title rtds-flex rtds-font-bold rtds-flex-1 rtds-min-w-0">
                        <button type="button" class="rtds-accordion__trigger rtds-group rtds-flex rtds-items-center rtds-flex-1 rtds-transition-all rtds-p-1 rtds-content-primary rtds-js-accordion-toggle" data-role="button" aria-expanded="false" aria-controls="accordion-content">
                            <span class="rtds-accordion__icon rtds-flex rtds-flex-shrink-0 rtds-transition-transform rtds-mr-2">
                                <svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5 rtds-transition-transform rtds-transition-all is-expand-arrow group-aria-expanded:rtds-rotate-180" aria-hidden="true" focusable="false" role="img">
                                    <use href="../../icons.svg#outline--chevron-down" />
                                </svg>

                            </span>
                            <span class="rtds-accordion__trigger-label rtds-content-01 rtds-flex rtds-items-center rtds-gap-2 rtds-flex-wrap sm:rtds-flex-nowrap rtds-flex-1 rtds-min-w-0">
                                <span class="rtds-truncate">&lt;Codice istanza&gt;</span>
                                <span class="rtds-truncate">&lt;Nome soggetto&gt;</span>
                            </span>
                        </button>
                    </h3>
                </div>

                <div class="rtds-flex rtds-items-center rtds-gap-2 rtds-flex-shrink-0 rtds-w-full md:rtds-w-auto rtds-justify-end">
                    <span class="rtds-chip rtds-chip--category">
                        <span class="rtds-sr-only">Stato</span>

                        Stato</span>
                    <div class="rtds-flex rtds-items-center rtds-gap-2">
                        <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">
                                <span>
                                    Button label
                                </span>
                                <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 rtds-border-none" 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 rtds-flex-wrap rtds-ml-6 sm:rtds-ml-8 md:rtds-ml-10">
            <a class="rtds-link rtds-text-xs" href="#">&lt;CONTESTO&gt;</a>
            <span class="rtds-text-xs rtds-font-medium">&lt;COMUNE&gt;</span>
            <span class="rtds-text-xs rtds-font-medium rtds-break-all sm:rtds-break-normal">&lt;CODICE PROCEDIMENTO PRINCIPALE&gt;</span>
        </div>

        <div id="accordion-content" role="region" aria-labelledby="accordion-trigger" class="rtds-accordion__pane rtds-transition-all rtds-hidden rtds-ml-6 sm:rtds-ml-8 md:rtds-ml-10">

            <div class="rtds-card__description rtds-text-sm">
                <p class="rtds-text-sm md:rtds-text-base">
                    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 rtds-mt-4">
                <div class="rtds-flex rtds-flex-wrap rtds-items-center rtds-gap-2 sm:rtds-gap-4">
                    <ul class="rtds-flex rtds-flex-wrap rtds-items-center rtds-gap-2 sm:rtds-gap-4 rtds-list-none rtds-p-0 rtds-m-0">
                        <li class="rtds-flex rtds-items-center rtds-gap-1 sm:rtds-gap-2">
                            <svg class="rtds-icon rtds-fill-current rtds-w-3 rtds-h-3 sm:rtds-w-4 sm:rtds-h-4 rtds-content-primary" aria-hidden="true" focusable="false" role="img">
                                <use href="../../icons.svg#outline--user" />
                            </svg>

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

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

                            <span class="rtds-text-xs sm:rtds-text-sm rtds-text-gray-600 rtds-whitespace-nowrap">28.12.2025 alle 15:00</span>
                        </li>
                    </ul>
                </div>
            </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 rtds-flex-wrap md:rtds-flex-nowrap rtds-gap-2">
        <div class="rtds-flex rtds-items-center rtds-gap-2 rtds-flex-1 rtds-min-w-0">
            <h3 class="rtds-accordion__title rtds-flex rtds-font-bold rtds-flex-1 rtds-min-w-0">
                <button type="button" 
                        class="rtds-accordion__trigger rtds-group rtds-flex rtds-items-center rtds-flex-1 rtds-transition-all rtds-p-1 rtds-content-primary rtds-js-accordion-toggle" 
                        data-role="button" 
                        aria-expanded="false" 
                        aria-controls="accordion-content">
                    <span class="rtds-accordion__icon rtds-flex rtds-flex-shrink-0 rtds-transition-transform rtds-mr-2">
                        {% render '@icon', {id: 'outline--chevron-down', size: 'rtds-w-5 rtds-h-5', classes: 'rtds-transition-transform rtds-transition-all is-expand-arrow group-aria-expanded:rtds-rotate-180'}, true %}
                    </span>
                    <span class="rtds-accordion__trigger-label rtds-content-01 rtds-flex rtds-items-center rtds-gap-2 rtds-flex-wrap sm:rtds-flex-nowrap rtds-flex-1 rtds-min-w-0">
                        <span class="rtds-truncate">&lt;Codice istanza&gt;</span>
                        <span class="rtds-truncate">&lt;Nome soggetto&gt;</span>
                    </span>
                </button>
            </h3>
        </div>
        
        <div class="rtds-flex rtds-items-center rtds-gap-2 rtds-flex-shrink-0 rtds-w-full md:rtds-w-auto rtds-justify-end">
            {% render '@chip--category',{icon: none, srLabel: "Stato", label: "Stato"}, true %}
            <div class="rtds-flex rtds-items-center rtds-gap-2">
                {% render '@button--icon', {
                    classes: "rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03 ",
                    icon: "solid--eye",
                    srOnlyLabel: "Visualizza dettagli"
                    }, true%}
                {% render '@dropdown-menu--actions', {
                    context: 'Titolo pagina',
                    label: 'Opzioni',
                    id: 'actionsMenuDesktop02',
                    triggerClasses: 'rtds-justify-center rtds-border-none'
                }, true %}
            </div>
        </div>
    </div>
{% endblock headingTitle %}

{% block content %}
    <div class="rtds-flex rtds-items-center rtds-gap-2 rtds-flex-wrap rtds-ml-6 sm:rtds-ml-8 md:rtds-ml-10">
        <a class="rtds-link rtds-text-xs" href="#">&lt;CONTESTO&gt;</a>
        <span class="rtds-text-xs rtds-font-medium">&lt;COMUNE&gt;</span>
        <span class="rtds-text-xs rtds-font-medium rtds-break-all sm:rtds-break-normal">&lt;CODICE PROCEDIMENTO PRINCIPALE&gt;</span>
    </div>
    
    <div id="accordion-content" 
         role="region" 
         aria-labelledby="accordion-trigger" 
         class="rtds-accordion__pane rtds-transition-all rtds-hidden rtds-ml-6 sm:rtds-ml-8 md:rtds-ml-10">
        {% if 'is-empty' not in excerpt %}
        <div class="rtds-card__description{% if excerptClasses %} {{ excerptClasses }}{% endif %}">
            <p class="rtds-text-sm md:rtds-text-base">
                {% if excerpt %}{{ excerpt | safe }}{% else %}Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.{% endif %}
            </p>
        </div>
        {% endif %}
        
        <div class="rtds-border-t rtds-border-gray-03 rtds-pt-3 rtds-mt-4">
            <div class="rtds-flex rtds-flex-wrap rtds-items-center rtds-gap-2 sm:rtds-gap-4">
                <ul class="rtds-flex rtds-flex-wrap rtds-items-center rtds-gap-2 sm:rtds-gap-4 rtds-list-none rtds-p-0 rtds-m-0">
                    <li class="rtds-flex rtds-items-center rtds-gap-1 sm:rtds-gap-2">
                        {% render '@icon', {id: 'outline--user', size: 'rtds-w-3 rtds-h-3 sm:rtds-w-4 sm:rtds-h-4', classes: 'rtds-content-primary'}, true %}
                        <span class="rtds-text-xs sm:rtds-text-sm rtds-text-gray-600">Autore</span>
                    </li>
                    <li class="rtds-flex rtds-items-center rtds-gap-1 sm:rtds-gap-2">
                        {% render '@icon', {id: 'outline--calendar', size: 'rtds-w-3 rtds-h-3 sm:rtds-w-4 sm:rtds-h-4', classes: 'rtds-content-primary'}, true %}
                        <span class="rtds-text-xs sm:rtds-text-sm rtds-text-gray-600 rtds-whitespace-nowrap">28.12.2025 alle 15:00</span>
                    </li>
                    <li class="rtds-flex rtds-items-center rtds-gap-1 sm:rtds-gap-2">
                        {% render '@icon', {id: 'outline--calendar', size: 'rtds-w-3 rtds-h-3 sm:rtds-w-4 sm:rtds-h-4', classes: 'rtds-content-primary'}, true %}
                        <span class="rtds-text-xs sm:rtds-text-sm rtds-text-gray-600 rtds-whitespace-nowrap">28.12.2025 alle 15:00</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
{% endblock content %}

{% block tags %}
{% 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. 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": ""
  },
  "tags": true,
  "scadenza": true,
  "contentGap": "rtds-gap-3",
  "excerptClasses": "rtds-text-sm"
}
  • 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