Regione Toscana Design System

Page Header With Cover: With Description Half Width Image 

<div class="rtds-page-header-with-cover lg:rtds-grid lg:rtds-grid-cols-12">
    <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-6 lg:rtds-col-end-13 lg:rtds-row-start-1 lg:rtds-row-end-3
    ">
        <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 rtds-text-sm md:rtds-text-base lg:rtds-text-lg rtds-leading-normal">

            <div class="rtds-space-y-2 md:rtds-space-y-6 lg:rtds-space-y-8 xl:rtds-space-y-12">

                <div>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
                </div>

                <div class="*:rtds-text-sm *:md:rtds-text-base *:lg:rtds-text-lg *:rtds-leading-tight">
                    <small>Aggiornato al <time datetime="2025-01-17">17/01/2025</time></small>
                </div>

            </div>

        </div>

    </div>

    <div class="rtds-page-header__cover 
    
    lg:rtds-col-span-6 lg:rtds-col-start-1 lg:rtds-row-start-1 lg:rtds-row-end-3
    
    ">
        <img class="rtds-aspect-video rtds-object-cover rtds-object-center rtds-w-full rtds-h-full" src="/images/cover-image.jpg" alt="">
    </div>

</div>
 
<div class="rtds-page-header-with-cover lg:rtds-grid lg:rtds-grid-cols-12{% if textOnly %} rtds-page-header-with-cover--text-fullwidth{% endif %}{% block classes %}{% if classes %} {{ classes }}{% endif %}{% endblock classes %}">
    <div class="rtds-page-header__content lg:rtds-grid lg:rtds-content-center rtds-space-y-4 lg:rtds-space-y-8
    {% if gridVariant == 'textFullwidth' %} lg:rtds-col-span-12
    {% elseif gridVariant == 'OneHalfOneHalf' %} lg:rtds-col-span-6 lg:rtds-col-end-13 lg:rtds-row-start-1 lg:rtds-row-end-3
    {% elseif gridVariant == 'TwoThirdsOneThird' %} lg:rtds-col-span-5 lg:rtds-col-end-13 lg:rtds-row-start-1 lg:rtds-row-end-3 xl:rtds-col-span-4 xl:rtds-col-end-13
    {% elseif gridVariant == 'OneThirdOneTwoThirds' %} lg:rtds-col-span-8 lg:rtds-col-end-13 lg:rtds-row-start-1 lg:rtds-row-end-3
    {% endif %}">
        <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">
                {% if titleContext %}
                    <span id="pageHeaderTitleContext" class="rtds-heading-4">
                        {{ titleContext|safe }}
                    </span>
                {% endif %}
                <{% if isContextBanner %}p{% else %}h1{% endif %}{% if titleContext %} id="pageHeaderTitle" aria-labelledby="pageHeaderTitleContext pageHeaderTitle"{% endif %} class="rtds-heading-1">
                    {{ title|safe }}
                </{% if isContextBanner %}p{% else %}h1{% endif %}>
            </div>
            {% if contentType %}
            <small class="rtds-text-sm rtds-order-1">
                {% render '@category--icon-left', { contentClasses: 'rtds-lowercase rtds-content-01 rtds-font-medium', text: contentType }, true %}
            </small>
            {% endif %}
        </div>
        {% block description %}
        {% if description or update %}
        <div class="rtds-page-header__description rtds-text-sm md:rtds-text-base lg:rtds-text-lg rtds-leading-normal">
           
            <div class="rtds-space-y-2 md:rtds-space-y-6 lg:rtds-space-y-8 xl:rtds-space-y-12">
                {% if description %}
                <div>
                    <p>{{ description|safe }}</p>
                </div>
                {% endif %}
                {% if update %}
                <div class="*:rtds-text-sm *:md:rtds-text-base *:lg:rtds-text-lg *:rtds-leading-tight">
                    <small>{{ update|safe }}</small>
                </div>
                {% endif %}
            </div>
           
        </div>
        {% endif %}
        {% endblock description %}
    </div> 

    {% if not textOnly %}
    <div class="rtds-page-header__cover 
    {% if gridVariant == 'OneHalfOneHalf' %}
    lg:rtds-col-span-6 lg:rtds-col-start-1 lg:rtds-row-start-1 lg:rtds-row-end-3
    {% elseif gridVariant == 'TwoThirdsOneThird' %}
    lg:rtds-col-span-7 lg:rtds-col-start-1 lg:rtds-row-start-1 lg:rtds-row-end-3 xl:rtds-col-span-8 xl:rtds-col-start-1
    {% elseif gridVariant == 'OneThirdOneTwoThirds' %}
    lg:rtds-col-span-4 lg:rtds-col-start-1 lg:rtds-row-start-1 lg:rtds-row-end-3
    {% endif %}
    ">
        <img class="rtds-aspect-video rtds-object-cover rtds-object-center rtds-w-full rtds-h-full" src="{{ imgPath }}" alt="">
    </div>
    {% endif %}
</div>
 
{
  "title": "Lorem ipsum dolor sit amet consectetur adipisicing elit",
  "imgPath": "/images/cover-image.jpg",
  "contentType": "evento",
  "gridVariant": "OneHalfOneHalf",
  "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.",
  "update": "Aggiornato al <time datetime=\"2025-01-17\">17/01/2025</time>"
}
  • 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

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