Regione Toscana Design System

Example card component: Trascinabile 

<div class="rtds-card rtds-card--smart-trascinabile rtds-cursor-pointer 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" %}

{% block classes %}{{ super() }} rtds-card--smart-trascinabile rtds-cursor-pointer{% if selected %} is-selected {% endif %}{% endblock classes %}

{% block contentWrapperStart %}
<div class="rtds-flex rtds-flex-col rtds-gap-2 rtds-order-2">
{% endblock contentWrapperStart %}

{% block contentWrapperEnd %}
</div>
{% endblock contentWrapperEnd %}

{% block headingTitle %}
    <div class="rtds-flex rtds-items-center rtds-justify-between rtds-gap-4">
        <{% if h2 %}h2{% else %}h3{% endif %} class="rtds-card__title{% if headingClasses %} {{ headingClasses }}{% endif %} rtds-flex-1">
            <span class="rtds-flex rtds-items-center rtds-gap-3">
                {% render '@icon', {id: 'solid--cube-transparent', size: 'rtds-w-5 rtds-h-5', classes: 'rtds-content-03 rtds-mt-0.5 rtds-flex-shrink-0'}, true %}
                <span class="rtds-flex-1 rtds-text-sm rtds-font-bold rtds-content-01">{{ heading | safe }}</span>
            </span>
            {% if date or author %}
                <div class="rtds-flex rtds-gap-3 rtds-text-sm rtds-font-normal rtds-content-03 rtds-mt-2">
                    {% if date %}
                        <span>Creato il <time datetime="{{ date }}">{{ date }}</time></span>
                    {% endif %}
                    {% if date and author %}
                        <span>|</span>
                    {% endif %}
                    {% if author %}
                        <span><span class="rtds-sr-only">Autore:</span> {{ author }}</span>
                    {% endif %}
                </div>
            {% endif %}
        </{% if h2 %}h2{% else %}h3{% endif %}>
                 
        <div class="rtds-flex-shrink-0 rtds-self-center">
            {% render '@icon', {id: 'mini--squares-2x2', size: 'rtds-w-5 rtds-h-5', classes: "rtds-content-primary rtds-cursor-pointer hover:rtds-content-03 rtds-mr-2.5", label: "Menu opzioni"}, true %}
        </div>
    </div>
{% endblock headingTitle %}

{% block metadatas %}
{% endblock metadatas %}

{% block ctaLink %}
    {% if ctaLink %}
        <div>

            {% render '@action-link--has-icon', {
                href: ctaLink,
                classes: 'rtds-action-link--sm rtds-text-xs',
                label: ctaLinkLabel | default('Mostra anteprima'),
                icon: 'outline--chevron-right',
                iconSize: 'rtds-w-4 rtds-h-4'            }, true %}
        </div>
    {% endif %}
{% endblock ctaLink %}
 
{
  "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
}
  • 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