Page Header Base

Template base per l’intestazione di pagina. Fornisce la struttura condivisa da tutte le varianti di page header: wrapper con classi, back link o breadcrumb opzionale, blocco contenuto con titolo (<h1> o <p>), descrizione opzionale, e area CTA opzionale. Gli altri componenti page header (es. @page-header-servizio) estendono questo template tramite Nunjucks template inheritance.

Comportamento

Il componente è renderizzato come <div class="rtds-page-header rtds-container">.

• Il titolo viene renderizzato come <h1> per impostazione predefinita.
• Se isContextBanner: true, il titolo viene renderizzato come <p class="rtds-heading-1"> — da usare quando questo header funge da banner contestuale e l’<h1> reale della pagina si trova altrove.
• Se titleContext è presente, viene reso un <span> con stile ridotto sopra il titolo principale — nella variante aggiornamento include attributi aria-labelledby per associare il contesto al titolo.
• Se hasBg: true, viene aggiunta la classe rtds-page-header--has-bg che applica sfondo gradiente, padding orizzontale e angoli arrotondati.
• Il blocco backLink e il blocco breadcrumb sono mutuamente esclusivi: usare uno o l’altro per l’orientamento dell’utente.

Varianti

Varianti di contenuto

• default: Header base con <h1> e back link.
• has-breadcrumb: Sostituisce il back link con il componente @breadcrumb.
• with-cta: Aggiunge un pulsante CTA nella colonna destra (variante --inverted).
• with-multiple-cta: Aggiunge più pulsanti CTA nella colonna destra (fino a tre, con varianti diverse: --primary, --secondary, --inverted).
• has-description: Aggiunge un paragrafo descrittivo sotto il titolo.
• has-bg: Attiva lo sfondo gradiente con padding e border-radius (hasBg: true).
• has-title-context: Aggiunge un sotto-titolo contestuale sopra l’<h1> principale.
• is-context-banner: Renderizza il titolo come <p> invece di <h1> (per banner contestuali).
• aggiornamento: Variante specifica per aggiornamenti — usa @back-link--piu-aggiornamenti e struttura ARIA con aria-labelledby per collegare titleContext al titolo principale.

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

• title (stringa, obbligatorio): Testo del titolo principale, renderizzato come <h1> (o <p> se isContextBanner: true). Accetta HTML (filtro safe).
• titleContext (stringa, opzionale): Testo contestuale visualizzato sopra il titolo principale con stile ridotto. Accetta HTML (filtro safe).
• description (stringa, opzionale): Testo descrittivo renderizzato sotto il titolo. Accetta HTML (filtro safe).
• hasBg (booleano, opzionale): Se true, applica rtds-page-header--has-bg — sfondo gradiente, padding orizzontale, angoli arrotondati.
• isContextBanner (booleano, opzionale): Se true, il titolo viene renderizzato come <p> invece di <h1>.
• padding (stringa, opzionale): Classi CSS per il padding del contenitore (aggiuntivo rispetto al default).
• classes (stringa, opzionale): Classi CSS aggiuntive sull’elemento radice.

Parametri layout

• contentGridTemplateColumns (stringa, opzionale): Classi CSS per la griglia interna del contenuto (es. rtds-grid-cols-1 md:rtds-grid-cols-12).
• contentLeftColumnSpan (stringa, opzionale): Classi CSS per il col-span della colonna sinistra (es. md:rtds-col-span-9).
• contentLeftMaxWidth (stringa, opzionale): Classi CSS per la larghezza massima del blocco sinistro.
• contentRightColumnSpan (stringa, opzionale): Classi CSS per il col-span della colonna destra (es. md:rtds-col-span-3).

Parametri navigazione

• backLink (oggetto, opzionale): Configurazione del back link. Passato al componente @back-link. Chiavi:
  • label (stringa, obbligatorio): Testo del link (es. "Torna a: Nome Tema").
  • icon (stringa, opzionale): ID icona SVG (es. solid--arrow-left).
  • classes (stringa, opzionale): Classi CSS aggiuntive (es. rtds-content-03).
• breadcrumb (oggetto, opzionale): Configurazione del breadcrumb. Passato al componente @breadcrumb. Struttura:
  • items (array): Lista di voci breadcrumb, ciascuna con label (stringa) e href opzionale.

Parametri CTA

• cta (array, opzionale): Lista di pulsanti CTA da renderizzare nella colonna destra. Ogni elemento viene passato a @button + il valore di variant. Chiavi:
  • variant (stringa, obbligatorio): Suffisso della variante pulsante (es. --primary, --secondary, --inverted).
  • label (stringa, obbligatorio): Testo del pulsante.
  • href (stringa, opzionale): URL — se presente, il pulsante è renderizzato come <a>.
  • classes (stringa, opzionale): Classi CSS aggiuntive (es. rtds-btn--s).

Accessibilità

WCAG 2.1

Livello AA — criteri pertinenti:

• 1.3.1 Informazioni e correlazioni — struttura semantica con <h1> come titolo principale; isContextBanner usa <p> quando l’H1 reale è altrove
• 2.4.4 Scopo del collegamento (nel contesto) — il back link e i CTA devono avere testo descrittivo
• 2.4.8 Posizione — il breadcrumb aiuta gli utenti a orientarsi nella struttura del sito
• 4.1.2 Nome, Ruolo, Valore — nella variante aggiornamento, aria-labelledby associa titleContext e title per un nome accessibile completo

