Regione Toscana Design System

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
 *
*/
@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