Regione Toscana Design System Design System Servizi

Page Header Servizio: Online 

<div class="rtds-page-header rtds-container rtds-space-y-2 rtds-page-header--has-bg rtds-page-header--servizio">

    <div class="rtds-flex">
        <a href="#" class="rtds-text-link rtds-content-03 rtds-text-link--s">

            <svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-flex-shrink-0 rtds-flex-grow-0" aria-hidden="true" focusable="false" role="img">
                <use href="../../icons.svg#solid--arrow-left" />
            </svg>

            Torna a: Nome Tema

        </a>
    </div>

    <div class="rtds-page-header__content rtds-grid rtds-gap-5 md:rtds-gap-12 rtds-grid-cols-12  rtds-divide-y rtds-divide-gray-02 lg:rtds-divide-y-0 lg:rtds-divide-x ">

        <div class="rtds-grid rtds-content-start rtds-gap-5 rtds-col-span-12 lg:rtds-col-span-4">
            <div class="rtds-page-header__title rtds-grid rtds-gap-4">
                <h1 class="rtds-heading-1 rtds-order-2">
                    Nome servizio
                </h1>
                <div class="rtds-order-1">
                    <ul role="list" class="rtds-flex rtds-gap-2 rtds-flex-wrap">

                        <li>
                            <span class="rtds-chip rtds-chip--category">
                                <svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-mr-1.5" aria-hidden="true" focusable="false" role="img">
                                    <use href="../../icons.svg#outline--phone" />
                                </svg>

                                <span class="rtds-sr-only">Categoria</span>

                                telefono</span>
                        </li>

                        <li>
                            <span class="rtds-chip rtds-chip--category">
                                <svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-mr-1.5" aria-hidden="true" focusable="false" role="img">
                                    <use href="../../icons.svg#outline--user-group" />
                                </svg>

                                <span class="rtds-sr-only">Categoria</span>

                                cittadini</span>
                        </li>

                        <li>
                            <span class="rtds-chip rtds-chip--category">
                                <svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-mr-1.5" aria-hidden="true" focusable="false" role="img">
                                    <use href="../../icons.svg#outline--user-group" />
                                </svg>

                                <span class="rtds-sr-only">Tema</span>

                                terza età</span>
                        </li>

                    </ul>
                </div>
            </div>

            <div class="rtds-page-header__description rtds-text-base lg:rtds-text-lg">
                <p>
                    Descrizione <strong>servizio</strong>
                </p>
            </div>

        </div>

        <div class="rtds-pt-5 lg:rtds-pt-0 lg:rtds-pl-5 xl:rtds-pl-8 rtds-col-span-12 lg:rtds-col-span-4">
            <h2 class="rtds-sr-only">Contatti e orari</h2>
            <dl class="rtds-grid rtds-gap-1.5">
                <div class="rtds-content-02 rtds-flex rtds-gap-2 md:rtds-gap-4 rtds-pb-2">
                    <div>
                        <div class="rtds-flex rtds-items-center rtds-justify-center rtds-w-8 rtds-h-8 md:rtds-w-10 md:rtds-h-10 rtds-rounded-full rtds-border-2 rtds-border-current">
                            <svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5 md:rtds-w-6 md:rtds-h-6" aria-hidden="true" focusable="false" role="img">
                                <use href="../../icons.svg#outline--phone" />
                            </svg>

                        </div>
                    </div>
                    <div>
                        <dt class="rtds-uppercase rtds-text-xs md:rtds-text-sm rtds-font-bold">Numero verde</dt>
                        <dd class="rtds-font-bold rtds-heading-3 rtds-leading-tight">
                            <div class="rtds-flex rtds-gap-2">
                                <a class="hover:rtds-underline rtds-break-words" href="tel:+393333333333">333 333 3333</a>
                            </div>
                            <div class="rtds-flex rtds-gap-2">
                                <a class="hover:rtds-underline rtds-break-words" href="tel:+393333333333">333 333 3333 (da cellulare)</a>
                            </div>
                        </dd>
                    </div>
                </div>
                <div class="rtds-content-02 rtds-flex rtds-gap-2 md:rtds-gap-4 rtds-pb-2">
                    <div>
                        <div class="rtds-flex rtds-items-center rtds-justify-center rtds-w-8 rtds-h-8 md:rtds-w-10 md:rtds-h-10 rtds-rounded-full rtds-border-2 rtds-border-current">
                            <svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5 md:rtds-w-6 md:rtds-h-6" aria-hidden="true" focusable="false" role="img">
                                <use href="../../icons.svg#outline--envelope-open" />
                            </svg>

                        </div>
                    </div>
                    <div class="rtds-font-bold">
                        <dt class="rtds-uppercase rtds-text-xs md:rtds-text-sm">Email</dt>
                        <dd class="rtds-heading-3 rtds-leading-tight"><a class="hover:rtds-underline rtds-break-words" href="mailto:info@servizio.it">info@servizio.it</a></dd>
                    </div>
                </div>
                <div class="rtds-flex rtds-items-center rtds-gap-2 md:rtds-gap-4 rtds-leading-none">
                    <dt class="rtds-content-02"><svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6" aria-hidden="true" focusable="false" role="img">
                            <use href="../../icons.svg#outline--calendar-days" />
                        </svg>
                        <span class="rtds-sr-only">Giorni</span>
                    </dt>
                    <dd class="rtds-text-sm md:rtds-text-base rtds-leading-tight">lunedì - venerdì | sabato</dd>
                </div>
                <div class="rtds-flex rtds-items-center rtds-gap-2 md:rtds-gap-4 rtds-leading-none">
                    <dt class="rtds-content-02"><svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6" aria-hidden="true" focusable="false" role="img">
                            <use href="../../icons.svg#outline--clock" />
                        </svg>
                        <span class="rtds-sr-only">Orari</span>
                    </dt>
                    <dd class="rtds-text-sm md:rtds-text-base rtds-leading-tight">08:00 - 12:00 | 14:00 - 18:00</dd>
                </div>
            </dl>
        </div>

        <div class="rtds-service-access rtds-pt-5 lg:rtds-pt-0 lg:rtds-pl-5 xl:rtds-pl-8 rtds-grid rtds-gap-2 rtds-col-span-12 lg:rtds-col-span-4">
            <h2 class="rtds-sr-only">Come accedere o usufruire del servizio</h2>

            <div class="rtds-grid rtds-gap-1.5">
                <div class="rtds-content-02 rtds-flex rtds-gap-2 md:rtds-gap-4 rtds-pb-2">
                    <div class="">
                        <div class="rtds-flex rtds-items-center rtds-justify-center rtds-w-8 rtds-h-8 md:rtds-w-10 md:rtds-h-10 rtds-rounded-full rtds-border-2 rtds-border-current">
                            <svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5 md:rtds-w-6 md:rtds-h-6" aria-hidden="true" focusable="false" role="img">
                                <use href="../../icons.svg#outline--arrow-right-on-rectangle" />
                            </svg>

                        </div>
                    </div>
                    <dl>
                        <dt class="rtds-uppercase rtds-text-xs md:rtds-text-sm rtds-font-bold">Accesso</dt>
                        <dd class="rtds-font-bold rtds-heading-3 rtds-leading-tight">
                            Tessera sanitaria / SPID livello 2 / CIE
                        </dd>
                    </dl>
                </div>

                <div class="rtds-grid lg:rtds-flex lg:rtds-justify-end rtds-mt-auto">
                    <a href="#" class="rtds-btn 
    rtds-btn--icon-right rtds-group/button rtds-btn--secondary">

                        Accedi al servizio

                        <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 group-hover/button:rtds-translate-x-1" aria-hidden="true" focusable="false" role="img">
                            <use href="../../icons.svg#mini--chevron-right" />
                        </svg>

                    </a>

                </div>

            </div>

        </div>

    </div>

