Regione Toscana Design System

Example card component: Selezione Large 

<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-radio rtds-flex-1">

            <div class="rtds-flex rtds-gap-2 rtds-items-center">
                <input id="radio-1" name="radio-1" class="  " type="radio">
                <label class="rtds-input-radio__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-radio",
    "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
 *
*/
@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