Section header component

Ready

HTML
View
Context
Info
Notes


        
        <div class="rtds-section-header">
    <div class="rtds-flex rtds-items-center rtds-gap-4 md:rtds-gap-6 rtds-content-01">
        <div class="rtds-flex rtds-flex-wrap rtds-items-center rtds-gap-2 md:rtds-gap-4">

            <h2 class="rtds-heading-3 md:rtds-heading-2">Titolo sezione</h2>

            <div class="rtds-vertical-divider rtds-w-4 md:rtds-w-6 lg:rtds-w-8">
                <img class="rtds-w-full rtds-h-auto" src="../../images/vertical-divider.svg" alt="">
            </div>

        </div>

    </div>
</div>


        <div class="rtds-section-header{% block classes %}{% if classes %} {{ classes }}{% endif %}{% endblock classes %}">
    <div class="{{ contentWrapperDisplay }} rtds-items-center rtds-gap-4 md:rtds-gap-6 {{ textColor }}{% if contentWrapperClasses %} {{ contentWrapperClasses }}{% endif %}">
        <div class="{{ contentLeftDisplay }} rtds-flex-wrap rtds-items-center rtds-gap-2 md:rtds-gap-4{% if contentLeftClasses %} {{ contentLeftClasses }}{% endif %}">
            {% if verticalDividerLeft %}
                {% render '@vertical-divider',{ width: "rtds-w-4 md:rtds-w-6 lg:rtds-w-8" }, true %}
            {% endif %}
            <h2 class="rtds-heading-3 md:rtds-heading-2">{{ heading }}</h2>
            {% if verticalDividerRight %}
                {% render '@vertical-divider',{ width: "rtds-w-4 md:rtds-w-6 lg:rtds-w-8" }, true %}
            {% endif %}
            {% if sectionHeaderSecondaryContent %}
                {{ sectionHeaderSecondaryContent | safe }}
            {% endif %}
            {% if sectionHeaderCta %}
                <span class="rtds-text-sm rtds-leading-none">
                    {% if sectionHeaderCtaAuxiliaryText %}
                        {{ sectionHeaderCtaAuxiliaryText | safe }}
                    {% endif %}
                    {% render '@action-link--sm',{ label: sectionHeaderCta, hasIcon: 'true', classes: sectionHeaderCtaClasses },true %}
                </span>
            {% endif %}
        </div>

        {% block sectionHeaderRightContent %}
            {% if sectionHeaderRightContent or sectionHeaderRightCta %}
            <span class="rtds-section-header__right-content md:rtds-ml-auto">
                {% if sectionHeaderRightContent %}
                    {{ sectionHeaderRightContent | safe }}
                {% endif %}

                {% if sectionHeaderRightCta %}
                    {% for rightCta in sectionHeaderRightCta %}
                        {% render "@button" + rightCta.variant, rightCta, true %}
                    {% endfor %}
                {% endif %}
            </span>
            {% endif %}
        {% endblock %}
    </div>
</div>


        
            
            {
  "heading": "Titolo sezione",
  "textColor": "rtds-content-01",
  "contentWrapperDisplay": "rtds-flex",
  "contentLeftDisplay": "rtds-flex"
}

Handle: @section-header
Variants (6): Default , Divider Left , Has Cta , Has Cta Right , Con testo descrittivo , Notizie Toscana Notizie
Preview:
- With layout
- Component only
Filesystem Path: components/04-organisms/sections/section-header.njk/section-header.njk
References (3): @vertical-divider, @action-link--sm, @button
Referenced by (34): @gallery, @gallery--aspect-video, @padding-sezioni, @padding-sezioni--large, @in-evidenza, @links, @section-header--_notizie-toscana-notizie, @aggiornamenti, @aggiornamenti--grid-2, @approfondimenti, @approfondimenti--cta, @approfondimenti--tema, @bandi, @campagne, @card-banner-links, @card-banner-links--grid-2, @eventi, @eventi--con-campagne, @guide, @meteo-toscana, @servizi--grid, @audio-gallery, @links--column, @section-title-link-text, @section-title-link-text--action-link, @video-gallery, @servizio, @servizio--online, @giunta-regionale, @dettaglio-persona, @dettaglio-persona--presidente, @siti-web-collegati, @siti-web-collegati--column, @notizie

Section Header

Intestazione riutilizzabile per le sezioni di pagina. Compone un titolo <h2> con separatori verticali opzionali, contenuto secondario e link/bottoni di azione posizionabili a sinistra o a destra dell’heading.

Comportamento

Il componente è sempre renderizzato come:

<div class="rtds-section-header"> — contenitore radice della sezione; non è interattivo e non naviga

Al suo interno contiene un <h2> come titolo principale della sezione, affiancato opzionalmente da divisori verticali, contenuto aggiuntivo e CTA.

Varianti

Varianti di Struttura

default: heading con divisore verticale a destra
divider-left: divisore verticale a sinistra dell’heading
has-cta: heading con divisore a destra e action link come CTA
has-cta-right: heading con bottone posizionato nell’area destra
notizie-toscana-notizie: layout a griglia su mobile, flex su desktop (per portali Toscana Notizie)

Parametri di configurazione

Contesto di sviluppo Fractal/Nunjucks — parametri del context .config.yml usati durante lo sviluppo nella libreria.

Parametri Base