</div>
 
{% extends '@page-header-servizio' %}
{% block location %}
    <div class="rtds-grid lg:rtds-flex lg:rtds-justify-end rtds-mt-auto">
        {% render '@button--icon-right', button, true %}
    </div>
{% endblock location %}
 
{
  "title": "Nome servizio",
  "hasBg": true,
  "backLink": {
    "label": "Torna a: Nome Tema",
    "icon": "solid--arrow-left",
    "classes": "rtds-content-03"
  },
  "description": "Descrizione <strong>servizio</strong>",
  "contentGridTemplateColumns": "rtds-grid-cols-12",
  "columnSpan": "rtds-col-span-12 lg:rtds-col-span-4",
  "locationIcon": "outline--arrow-right-on-rectangle",
  "locationTitleLabel": "Accesso",
  "locationTitleMain": "Tessera sanitaria / SPID livello 2 / CIE",
  "categories": [
    {
      "label": "telefono",
      "icon": "outline--phone",
      "srLabel": "Categoria"
    },
    {
      "label": "cittadini",
      "icon": "outline--user-group",
      "srLabel": "Categoria"
    },
    {
      "label": "terza età",
      "icon": "outline--user-group",
      "srLabel": "Tema"
    }
  ],
  "serviceAccessClasses": "rtds-grid rtds-gap-2",
  "button": {
    "href": "#",
    "label": "Accedi al servizio",
    "icon": "mini--chevron-right",
    "classes": "rtds-btn--secondary"
  }
}

