Regione Toscana Design System — Servizi Design System Core

Page Header With Cover: Evento Text Fullsize 

<div class="rtds-page-header-with-cover lg:rtds-grid lg:rtds-grid-cols-12 rtds-page-header-with-cover--text-fullwidth">
    <div class="rtds-page-header__content lg:rtds-grid lg:rtds-content-center rtds-space-y-4 lg:rtds-space-y-8
     lg:rtds-col-span-12
    ">
        <div class="rtds-page-header__title rtds-grid rtds-gap-4">
            <div class="rtds-order-2 rtds-space-y-2 lg:rtds-space-y-4">

                <h1 class="rtds-heading-1">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit
                </h1>
            </div>

            <small class="rtds-text-sm rtds-order-1">
                <span class="rtds-category "><svg class="rtds-icon rtds-fill-current rtds-w-2 rtds-h-2" aria-hidden="true" focusable="false" role="img">
                        <use href="../../icons.svg#solid--circle" />
                    </svg>

                    <span class="rtds-lowercase rtds-content-01 rtds-font-medium">evento</span>
                </span>
            </small>

        </div>

        <div class="rtds-page-header__description">
            <dl class="rtds-flex rtds-flex-col rtds-gap-2 md:rtds-gap-4">
                <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-leading-tight"><time class="rtds-font-bold" datetime="2025-01-16">16.05.2025</time></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-leading-tight">08:00 - 12:00 | 14:00 - 18:00</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--map-pin" />
                        </svg>
                        <span class="rtds-sr-only">Luogo</span>
                    </dt>
                    <dd class="rtds-leading-tight">Sala Eden Bastione Garibaldi, viale Alessandro Manetti, 4 - Grosseto</dd>
                </div>
            </dl>
        </div>

    </div>

</div>
 
{
  "title": "Lorem ipsum dolor sit amet consectetur adipisicing elit",
  "imgPath": "/images/cover-image.jpg",
  "contentType": "evento",
  "gridVariant": "textFullwidth",
  "textOnly": true
}
  • Content: 
    .rtds-page-header-with-cover {
    border-bottom-width: 1px;
        border-color: var(--color-border-gray-01);
}
@media (min-width: 1024px) {
    .rtds-page-header-with-cover {
        min-height: var(--spacing-60);
    }
}
:where(.rtds-page-header-with-cover) .rtds-page-header__content {
    padding-left: var(--spacing-4);
    padding-right: var(--spacing-4);
    padding-top: var(--spacing-6);
    padding-bottom: var(--spacing-6);
    background-image: var(--gradient-04);
}
@media (min-width: 1024px) {
    :where(.rtds-page-header-with-cover) .rtds-page-header__content {
        padding-top: var(--spacing-8);
        padding-bottom: var(--spacing-8);
        padding-left: var(--spacing-6);
        padding-right: var(--spacing-16);
    }
}
:where(.rtds-page-header-with-cover--text-fullwidth) .rtds-page-header__title,
    :where(.rtds-page-header-with-cover--text-fullwidth) .rtds-page-header__description {
    max-width: 52em;
}
@media (min-width: 1024px) {
    :where(.rtds-page-header-with-cover) .rtds-page-header__cover {
        height: 100%;
    }
}
  • URL: /components/raw/page-header-with-cover/page-header-with-cover.built.css
  • Filesystem Path: components/04-organisms/page-headers/page-header-with-cover/page-header-with-cover.built.css
  • Size: 1.1 KB
  • Content: 
    @layer components {
    .rtds-page-header-with-cover {
        @apply rtds-border-b rtds-border-gray-01 lg:rtds-min-h-60;
    }

    :where(.rtds-page-header-with-cover) .rtds-page-header__content {
        @apply rtds-px-4 rtds-py-6 lg:rtds-pl-6 lg:rtds-pr-16 lg:rtds-py-8 rtds-bg-gradient-04;
    }

    :where(.rtds-page-header-with-cover--text-fullwidth) .rtds-page-header__title,
    :where(.rtds-page-header-with-cover--text-fullwidth) .rtds-page-header__description {
        @apply rtds-max-w-[52em];
    }

    :where(.rtds-page-header-with-cover) .rtds-page-header__cover {
        @apply lg:rtds-h-full;
    }
}
  • URL: /components/raw/page-header-with-cover/page-header-with-cover.css
  • Filesystem Path: components/04-organisms/page-headers/page-header-with-cover/page-header-with-cover.css
  • Size: 623 Bytes

Page header with cover

Descrizione

Template per page header con immagine di copertina.

Il componente può avere:

  • descrizione
  • informazioni di aggiornamento
  • dettagli con icona (es: data, orario, luogo)

Note di markup

Contenuto e immagine sono gestiti tramite una griglia a base 12 col; i due blocchi, su viewport superiore a tablet, sono disposti tramite span sulle rispettive colonne.

