Regione Toscana Design System

Example card component: Agenda 

<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-start rtds-justify-between rtds-w-full rtds-gap-4">
                <div class="rtds-flex rtds-gap-2">
                    <h3 class="rtds-text-xl rtds-font-bold rtds-content-01">
                        <span class="rtds-text-xl rtds-font-bold rtds-uppercase rtds-content-primary"> &lt;Tipologia scadenza&gt; </span>
                        &lt;Oggetto scadenza&gt;
                    </h3>
                </div>
            </div>

            <div class="rtds-flex rtds-items-start rtds-justify-between rtds-w-full">
                <div class="rtds-flex-1">
                    <time class="rtds-text-xl rtds-font-bold rtds-content-01 rtds-block rtds-mb-2" datetime="2024-07-23">
                        23.07.2024
                    </time>
                    <div class="rtds-flex rtds-flex-wrap rtds-items-center rtds-gap-2 sm:rtds-gap-4">
                        <ul class="rtds-flex rtds-flex-wrap rtds-items-center rtds-gap-2 rtds-list-none rtds-p-0 rtds-m-0">
                            <li class="rtds-flex rtds-items-center rtds-gap-1 sm:rtds-gap-2">
                                <span class="rtds-text-xs sm:rtds-text-sm rtds-content-primary rtds-uppercase">Suap</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-1 sm:rtds-gap-2">
                                <span class="rtds-text-xs sm:rtds-text-sm rtds-text-gray-600 rtds-whitespace-nowrap">&lt;Amministrazione&gt;</span>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="rtds-flex rtds-items-center rtds-gap-2 rtds-flex-shrink-0">
                    <span class="rtds-chip rtds-chip--category rtds-chip--outlined">
                        <span class="rtds-sr-only">Stato: </span>

                        Pagato</span>
                    <button type="button" class="rtds-btn 
    rtds-btn--icon rtds-border-none rtds-p-0 rtds-content-01 hover:rtds-text-white 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--arrow-up-on-square" />
                        </svg>
                        <span class="rtds-sr-only">

                            Visualizza dettagli
                        </span>

                    </button>

                </div>
            </div>

        </div>

        <div class="rtds-card__description rtds-justify-self-center md:rtds-justify-self-start">
            <p class="rtds-text-base rtds-content-03">
                Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.
            </p>
        </div>

        <div class="rtds-mt-2">
            <div class="rtds-flex rtds-flex-wrap rtds-items-center rtds-justify-between 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">Nome soggetto</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--document-text" />
                        </svg>

                        <span class="rtds-text-sm rtds-text-gray-600">Numero istanza</span>
                    </li>
                </ul>
                <div class="rtds-flex rtds-justify-center sm:rtds-justify-end rtds-w-full sm:rtds-w-auto">
                    <div class="rtds-flex-shrink-0">
                        <a href="#" class="rtds-action-link
     rtds-action-link--has-icon rtds-content-primary rtds-action-link--sm
">
                            Vai ai pagamenti

                            <svg class="rtds-icon rtds-fill-current rtds-transition-all hover:rtds-translate-x-1" aria-hidden="true" focusable="false" role="img">
                                <use href="../../icons.svg#outline--arrow-right" />
                            </svg>

                        </a>
                    </div>
                </div>
            </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-start rtds-justify-between rtds-w-full rtds-gap-4">
        <div class="rtds-flex rtds-gap-2">
            <h3 class="rtds-text-xl rtds-font-bold rtds-content-01">
               <span class="rtds-text-xl rtds-font-bold rtds-uppercase rtds-content-primary"> &lt;Tipologia scadenza&gt; </span>
                &lt;Oggetto scadenza&gt;
            </h3>
        </div>
    </div>
{% endblock headingTitle %}