Page Header Servizio

Intestazione di pagina per servizi regionali. Estende @page-header-base con un layout a tre colonne: titolo e categorie a sinistra, informazioni di contatto (numero verde, email, orari) al centro, modalità di accesso o sportello a destra.

Comportamento

Il componente estende @page-header-base e ne sovrascrive il blocco content con tre colonne strutturate:

  • Colonna sinistra: <h1> con titolo servizio, lista di chip categoria (@chip--category), e descrizione opzionale.
  • Colonna centrale: sezione contatti con numero verde (link tel:), email (link mailto:), giorni e orari, racchiusa in un <dl>.
  • Colonna destra: sezione accesso al servizio con icona, etichetta tipologia (locationTitleLabel), valore principale (locationTitleMain), e blocco location personalizzabile via Nunjucks. Nella variante online, include un pulsante CTA per accedere al servizio digitale.

Varianti

Varianti di contenuto

  • default: Header standard con sportello fisico (“Punto insieme”) e link “Trova quello più vicino a te”.
  • online: Header per servizio online — sostituisce l’icona sportello con un’icona di accesso digitale, cambia locationTitleLabel in “Accesso” e locationTitleMain con le modalità di autenticazione (es. SPID, CIE), aggiunge un pulsante CTA tramite serviceAccessClasses e button.

Parametri di configurazione

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 o proprietà da usare nei temi, CMS o ambienti di implementazione.

Parametri base (ereditati da @page-header-base)

  • title (stringa, obbligatorio): Titolo principale del servizio, renderizzato come <h1>.
  • hasBg (booleano, opzionale): Se true, aggiunge sfondo gradiente e padding al contenitore (rtds-page-header--has-bg).
  • backLink (oggetto, opzionale): Configurazione del back link. Chiavi: label (stringa), icon (ID icona SVG), classes (classi aggiuntive).
  • description (stringa, opzionale): Testo descrittivo del servizio, accetta HTML (filtro safe).
  • contentGridTemplateColumns (stringa, opzionale): Classi CSS per la griglia delle colonne del contenuto (es. rtds-grid-cols-12).
  • columnSpan (stringa, opzionale): Classi CSS per il col-span di ciascuna colonna (es. rtds-col-span-12 lg:rtds-col-span-4).
  • contentLeftMaxWidth (stringa, opzionale): Classi CSS per la larghezza massima della colonna sinistra.
  • classes (stringa, opzionale): Classi CSS aggiuntive sull’elemento radice.

Parametri categorie

  • categories (array, opzionale): Lista di chip categoria da visualizzare sopra il titolo. Ogni elemento è passato al componente @chip--category con le seguenti chiavi:
    • label (stringa, obbligatorio): Testo del chip.
    • icon (stringa, opzionale): ID icona SVG.
    • srLabel (stringa, opzionale): Etichetta visibile solo agli screen reader (es. "Categoria", "Tema").

Parametri sezione accesso

  • locationIcon (stringa, obbligatorio): ID dell’icona SVG per la modalità di accesso (es. outline--user-check, outline--arrow-right-on-rectangle).
  • locationTitleLabel (stringa, obbligatorio): Etichetta visualizzata sopra il valore principale (es. "Sportello", "Accesso").
  • locationTitleMain (stringa, obbligatorio): Valore principale della sezione accesso (es. "Punto insieme", "Tessera sanitaria / SPID livello 2 / CIE").
  • serviceAccessClasses (stringa, opzionale): Classi CSS aggiuntive sul wrapper della sezione accesso (es. rtds-grid rtds-gap-2 per la variante online).

Parametri CTA (variante online)

  • button (oggetto, opzionale): Configurazione del pulsante CTA accesso. Chiavi: href (URL), label (testo), icon (ID icona SVG), classes (variante pulsante, es. rtds-btn--secondary).

Accessibilità

