Page Header Bando

Intestazione di pagina per bandi e avvisi pubblici. Estende @page-header-base con layout a 2 colonne: colonna sinistra per titolo, date e descrizione; colonna destra per stato del bando, categorie destinatari e tipologia.

Comportamento

Estende @page-header-base con classe modificatrice rtds-page-header--bando. Usa il block additionalContent per le date BURT e il block rightContent per le informazioni sintetiche (stato, destinatari, tipologia) in una <dl> allineata a destra.

Varianti

• default: Bando in stato “aperto”
• closed: Bando in stato “chiuso”
• in-corso: Bando in stato “in corso”

Dipendenze

• @page-header-base — template base del page header
• @chip--status-* — chip di stato (aperto/chiuso/in-corso)
• @chip--category — chip categoria per i destinatari
• @vertical-divider — divisore verticale tra date su desktop

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 bando
• description (stringa, opzionale): Descrizione sintetica del bando
• hasBg (booleano, opzionale): Sfondo con padding e angoli arrotondati
• backLink (oggetto, opzionale): Link di ritorno con label, icon, classes

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-8)
• contentRightColumnSpan (stringa, opzionale): Span colonna destra (es. md:rtds-col-span-4)

Parametri specifici bando

• status (stringa, obbligatorio): Stato del bando — aperto, chiuso, in-corso — determina quale chip stato viene renderizzato

Accessibilità

WCAG 2.1

Livello AA — criteri pertinenti:

• 1.3.1 Informazioni e correlazioni — struttura semantica con <h1>, <dl> per le informazioni sintetiche e <time> per le date
• 2.4.6 Intestazioni ed etichette — il titolo <h1> descrive il bando; le etichette <dt> descrivono ciascuna informazione

Struttura e semantica

• Il componente estende @page-header-base — il titolo è un <h1>
• Le informazioni sintetiche (stato, destinatari, tipologia) sono in una <dl> con <dt> e <dd> — struttura semantica corretta per coppie termine/definizione
• Le date sono marcate con <time datetime="YYYY-MM-DD"> — fornisce valore machine-readable

Screen reader

• La <dl> nella colonna destra è letta come elenco di definizioni: ogni <dt> precede il proprio <dd>
• I chip stato e categoria hanno label accessibili proprie tramite i rispettivi componenti

Stili CSS

• .rtds-page-header--bando: Classe modificatrice aggiunta al contenitore
• Area sinistra aggiuntiva: bordo superiore border-gray-01, padding pt-5, spaziatura verticale
• Area destra: <dl> allineata a destra con testo ridotto (text-sm) per le etichette

Esempi di utilizzo

<div class="rtds-page-header rtds-container rtds-space-y-2 rtds-page-header--has-bg rtds-page-header--bando">
    
    <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-8">
                
                <div class="rtds-page-header__title rtds-space-y-4">
            
                    <h1 class="rtds-heading-1">
                        
                    

                     
                        Titolo del bando
                        
                    </h1>
                </div>
                
                    <div class="rtds-page-header__description rtds-text-base lg:rtds-text-lg">
                        <p>
                            Descrizione sintetica del bando...
                        </p>
                    </div>
                
                
                
<div class="rtds-space-y-2 lg:rtds-space-y-4 rtds-border-t rtds-border-gray-01 rtds-pt-5">
    <div class="rtds-grid rtds-gap-0.5 lg:rtds-gap-2 rtds-text-base md:rtds-text-lg lg:rtds-flex lg:rtds-flex-wrap lg:rtds-items-center">
        <p>Data di pubblicazione bando su Burt: <strong><time datetime="2025-01-16">16.01.2025</time></strong></p>
        <div class="rtds-vertical-divider rtds-w-5 rtds-hidden lg:rtds-block">
    <img class="rtds-w-full rtds-h-auto" src="../../images/vertical-divider.svg" alt="">
</div>

        <p>Numero e parte del Burt: 20</p>
    </div>
    <div>
        <p class="rtds-text-sm">Data di presentazione domande: <strong><time datetime="2025-01-16">16.01.2025</time></strong></p>
    </div>
</div>

            </div>

            
<div class=" md:rtds-col-span-4">
    <dl class="rtds-grid rtds-gap-5 lg:rtds-gap-6 md:rtds-justify-end md:rtds-text-right">
        <div class="rtds-space-y-2">
            <dt class="rtds-text-sm">
                Stato:
            </dt>
            <dd>
                <span class="rtds-chip rtds-chip--status is-open">
            <span class="rtds-sr-only">Stato: </span>
        
        Aperto</span>
            </dd>
        </div>
        <div class="rtds-space-y-2">
            <dt class="rtds-text-sm">
                Chi può fare domanda:
            </dt>
            <dd>
                <div class="rtds-flex rtds-gap-2 rtds-flex-wrap md:rtds-justify-end">
                    <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--building-storefront" />
</svg>

    
        Imprese</span>
                </div>
            </dd>
        </div>
        <div class="rtds-space-y-2">
            <dt class="rtds-text-sm">
                Tipologia:
            </dt>
            <dd>
               <strong>Manifestazioni di interesse</strong>
            </dd>
        </div>
    </dl>
</div>

        
    </div>
    
</div>

