Page Header Articolo

Intestazione di pagina per articoli e notizie. Estende @page-header-base aggiungendo data di pubblicazione e chip di categoria nell’area di contenuto aggiuntivo.

Comportamento

Estende @page-header-base tramite il block additionalContent. Mostra data di pubblicazione (tag <time>) e chip categoria (@chip--category) nella riga inferiore del header.

Dipendenze

• @page-header-base — template base del page header
• @chip--category — chip con icona per la categoria

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.

Eredita tutti i parametri di @page-header-base:

• title (stringa, obbligatorio): Titolo della pagina (<h1>)
• description (stringa, opzionale): Testo descrittivo sotto il titolo
• backLink (oggetto, opzionale): Link “Torna indietro” con label, icon, classes
• hasBg (booleano, opzionale): Aggiunge sfondo e padding al header
• breadcrumb.items (array, opzionale): Voci del breadcrumb con label

Parametri specifici articolo

• Data e categoria sono definiti direttamente nel template — in implementazioni reali vanno passati come context o gestiti nel CMS

Accessibilità

WCAG 2.1

Livello AA — criteri pertinenti:

• 1.3.1 Informazioni e correlazioni — struttura semantica con <h1>, <time> per la data e chip categoria
• 2.4.6 Intestazioni ed etichette — il titolo <h1> descrive il contenuto dell’articolo

Struttura e semantica

• Il componente estende @page-header-base — il titolo è un <h1> con struttura ereditata
• La data è marcata con <time datetime="YYYY-MM-DD"> — fornisce un valore machine-readable della data
• Il chip categoria usa <span class="rtds-sr-only">Categoria: </span> — fornisce contesto testuale agli screen reader

Screen reader

• La data viene letta con il formato visivo (es. “16.01.2025”) — il datetime fornisce il valore strutturato
• Il chip categoria viene preceduto da “Categoria: “ nascosto per chiarire il tipo di informazione

Stili CSS

Eredita gli stili di .rtds-page-header. Non aggiunge classi modificatore proprie.

Esempi di utilizzo

<!-- Page header articolo con data e categoria -->
<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">
        <!-- breadcrumb -->
        <div class="rtds-page-header__title">
          <h1 class="rtds-heading-1">Titolo articolo</h1>
        </div>
        <p class="rtds-page-header__description rtds-text-base lg:rtds-text-lg">
          Descrizione dell'articolo...
        </p>
        <!-- additionalContent: data + categoria -->
        <div class="rtds-flex rtds-items-center rtds-flex-wrap rtds-gap-4 rtds-divide-x rtds-divide-gray-01">
          <div><time datetime="2025-01-16">16.01.2025</time></div>
          <div class="rtds-pl-4 rtds-flex rtds-items-center rtds-gap-2 rtds-flex-wrap">
            <span class="rtds-chip rtds-chip--category">
              <svg class="rtds-icon rtds-mr-1"><!-- outline--tag --></svg>
              <span class="rtds-sr-only">Categoria: </span>
              Categoria
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="rtds-page-header rtds-container rtds-space-y-2 rtds-page-header--base">
    
    
    
        <nav class="rtds-breadcrumb" aria-label="Breadcrumb">
  <ol class="rtds-breadcrumb__list">
    
    <li class="rtds-breadcrumb__item">
        <a class="rtds-breadcrumb__link" href="#">
          Home
          
            <svg
  class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-ml-2"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#mini--chevron-right" />
</svg>

          
        </a>
    </li>
    
    <li class="rtds-breadcrumb__item">
        <a class="rtds-breadcrumb__link" href="#">
          Notizie
          
            <svg
  class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-ml-2"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#mini--chevron-right" />
</svg>

          
        </a>
    </li>
    
    <li class="rtds-breadcrumb__item">
        <a class="rtds-breadcrumb__link" href="#"aria-current="page">
          Titolo articolo
          
        </a>
    </li>
    
  </ol>
</nav>

    
    <div class="rtds-page-header__content rtds-grid rtds-gap-5 md:rtds-gap-12">
        
            <div class="rtds-grid rtds-gap-5">
                
                <div class="rtds-page-header__title rtds-space-y-4">
            
                    <h1 class="rtds-heading-1">
                        
                    

                     
                        Titolo articolo
                        
                    </h1>
                </div>
                
                    <div class="rtds-page-header__description rtds-text-base lg:rtds-text-lg">
                        <p>
                            Testo descrittivo
                        </p>
                    </div>
                
                
                
<div class="rtds-flex rtds-items-center rtds-flex-wrap rtds-gap-4 rtds-divide-x rtds-divide-gray-01">
    <div><time datetime="2025-01-16" class="rtds-text-sm md:rtds-text-base">16.01.2025</time></div>
    <div class="rtds-pl-4 rtds-flex rtds-items-center rtds-gap-2 rtds-flex-wrap"><span class="rtds-chip rtds-chip--category">
        <svg
  class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-mr-1.5"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#outline--tag" />
</svg>

    
            <span class="rtds-sr-only">Categoria: </span>
        
        Categoria</span></div>
</div>

            </div>

            
                
            
        
    </div>
    
</div>