WCAG 2.1

Livello AA — criteri pertinenti:

  • 1.3.1 Informazioni e correlazioni — struttura con <h1>, <h2 class="rtds-sr-only"> per le sezioni contatti e accesso, e <dl> per i dati strutturati
  • 2.4.4 Scopo del collegamento (nel contesto) — i link telefono (tel:) e email (mailto:) devono avere testo descrittivo e leggibile
  • 1.4.3 Contrasto minimo — testo e icone rispettano il rapporto di contrasto AA su tutti gli sfondi supportati

Struttura e semantica

  • <div class="rtds-page-header"> — wrapper presentazionale; eredita la struttura da @page-header-base
  • <h1> — titolo principale del servizio; renderizzato nella colonna sinistra; deve comparire una sola volta nella pagina
  • <h2 class="rtds-sr-only">Contatti e orari</h2> — heading nascosto visivamente; identifica la sezione contatti per gli screen reader
  • <h2 class="rtds-sr-only">Come accedere o usufruire del servizio</h2> — heading nascosto; identifica la sezione accesso per gli screen reader
  • <dl> con <dt> e <dd> — struttura semantica per le coppie termine/definizione (numero verde, email, giorni, orari)
  • <ul role="list"> — lista di chip categoria; role="list" ripristina la semantica di lista rimossa da Tailwind
  • <a href="tel:..."> — link telefonico; annunciato dagli screen reader come collegamento telefonico
  • <a href="mailto:..."> — link email; annunciato come collegamento email

Attributi ARIA

Attributo Valori Condizione
role="list" list Sulla <ul> dei chip categoria — ripristina semantica lista

Screen reader

  • I due <h2 class="rtds-sr-only"> consentono la navigazione per heading nelle sezioni contatti e accesso, senza alterare la gerarchia visiva
  • Le icone usate come unico contenuto nei <dt> (giorni, orari) hanno un <span class="rtds-sr-only"> adiacente con l’etichetta testuale (es. "Giorni", "Orari")
  • I chip categoria espongono il tipo tramite srLabel (es. "Categoria: telefono")
  • I link tel: e mailto: sono letti come link funzionali dai principali screen reader

Stili CSS

Il componente non ha un proprio file CSS dedicato; utilizza le classi condivise definite in components/04-organisms/page-headers/page-headers.css e le utility Tailwind.

Classi Base (da page-headers.css)

  • .rtds-page-header: Padding verticale adattivo (py-4 mobile, py-6 tablet, py-8 desktop)
  • .rtds-page-header--has-bg: Aggiunge padding orizzontale, angoli arrotondati e sfondo gradiente (rtds-bg-gradient-04)
  • .rtds-page-header--servizio: Modificatore applicato automaticamente da questo template; identifica il layout a tre colonne del servizio

Classi Elementi (BEM)

  • .rtds-page-header__title: Wrapper del blocco titolo (h1 + lista categorie)
  • .rtds-page-header__description: Wrapper del testo descrittivo

Esempi di utilizzo

<!-- Header servizio con sportello fisico (default) -->
<div class="rtds-page-header rtds-container rtds-space-y-2 rtds-page-header--has-bg rtds-page-header--servizio">
  <!-- back link -->
  <!-- contenuto a 3 colonne: titolo + categorie | contatti | sportello -->
</div>

<!-- Header servizio con accesso online -->
<!-- Usare la variante "online" nel config.yml passando:
     locationIcon: "outline--arrow-right-on-rectangle"
     locationTitleLabel: "Accesso"
     locationTitleMain: "Tessera sanitaria / SPID livello 2 / CIE"
     serviceAccessClasses: "rtds-grid rtds-gap-2"
     button: { href: "#", label: "Accedi al servizio", icon: "mini--chevron-right", classes: "rtds-btn--secondary" }
-->

Note

  • Questo componente estende @page-header-base tramite template inheritance Nunjucks — non va usato standalone.
  • La sezione contatti (numero verde, email, orari) è hardcodata nel template .njk; in un contesto reale i valori devono essere passati come parametri di contesto o tramite blocchi Nunjucks.
  • Il blocco {% block location %} è sovrascrivibile in estensioni ulteriori del template per personalizzare il link “Trova quello più vicino a te”.
  • Richiede lo sprite SVG caricato in pagina per le icone (componente @icon).
  • Dipende da: @page-header-base, @chip--category, @icon, @back-link, e — nella variante online — da @button.