heading (stringa, obbligatorio): Testo del titolo della sezione, renderizzato come <h2>
textColor (stringa, opzionale, default: rtds-content-01): Classe Tailwind per il colore del testo applicata al wrapper principale
contentWrapperDisplay (stringa, opzionale, default: rtds-flex): Classe di layout per il wrapper principale (es. rtds-flex, rtds-grid md:rtds-flex)
contentWrapperClasses (stringa, opzionale): Classi aggiuntive per il wrapper principale
contentLeftDisplay (stringa, opzionale, default: rtds-flex): Classe di layout per l’area sinistra (es. rtds-flex, rtds-order-2 md:rtds-order-none)
contentLeftClasses (stringa, opzionale): Classi aggiuntive per il contenitore sinistro

Parametri per Divisori

verticalDividerLeft (booleano, opzionale): Se true, mostra un divisore verticale prima dell’heading
verticalDividerRight (booleano, opzionale): Se true, mostra un divisore verticale dopo l’heading

Parametri per Contenuto Aggiuntivo

sectionHeaderSecondaryContent (stringa HTML, opzionale): Contenuto HTML aggiuntivo renderizzato dopo l’heading (usato con | safe)
sectionHeaderCta (stringa, opzionale): Testo del link CTA resa come @action-link--sm
sectionHeaderCtaAuxiliaryText (stringa HTML, opzionale): Testo ausiliario preposto al CTA (usato con | safe)
sectionHeaderCtaClasses (stringa, opzionale): Classi aggiuntive per il link CTA
sectionHeaderRightContent (stringa HTML, opzionale): Contenuto HTML nell’area destra (usato con | safe)
sectionHeaderRightCta (array di oggetti, opzionale): Lista di bottoni nell’area destra; ogni oggetto accetta label, href, classes, variant

Accessibilità

WCAG 2.1

Livello AA — criteri pertinenti:

1.3.1 Informazioni e correlazioni — <h2> garantisce la gerarchia heading nella struttura della pagina
2.4.6 Intestazioni ed etichette — il testo del titolo deve essere descrittivo del contenuto della sezione

Struttura e semantica

<div class="rtds-section-header"> — contenitore presentazionale; nessun ruolo semantico; non è un landmark
<h2> — heading di secondo livello; identifica l’inizio della sezione per screen reader e navigazione per heading (H); il testo deve descrivere la sezione
<span class="rtds-section-header__right-content"> — contenitore presentazionale per contenuto e bottoni nell’area destra; nessun ruolo semantico

Nota: il componente non è un landmark region. Se viene inserito all’interno di una <section>, si consiglia di aggiungere aria-labelledby sull’elemento <section> puntando all’id dell’<h2> interno, per rendere la sezione navigabile dagli screen reader.

Attributi ARIA

Il componente non introduce attributi ARIA propri. Gli attributi ARIA degli elementi figli interattivi (action link, bottoni) sono gestiti dai rispettivi componenti.

Stili CSS

Classi Base

.rtds-section-header: Contenitore radice del componente

Classi Elementi (BEM)

.rtds-section-header__right-content: Area destra del componente; posizionata con md:rtds-ml-auto per spingerla a fine riga su schermi medi e grandi

Esempi di utilizzo

<!-- Esempio base con divisore a destra -->
<div class="rtds-section-header">
  <div class="rtds-flex rtds-items-center rtds-gap-4 md:rtds-gap-6 rtds-content-01">
    <div class="rtds-flex rtds-flex-wrap rtds-items-center rtds-gap-2 md:rtds-gap-4">
      <h2 class="rtds-heading-3 md:rtds-heading-2">Titolo sezione</h2>
      <!-- divisore verticale -->
    </div>
  </div>
</div>

<!-- Esempio con CTA e divisore a destra -->
<div class="rtds-section-header">
  <div class="rtds-flex rtds-items-center rtds-gap-4 md:rtds-gap-6 rtds-content-01">
    <div class="rtds-flex rtds-flex-wrap rtds-items-center rtds-gap-2 md:rtds-gap-4">
      <h2 class="rtds-heading-3 md:rtds-heading-2">Notizie</h2>
      <!-- divisore verticale -->
      <span class="rtds-text-sm rtds-leading-none">
        <!-- action-link--sm: "Tutte le notizie" -->
      </span>
    </div>
  </div>
</div>

<!-- Esempio con bottone a destra -->
<div class="rtds-section-header">
  <div class="rtds-flex rtds-items-center rtds-gap-4 md:rtds-gap-6 rtds-content-01">
    <div class="rtds-flex rtds-flex-wrap rtds-items-center rtds-gap-2 md:rtds-gap-4">
      <h2 class="rtds-heading-3 md:rtds-heading-2">Servizi</h2>
    </div>
    <span class="rtds-section-header__right-content md:rtds-ml-auto">
      <button class="rtds-btn rtds-btn--secondary rtds-btn--s">Vedi tutti</button>
    </span>
  </div>
</div>

Note

Il componente estende se stesso tramite Nunjucks {% extends '@section-header' %} e il blocco sectionHeaderRightContent per varianti con contenuto destro personalizzato (es. logo Toscana Notizie)
I divisori verticali sono renderizzati tramite il componente @vertical-divider con larghezza responsive (rtds-w-4 md:rtds-w-6 lg:rtds-w-8)
I link CTA sono renderizzati tramite @action-link--sm; i bottoni CTA a destra tramite @button con variante configurabile
Per varianti con layout a griglia su mobile (es. notizie-toscana-notizie), usare contentWrapperDisplay: rtds-grid md:rtds-flex e contentLeftClasses: rtds-order-2 md:rtds-order-none