Page Header Corso

Intestazione di pagina per corsi e percorsi formativi. Estende @page-header-base con layout a 2 colonne: colonna sinistra per titolo e descrizione; colonna destra per requisiti di accesso (età, titolo di studio).

Comportamento

Estende @page-header-base con classe modificatrice rtds-page-header--corso. Usa il block rightContent per mostrare i requisiti del corso in una <dl> con divisore verticale su desktop e orizzontale su mobile.

Dipendenze

• @page-header-base — template base del page header

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 del corso o percorso
• description (stringa, opzionale): Descrizione del corso
• hasBg (booleano, opzionale): Sfondo con padding e angoli arrotondati
• backLink (oggetto, opzionale): Link di ritorno con label, icon, classes
• isContextBanner (booleano, opzionale): Aggiunge stile banner contestuale

Parametri di layout

• contentGridTemplateColumns (stringa, opzionale): Classi griglia (es. rtds-grid-cols-1 md:rtds-grid-cols-12)
• contentLeftColumnSpan (stringa, opzionale): Span colonna sinistra (es. md:rtds-col-span-5 lg:rtds-col-span-4)
• contentRightColumnSpan (stringa, opzionale): Span colonna destra (es. md:rtds-col-span-7 lg:rtds-col-span-8)

Parametri specifici corso

I requisiti (età, titolo di studio, ecc.) sono definiti direttamente nel template rightContent. In implementazioni reali vanno passati come context.

Accessibilità

WCAG 2.1

Livello AA — criteri pertinenti:

• 1.3.1 Informazioni e correlazioni — struttura semantica con <h1> e <dl> per i requisiti del corso
• 2.4.6 Intestazioni ed etichette — le etichette <dt> descrivono ciascun requisito; i valori <dd> contengono le informazioni

Struttura e semantica

• Il componente estende @page-header-base — il titolo è un <h1>
• I requisiti del corso sono in una <dl> con <dt> e <dd> su una riga — struttura semantica corretta per coppie termine/definizione

Screen reader

• La <dl> nella colonna destra è letta come elenco di definizioni: ogni <dt> precede il proprio <dd> inline
• La disposizione inline di <dt> e <dd> è supportata semanticamente dagli screen reader

Stili CSS

• .rtds-page-header--corso: Classe modificatrice aggiunta al contenitore
• Area destra: bordo superiore su mobile (border-t border-gray-03), bordo sinistro su desktop (md:border-l md:pl-5)
• Etichette requisiti: content-02 font-bold uppercase text-sm
• Valori requisiti: text-base md:text-lg

Esempi di utilizzo

<div class="rtds-page-header rtds-container rtds-space-y-2 rtds-page-header--has-bg rtds-page-header--corso">
    
    <div class="rtds-flex">
    <a href="#" class="rtds-text-link rtds-content-03 rtds-text-link--s">
    
            <svg
  class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-flex-shrink-0 rtds-flex-grow-0"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#solid--arrow-left" />
</svg>

        
        Torna indietro
        
    
    
    
    
</a>
</div>
    
    
    
    <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-5 lg:rtds-col-span-4">
                
                <div class="rtds-page-header__title rtds-space-y-4">
            
                    <p class="rtds-heading-1">
                        
                    

                     
                        Percorsi ITS 2024 - 2025
                        
                    </p>
                </div>
                
                    <div class="rtds-page-header__description rtds-text-base lg:rtds-text-lg">
                        <p>
                            L'87% dei diplomati ITS trova lavoro a un anno dal diploma.
                        </p>
                    </div>
                
                
                
                
            </div>

            
<div class="rtds-space-y-4 rtds-border-t rtds-border-gray-03 rtds-pt-4 md:rtds-border-t-0 md:rtds-pt-0 md:rtds-border-l md:rtds-pl-5 md:rtds-col-span-7 lg:rtds-col-span-8">
    <p class="rtds-content-02 rtds-font-bold rtds-uppercase rtds-text-sm">Requisiti</p>
    <dl class="rtds-text-base md:rtds-text-lg rtds-space-y-2 md:rtds-space-y-4 lg:rtds-space-y-6">
        <div>
            <dt class="rtds-content-02 rtds-font-bold rtds-inline">
                Età:
            </dt>
            <dd class="rtds-inline">
                18-34 anni (non compiuti al momento della domanda di iscrizione).
            </dd>
        </div>
        <div>
            <dt class="rtds-content-02 rtds-font-bold rtds-inline">
                Titolo di studio:
            </dt>
            <dd class="rtds-inline">
                 diploma di scuola secondaria superiore oppure percorso quadriennale di IeFP con successivo anno di IFTS
            </dd>
        </div>
    </dl>
</div>

        
    </div>
    
</div>