Struttura e semantica

• <div class="rtds-page-header"> — wrapper presentazionale; non introduce landmark; non impatta la navigazione degli screen reader
• <h1> (default) — titolo principale della pagina; deve comparire una sola volta per pagina; i componenti che estendono @page-header-base ereditano questo comportamento
• <p class="rtds-heading-1"> — quando isContextBanner: true; presenta stile di heading senza ruolo semantico di heading; usare esclusivamente quando l’<h1> reale della pagina si trova in un altro componente
• <span class="rtds-heading-5 ..."> (con titleContext) — sotto-titolo reso come <span> interno all’<h1>; letto come parte del titolo dagli screen reader nella variante base
• <span id="pageHeaderTitleContext"> e <h1 aria-labelledby="pageHeaderTitleContext pageHeaderTitle"> — nella variante aggiornamento; collega semanticamente il contesto al titolo per un annuncio completo
• <nav> del breadcrumb — landmark navigation; delegato al componente @breadcrumb

Attributi ARIA

Screen reader

• Il titleContext nella variante base è reso come <span> interno all’<h1>: gli screen reader leggono l’intero <h1> come un’unica stringa che include il contesto
• Nella variante aggiornamento, aria-labelledby aggrega il testo di pageHeaderTitleContext e pageHeaderTitle — il nome accessibile dell’heading include entrambi
• Usare isContextBanner: true solo quando l’<h1> reale della pagina è posizionato altrove, per evitare heading H1 multipli che confondono gli screen reader
• Il back link è delegato a @back-link (o @back-link--piu-aggiornamenti nella variante aggiornamento) — gestisce la propria accessibilità internamente

Stili CSS

Gli stili sono definiti in components/04-organisms/page-headers/page-headers.css.

Classi Base

• .rtds-page-header: Padding verticale adattivo — py-4 su mobile, py-6 su tablet, py-8 su desktop

Classi Modificatori

• .rtds-page-header--has-bg: Aggiunge padding orizzontale adattivo, border-radius (rtds-rounded-md) e sfondo gradiente (rtds-bg-gradient-04). Attivato da hasBg: true.
• .rtds-page-header--base: Classe identificativa della variante base; applicata automaticamente dal blocco classes del template.

Classi Elementi (BEM)

• .rtds-page-header__content: Wrapper della griglia interna del contenuto (titolo, descrizione, CTA)
• .rtds-page-header__title: Wrapper del blocco titolo (heading + titleContext)
• .rtds-page-header__description: Wrapper del paragrafo descrittivo

Esempi di utilizzo

<!-- Variante base con back link -->
<div class="rtds-page-header rtds-container rtds-space-y-2 rtds-page-header--base">
  <!-- @back-link -->
  <div class="rtds-page-header__content rtds-grid rtds-gap-5 md:rtds-gap-12 rtds-grid-cols-1 md:rtds-grid-cols-12">
    <div class="rtds-grid rtds-gap-5 md:rtds-col-span-9">
      <div class="rtds-page-header__title rtds-space-y-4">
        <h1 class="rtds-heading-1">Titolo pagina</h1>
      </div>
    </div>
  </div>
</div>

<!-- Variante con sfondo gradiente e descrizione -->
<div class="rtds-page-header rtds-container rtds-space-y-2 rtds-page-header--has-bg rtds-page-header--base">
  <div class="rtds-page-header__content rtds-grid rtds-gap-5 md:rtds-gap-12 rtds-grid-cols-1 md:rtds-grid-cols-12">
    <div class="rtds-grid rtds-gap-5 md:rtds-col-span-9">
      <div class="rtds-page-header__title rtds-space-y-4">
        <h1 class="rtds-heading-1">Titolo pagina</h1>
      </div>
      <div class="rtds-page-header__description rtds-text-base lg:rtds-text-lg">
        <p>Descrizione della pagina.</p>
      </div>
    </div>
  </div>
</div>

<!-- Variante con CTA nella colonna destra -->
<!-- Nel config.yml passare:
     cta:
       - variant: "--inverted"
         label: "Visualizza l'archivio"
         classes: "rtds-btn--s"
-->

<!-- Variante context banner (titolo come <p>, non <h1>) -->
<!-- Nel config.yml passare:
     isContextBanner: true
     hasBg: true
     title: "Testo del banner contestuale"
-->

Note

• Questo componente è il template base esteso da @page-header-servizio e da altri page header specializzati. Non va modificato senza verificare l’impatto su tutti i componenti che lo estendono.
• I blocchi Nunjucks sovrascrivibili dai template figli sono: classes, contentWrapper, contentWrapperClasses, content, additionalContent, rightContent.
• La variante aggiornamento usa il file page-header-base--aggiornamento.njk che include @back-link--piu-aggiornamenti al posto di @back-link e struttura diversa per titleContext (con id e aria-labelledby).
• Dipende da: @back-link, @back-link--piu-aggiornamenti (variante aggiornamento), @breadcrumb, @button (varianti CTA).
• Richiede lo sprite SVG caricato in pagina per le icone usate da back link e breadcrumb.