Regione Toscana Design System — Servizi Design System Core

Example card component: Trascinabile Selected 

<div class="rtds-card rtds-card--smart-trascinabile rtds-cursor-pointer is-selected  is-card-fullclickable rtds-group/card">

    <div class="rtds-card__content rtds-p-0">

        <div class="rtds-flex rtds-flex-col rtds-gap-2 rtds-order-2">

            <div class="rtds-card__heading">

                <div class="rtds-flex rtds-items-center rtds-justify-between rtds-gap-4">
                    <h3 class="rtds-card__title rtds-flex-1">
                        <span class="rtds-flex rtds-items-center rtds-gap-3">
                            <svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5 rtds-content-03 rtds-mt-0.5 rtds-flex-shrink-0" aria-hidden="true" focusable="false" role="img">
                                <use href="../../icons.svg#solid--cube-transparent" />
                            </svg>

                            <span class="rtds-flex-1 rtds-text-sm rtds-font-bold rtds-content-01">Codice oggetto con titolo medio/lungo a discrezione dell'autore</span>
                        </span>

                        <div class="rtds-flex rtds-gap-3 rtds-text-sm rtds-font-normal rtds-content-03 rtds-mt-2">

                            <span>Creato il <time datetime="28.01.25">28.01.25</time></span>

                            <span>|</span>

                            <span><span class="rtds-sr-only">Autore:</span> Mario Rossi</span>

                        </div>

                    </h3>

                    <div class="rtds-flex-shrink-0 rtds-self-center">
                        <svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5 rtds-content-primary rtds-cursor-pointer hover:rtds-content-03 rtds-mr-2.5" aria-hidden="true" focusable="false" role="img">
                            <use href="../../icons.svg#mini--squares-2x2" />
                        </svg>

                    </div>
                </div>

            </div>

            <div>

                <a href="true" class="rtds-action-link
     rtds-action-link--sm rtds-text-xs rtds-action-link--has-icon
">
                    Mostra anteprima

                    <svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4" aria-hidden="true" focusable="false" role="img">
                        <use href="../../icons.svg#outline--chevron-right" />
                    </svg>

                </a>
            </div>

        </div>

    </div>

</div>
 
{% extends "@card-smart--trascinabile" %}
 
{
  "article": false,
  "categoryText": "Categoria",
  "heading": "Codice oggetto con titolo medio/lungo a discrezione dell'autore",
  "text": "Testo",
  "excerpt": "is-empty",
  "ctaIcon": "mini--chevron-right",
  "ctaLinkLabel": "Mostra anteprima",
  "categoryVariant": "",
  "img": {
    "path": "/images/card-image.jpg",
    "alt": ""
  },
  "contentClasses": "rtds-p-0",
  "fullClick": true,
  "thumb": false,
  "date": "28.01.25",
  "author": "Mario Rossi",
  "ctaLink": true,
  "selected": true
}
  • 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