{% block metadatas %}
    <div class="rtds-flex rtds-items-start rtds-justify-between rtds-w-full">
        <div class="rtds-flex-1">
            <time class="rtds-text-xl rtds-font-bold rtds-content-01 rtds-block rtds-mb-2" datetime="{{ dataScadenza }}">
                {{ dataFormattata | default('23.07.2024') }}
            </time>
            <div class="rtds-flex rtds-flex-wrap rtds-items-center rtds-gap-2 sm:rtds-gap-4">
                <ul class="rtds-flex rtds-flex-wrap rtds-items-center rtds-gap-2 rtds-list-none rtds-p-0 rtds-m-0">
                    <li class="rtds-flex rtds-items-center rtds-gap-1 sm:rtds-gap-2">
                        <span class="rtds-text-xs sm:rtds-text-sm rtds-content-primary rtds-uppercase">Suap</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-1 sm:rtds-gap-2">
                        <span class="rtds-text-xs sm:rtds-text-sm rtds-text-gray-600 rtds-whitespace-nowrap">&lt;Amministrazione&gt;</span>
                    </li>
                </ul>
            </div>
        </div>
        
        <div class="rtds-flex rtds-items-center rtds-gap-2 rtds-flex-shrink-0">
            {% render '@chip--category', {
                srLabel: "Stato: ",
                label: "Pagato",
                classes: "rtds-chip--outlined",
                icon: none
            }, true %}
            {% render '@button--icon',{
                icon: "outline--arrow-up-on-square",
                classes: "rtds-border-none rtds-p-0 rtds-content-01 hover:rtds-text-white hover:rtds-bg-black focus:rtds-content-03",
                label: "Visualizza dettagli"
            }, true %}
        </div>
    </div>
{% endblock metadatas %}

{% block content %}
    <div class="rtds-card__description rtds-justify-self-center md:rtds-justify-self-start">
        <p class="rtds-text-base rtds-content-03">
            {% if descrizione %}{{ descrizione | safe }}{% else %}Qui ci andrà un testo paragrafo di altezza max 3 righe, poi il testo viene ellipzato.{% endif %}
        </p>
    </div>
{% endblock content %}

{% block tags %}
    <div class="rtds-mt-2">
        <div class="rtds-flex rtds-flex-wrap rtds-items-center rtds-justify-between 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">Nome soggetto</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--document-text', size: 'rtds-w-4 rtds-h-4', classes: 'rtds-content-primary'}, true %}
                    <span class="rtds-text-sm rtds-text-gray-600">Numero istanza</span>
                </li>
            </ul>
            <div class="rtds-flex rtds-justify-center sm:rtds-justify-end rtds-w-full sm:rtds-w-auto">
                <div class="rtds-flex-shrink-0">
                    {% render '@action-link--sm', {
                        classes: 'rtds-action-link--has-icon rtds-content-primary',
                        hasIcon: 'true',
                        icon: 'outline--arrow-right',
                        label: 'Vai ai pagamenti',
                        href: '#',
                        iconClasses: 'rtds-transition-all hover:rtds-translate-x-1'
                    }, true %}
                </div>
            </div>
        </div>
    </div>
{% endblock tags %}
 
{
  "article": true,
  "categoryText": "Categoria",
  "heading": "Nunc aliquam phasellus molestie blandit. Nisi, amet, id maecenas diam",
  "text": "Testo",
  "excerpt": "Qui ci andrà un testo paragrafo di altezza max 3 righe, poi il testo viene ellipzato.",
  "ctaIcon": "mini--chevron-right",
  "ctaLinkLabel": "Leggi di più",
  "categoryVariant": "",
  "img": {
    "path": "/images/card-image.jpg",
    "alt": ""
  },
  "fullClick": true,
  "tags": true,
  "scadenza": true,
  "contentGap": "rtds-gap-3",
  "excerptClasses": "rtds-text-sm",
  "dataScadenza": "2024-07-23",
  "dataFormattata": "23.07.2024",
  "descrizione": "Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et."
}
  • 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