Varianti

Vengono mostrate alcune combinazioni e varianti del componente:

  • default: con solo immagine, titolo e categoria - la griglia usata per gestire immagine e contenuto è, sulla viewport più grande, 2/3 per l’immagine e 1/3 per il contenuto testuale
  • with description: mostrato anche un esempio di descrizione
  • text fullwidth: variante senza immagine per gestire casistiche-limite
  • half width image: sulla viewport più grande, l’immagine si dispone su 1/2 e il contenuto su 1/2
  • one third width image: sulla viewport più grande, l’immagine si dispone su 1/3 e il contenuto su 2/3
  • event: esempio con dettagli evento
  • is context banner: esempio con markup di banner di contesto, in questo caso la testata funge da “banner contestuale” per indicare in quale sezione ci troviamo, ma l’heading di primo livello reale della pagina si trova in altra posizione (contenuto della pagina); utilizzato in sezioni con navigazione laterale, in cui ogni pagina ha un titolo che ne esplicita il contenuto ma riporta le informazioni di contesto nel banner. Le altre varianti rappresentano combinazioni degli esempi indicati sopra.

Configurazioni per lo Sviluppo in Nunjucks

Parametri di Configurazione

Il componente accetta i seguenti parametri nel file di configurazione:

  • title: Titolo principale del componente
  • imgPath: Percorso dell’immagine di copertina
  • contentType: Tipo di contenuto (es: “evento”)
  • gridVariant: Variante della griglia (“TwoThirdsOneThird”, “OneHalfOneHalf”, “OneThirdOneTwoThirds”, “textFullwidth”)
  • description: Descrizione opzionale del contenuto
  • update: Informazione di aggiornamento con tag time HTML
  • textOnly: Booleano per visualizzare solo il contenuto testuale, senza immagine di copertina
  • isContextBanner: Booleano per indicare se il componente funge da banner contestuale

Varianti della Griglia

Le configurazioni stampano nel template le classi di gestione span, row e col sui componenti

  • TwoThirdsOneThird: Layout predefinito (2/3 immagine, 1/3 contenuto)
  • OneHalfOneHalf: Layout a metà schermo (1/2 immagine, 1/2 contenuto)
  • OneThirdOneTwoThirds: Layout con immagine più piccola (1/3 immagine, 2/3 contenuto)
  • textFullwidth: Layout senza immagine, contenuto a larghezza piena (il contenuto mantiene comunque una max-with di 52em per garantirne la leggibilità)

Classi CSS Disponibili

  • rtds-page-header-with-cover: Classe principale del componente
  • rtds-page-header-with-cover--text-fullwidth: Modificatore per layout senza immagine
  • rtds-page-header__content: Contenitore del contenuto testuale
  • rtds-page-header__title: Contenitore del titolo
  • rtds-page-header__description: Contenitore della descrizione
  • rtds-page-header__cover: Contenitore dell’immagine di copertina

Accessibilità

WCAG 2.1

Livello AA — criteri pertinenti:

  • 1.1.1 Contenuti non testuali — l’immagine di copertina ha alt="" nel template — verificare se deve essere descrittiva in base al contesto
  • 1.3.1 Informazioni e correlazioni — struttura con <h1> come titolo principale; se isContextBanner: true, il titolo diventa <p> per evitare H1 multipli
  • 2.4.6 Intestazioni ed etichette — il titleContext è visibile come intestazione di secondo livello visiva

Struttura e semantica

  • Il componente è renderizzato come <div class="rtds-page-header-with-cover"> — wrapper presentazionale
  • Il titolo è <h1> nella maggior parte dei casi; diventa <p> se isContextBanner: true
  • Quando titleContext è presente, il titolo ha aria-labelledby="pageHeaderTitleContext pageHeaderTitle" — combinazione di titolo di contesto e titolo principale per gli screen reader
  • L’immagine di copertina ha alt="" nel template — usare una descrizione se l’immagine trasmette informazioni

Attributi ARIA

Attributo Valori Condizione
aria-labelledby sull’heading "pageHeaderTitleContext pageHeaderTitle" quando titleContext è presente — combina contesto e titolo

Screen reader

  • Con titleContext e aria-labelledby, gli screen reader leggono entrambi i valori come nome dell’heading
  • Con isContextBanner: true, l’heading reale della pagina si trova altrove — questa sezione funge da orientamento contestuale

Note di Implementazione

  • Il componente utilizza un sistema di griglia responsive basato su Tailwind CSS
  • L’immagine di copertina mantiene un aspect ratio di 5:2 su mobile e diventa auto su desktop
  • Il contenuto testuale è centrato verticalmente nella sua colonna
  • Il markup è semanticamente corretto, utilizzando h1 per il titolo principale o p quando funge da banner contestuale