Regione Toscana Design System — Servizi Design System Core

Page Header Tema 

<div class="rtds-page-header rtds-background-02 rtds-space-y-2 rtds-page-header--base">
    <div class="rtds-container">

        <div class="rtds-page-header__content rtds-flex rtds-gap-5 rtds-items-center">

            <div class="rtds-grid rtds-gap-5">

                <div class="rtds-page-header__title">

                    <h1 class="rtds-heading-1 rtds-space-y-4">

                        Sociale
                    </h1>
                </div>

            </div>

        </div>

    </div>
</div>
 
<div class="rtds-page-header rtds-background-02 rtds-space-y-2{% if padding %} {{ padding }}{% endif %}{% if hasBg %} rtds-page-header--has-bg{% endif %}{% block classes %} rtds-page-header--base{% if classes %} {{ classes }}{% endif %}{% endblock classes %}">
   <div class="rtds-container">
        {% block contentWrapper %}
        <div class="rtds-page-header__content rtds-flex rtds-gap-5 rtds-items-center">
            {% block content %}
                <div class="rtds-grid rtds-gap-5">
                    
                    <div class="rtds-page-header__title">
            
                        <h1 class="rtds-heading-1 rtds-space-y-4">
                        {% if titleContext %}
                            <span id="pageHeaderTitleContext" class="rtds-block rtds-heading-4">
                                {{ titleContext|safe }}
                            </span>
                        {% endif %}
                            {{ title|safe }}
                        </h1>
                    </div>
                    {% if description %}
                        <div class="rtds-page-header__description rtds-text-base lg:rtds-text-lg">
                            <p>
                                {{ description|safe }}
                            </p>
                        </div>
                    {% endif %}
                    
                    {% block additionalContent %}
                    {% endblock additionalContent %}
                </div>

            {% endblock content %}
        </div>
        {% endblock contentWrapper %}
    </div>
</div>
 
{
  "title": "Sociale",
  "logo": {
    "path": "/images/icona-tema-sociale.svg",
    "width": "118",
    "height": "24",
    "classes": "rtds-max-w-16 md:rtds-max-w-32 lg:rtds-max-w-40"
  }
}

Page Header Tema

Intestazione di pagina per le pagine tematiche (es. “Sociale”, “Ambiente”, “Lavoro”). Mostra un titolo accompagnato da un logo/icona del tema.

Comportamento

Variante del page header con layout semplificato: titolo <h1> e immagine/logo del tema. Il logo viene passato come oggetto con percorso e dimensioni.

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

  • title (stringa, obbligatorio): Nome del tema (es. “Sociale”, “Ambiente”)
  • logo.path (stringa, obbligatorio): Percorso del file SVG o immagine del logo del tema
  • logo.width (stringa, opzionale): Larghezza nativa dell’immagine (attributo HTML width)
  • logo.height (stringa, opzionale): Altezza nativa dell’immagine (attributo HTML height)
  • logo.classes (stringa, opzionale): Classi CSS per dimensionare il logo responsivamente (es. rtds-max-w-16 md:rtds-max-w-32 lg:rtds-max-w-40)

Accessibilità

WCAG 2.1

Livello AA — criteri pertinenti:

  • 1.1.1 Contenuti non testuali — il logo del tema deve avere alt appropriato; se il titolo H1 descrive già il tema, alt="" è corretto per evitare ridondanza
  • 1.3.1 Informazioni e correlazioni — struttura semantica con <h1> come titolo principale della pagina tematica

Struttura e semantica

  • Il componente è renderizzato come <div class="rtds-page-header"> — variante del page-header-tema con layout rtds-flex
  • Il titolo del tema è un <h1> — heading principale della pagina
  • Il logo/icona del tema è un <img> con alt dipendente dal contesto

Screen reader

  • Se il nome del tema è già visibile nell’<h1>, il logo può avere alt="" per non ripetere l’informazione
  • Se il logo trasmette informazioni aggiuntive non presenti nel testo, fornire alt descrittivo

Esempi di utilizzo


<div class="rtds-page-header rtds-background-02 rtds-space-y-2 rtds-page-header--base">
   <div class="rtds-container">
        
        <div class="rtds-page-header__content rtds-flex rtds-gap-5 rtds-items-center">
            
                <div class="rtds-grid rtds-gap-5">
                    
                    <div class="rtds-page-header__title">
            
                        <h1 class="rtds-heading-1 rtds-space-y-4">
                        
                            Sociale
                        </h1>
                    </div>
                    
                    
                    
                    
                </div>

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


<!-- HTML equivalente -->
<div class="rtds-page-header rtds-background-02 rtds-space-y-2">
  <div class="rtds-container">
    <div class="rtds-page-header__content rtds-flex rtds-gap-5 rtds-items-center">
      <div class="rtds-grid rtds-gap-5">
        <img
          src="/images/icona-tema-sociale.svg"
          width="118"
          height="24"
          alt=""
          class="rtds-max-w-16 md:rtds-max-w-32 lg:rtds-max-w-40"
        >
        <h1 class="rtds-heading-1">Sociale</h1>
      </div>
    </div>
  </div>
</div>