<div class="rtds-page-header rtds-container rtds-space-y-2 rtds-page-header--has-bg rtds-page-header--bando">
    
    <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-8">
                
                <div class="rtds-page-header__title rtds-space-y-4">
            
                    <h1 class="rtds-heading-1">
                        
                    

                     
                        Progetti per la realizzazione di impianti di produzione di energia termica ed elettrica da fonti rinnovabili per gli immobili pubblici
                        
                    </h1>
                </div>
                
                    <div class="rtds-page-header__description rtds-text-base lg:rtds-text-lg">
                        <p>
                            Aperto dal 5 giugno al 16 settembre, è rivolto a progetti per la realizzazione di impianti di produzione di energia termica ed elettrica da fonti rinnovabili
                        </p>
                    </div>
                
                
                
<div class="rtds-space-y-2 lg:rtds-space-y-4 rtds-border-t rtds-border-gray-01 rtds-pt-5">
    <div class="rtds-grid rtds-gap-0.5 lg:rtds-gap-2 rtds-text-base md:rtds-text-lg lg:rtds-flex lg:rtds-flex-wrap lg:rtds-items-center">
        <p>Data di pubblicazione bando su Burt: <strong><time datetime="2025-01-16">16.01.2025</time></strong></p>
        <div class="rtds-vertical-divider rtds-w-5 rtds-hidden lg:rtds-block">
    <img class="rtds-w-full rtds-h-auto" src="../../images/vertical-divider.svg" alt="">
</div>

        <p>Numero e parte del Burt: 20</p>
    </div>
    <div>
        <p class="rtds-text-sm">Data di presentazione domande: <strong><time datetime="2025-01-16">16.01.2025</time></strong></p>
    </div>
</div>

            </div>

            
<div class=" md:rtds-col-span-4">
    <dl class="rtds-grid rtds-gap-5 lg:rtds-gap-6 md:rtds-justify-end md:rtds-text-right">
        <div class="rtds-space-y-2">
            <dt class="rtds-text-sm">
                Stato:
            </dt>
            <dd>
                <span class="rtds-chip rtds-chip--status is-closed">
            <span class="rtds-sr-only">Stato: </span>
        
        Chiuso</span>
            </dd>
        </div>
        <div class="rtds-space-y-2">
            <dt class="rtds-text-sm">
                Chi può fare domanda:
            </dt>
            <dd>
                <div class="rtds-flex rtds-gap-2 rtds-flex-wrap md:rtds-justify-end">
                    <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--building-storefront" />
</svg>

    
        Imprese</span>
                </div>
            </dd>
        </div>
        <div class="rtds-space-y-2">
            <dt class="rtds-text-sm">
                Tipologia:
            </dt>
            <dd>
               <strong>Manifestazioni di interesse</strong>
            </dd>
        </div>
    </dl>
</div>

        
    </div>
    
</div>





<div class="rtds-page-header rtds-container rtds-space-y-2 rtds-page-header--has-bg rtds-page-header--bando">
    
    <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-8">
                
                <div class="rtds-page-header__title rtds-space-y-4">
            
                    <h1 class="rtds-heading-1">
                        
                    

                     
                        Progetti per la realizzazione di impianti di produzione di energia termica ed elettrica da fonti rinnovabili per gli immobili pubblici
                        
                    </h1>
                </div>
                
                    <div class="rtds-page-header__description rtds-text-base lg:rtds-text-lg">
                        <p>
                            Aperto dal 5 giugno al 16 settembre, è rivolto a progetti per la realizzazione di impianti di produzione di energia termica ed elettrica da fonti rinnovabili
                        </p>
                    </div>
                
                
                
<div class="rtds-space-y-2 lg:rtds-space-y-4 rtds-border-t rtds-border-gray-01 rtds-pt-5">
    <div class="rtds-grid rtds-gap-0.5 lg:rtds-gap-2 rtds-text-base md:rtds-text-lg lg:rtds-flex lg:rtds-flex-wrap lg:rtds-items-center">
        <p>Data di pubblicazione bando su Burt: <strong><time datetime="2025-01-16">16.01.2025</time></strong></p>
        <div class="rtds-vertical-divider rtds-w-5 rtds-hidden lg:rtds-block">
    <img class="rtds-w-full rtds-h-auto" src="../../images/vertical-divider.svg" alt="">
</div>

        <p>Numero e parte del Burt: 20</p>
    </div>
    <div>
        <p class="rtds-text-sm">Data di presentazione domande: <strong><time datetime="2025-01-16">16.01.2025</time></strong></p>
    </div>
</div>

            </div>

            
<div class=" md:rtds-col-span-4">
    <dl class="rtds-grid rtds-gap-5 lg:rtds-gap-6 md:rtds-justify-end md:rtds-text-right">
        <div class="rtds-space-y-2">
            <dt class="rtds-text-sm">
                Stato:
            </dt>
            <dd>
                <span class="rtds-chip rtds-chip--status is-in-progress">
            <span class="rtds-sr-only">Stato: </span>
        
        In corso</span>
            </dd>
        </div>
        <div class="rtds-space-y-2">
            <dt class="rtds-text-sm">
                Chi può fare domanda:
            </dt>
            <dd>
                <div class="rtds-flex rtds-gap-2 rtds-flex-wrap md:rtds-justify-end">
                    <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--building-storefront" />
</svg>

    
        Imprese</span>
                </div>
            </dd>
        </div>
        <div class="rtds-space-y-2">
            <dt class="rtds-text-sm">
                Tipologia:
            </dt>
            <dd>
               <strong>Manifestazioni di interesse</strong>
            </dd>
        </div>
    </dl>
</div>

        
    </div>
    
</div>