Regione Toscana Design System Design System Servizi

Example card component: Selezione Large Checkbox 

<article class="rtds-card rtds-card--smart-trascinabile is-card-fullclickable rtds-group/card">

    <div class="rtds-grid md:rtds-flex rtds-w-full md:rtds-items-center md:rtds-justify-between rtds-gap-2">

        <div class="rtds-input rtds-input-field rtds-input-checkbox rtds-flex-1">

            <div class="rtds-flex rtds-gap-2 rtds-items-center">
                <input id="radio-1" name="radio-1" class="   " type="checkbox">
                <label class="rtds-input-checkbox__label rtds-flex-1 rtds-text-sm md:rtds-text-base" for="radio-1">
                    Nome procedimento
                </label>
            </div>

        </div>

        <div class="rtds-flex rtds-items-center rtds-justify-end 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#outline--trash" />
                </svg>
                <span class="rtds-sr-only">

                    Elimina Nome Procedimento
                </span>

            </button>

        </div>

    </div>

</article>
 
{% extends "@card-smart--selezione" %}
 
{
  "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": ""
  },
  "actions": true,
  "fullClick": true,
  "input": {
    "variant": "input-checkbox",
    "context": {
      "id": "radio-1",
      "name": "radio-1",
      "label": "Nome procedimento",
      "labelClasses": "rtds-flex-1 rtds-text-sm md:rtds-text-base",
      "classes": "rtds-flex-1"
    }
  }
}
  • 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