Componente Hero

Sezione introduttiva di pagina (above-the-fold) con titolo, descrizione, barra di ricerca, bottoni, immagine laterale e blocco di contenuto aggiuntivo. Disponibile in quattro varianti di sfondo e due allineamenti del contenuto.

Comportamento e Funzionalità

Il componente Hero è progettato per la prima sezione visibile di una pagina con:

• Quattro varianti di sfondo: gradiente, chiaro, scuro e immagine di sfondo
• Due allineamenti del contenuto: centrato e sinistra (con immagine laterale opzionale su desktop)
• Barra di ricerca con autocomplete integrata e configurabile
• Gruppo di bottoni configurabile
• Blocco di contenuto aggiuntivo per loghi, KPI o testo supplementare
• Layout responsive: singola colonna su mobile, due colonne su desktop quando è presente un’immagine laterale

Accessibilità

WCAG 2.1

Livello AA — criteri pertinenti:

• 1.3.1 Informazioni e correlazioni — struttura semantica con <section>, <h1> unico per pagina, <figure> per l’immagine
• 1.1.1 Contenuti non testuali — image.alt sempre presente sull’immagine laterale; stringa vuota se decorativa
• 1.4.3 Contrasto — verificare il contrasto del testo nelle varianti scure e con immagine di sfondo

Struttura e semantica

• Il componente è renderizzato come <section class="rtds-hero"> — landmark di pagina
• Il titolo <h1> deve essere unico nella pagina — non usare il componente Hero più di una volta per pagina con un titolo H1
• L’overlay decorativo della variante image-bg ha aria-hidden="true" — escluso dagli screen reader
• L’immagine laterale è racchiusa in <figure> — markup semanticamente corretto

Attributi ARIA

Screen reader

• Il titolo <h1> è il primo heading della pagina — gli screen reader lo annunciano come intestazione principale
• La barra di ricerca eredita gli attributi ARIA dal componente @search-bar
• L’overlay di sfondo è nascosto agli screen reader tramite aria-hidden="true"

Markup e Struttura

<section class="rtds-hero rtds-hero--{background} [rtds-hero--left] [rtds-hero--has-image] [{classes}]"
         [style="--hero-bg-image: url(...)"]>

    <!-- Solo per variante image-bg -->
    <div class="rtds-hero__overlay" aria-hidden="true"></div>

    <div class="rtds-container rtds-py-16 rtds-grid rtds-gap-y-10">

        <div class="rtds-hero__inner">
            <div class="rtds-hero__content">
                <h1 class="rtds-hero__title">[title]</h1>

                <!-- opzionale -->
                <p class="rtds-hero__description">[description]</p>

                <!-- opzionale -->
                <div class="rtds-hero__search">
                    <div class="rtds-search-bar" data-search-bar data-all-results-href="/search?q=" data-all-results-label="Tutti i risultati">
  <form class="rtds-search-bar__form" role="search" action="/search" method="get">
    <div class="rtds-search-bar__wrapper">
      <label for="searchBarDefault" class="rtds-search-bar__label rtds-sr-only">
        Cerca
      </label>
      
      <div class="rtds-search-bar__input-wrapper">
        <div class="rtds-search-bar__autocomplete" id="searchBarDefaultContainer" data-placeholder="Search"></div>
        
        
        <button 
          type="button" 
          class="rtds-btn rtds-btn--icon rtds-btn--l rtds-search-bar__clear rtds-border-0 rtds-hidden hover:rtds-background-secondary hover:rtds-text-white" 
          data-search-clear
        >
          <span class="rtds-sr-only">Cancella ricerca</span>
          <svg
  class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#outline--x-circle" />
</svg>

        </button>
             
        

  
        
        <button type="submit"
    class="rtds-btn 
    r rtds-btn--icon rtds-btn--icon-square rtds-btn--primary rtds-search-bar__submit rtds-btn--l"







><svg
  class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#mini--magnifying-glass" />
</svg>
<span class="rtds-sr-only">
        
        Cerca
        </span>
        
</button>

      </div>
    </div>
  </form>
</div>


                </div>

                <!-- opzionale -->
                <div class="rtds-hero__buttons">
                    
                </div>
            </div>

            <!-- opzionale: solo varianti con immagine laterale -->
            <figure class="rtds-hero__image">
                <img src="[image.src]" alt="[image.alt]">
            </figure>
        </div>

        <!-- opzionale -->
        <div class="rtds-hero__additional">
            [additionalContent]
        </div>

    </div>
</section>

Configurazioni per lo Sviluppo in Nunjucks

Parametri Disponibili

Contenuto

• title (stringa, obbligatorio): Titolo H1 della sezione. Supporta HTML tramite filtro safe.
• description (stringa, opzionale): Sottotitolo o testo descrittivo. Supporta HTML.
• additionalContent (stringa, opzionale): HTML libero nel blocco aggiuntivo sotto la hero (loghi, KPI, testo). null per nascondere il blocco.

Sfondo

• background (stringa, opzionale): Variante di sfondo. Valori accettati: gradient-bg (default), light-bg, dark-bg, image-bg.
• bgImage (stringa, opzionale): Percorso dell’immagine di sfondo per la variante image-bg. Passato come custom property CSS --hero-bg-image.

Layout

• alignment (stringa, opzionale): Allineamento del contenuto. Valori: centered (default), left.
• classes (stringa, opzionale): Classi CSS aggiuntive applicate alla <section> radice.

Immagine laterale

• image (oggetto, opzionale): Attiva il layout a due colonne su desktop.
  • image.src (stringa, obbligatorio): Percorso dell’immagine.
  • image.alt (stringa, opzionale): Testo alternativo. Default: stringa vuota.

Barra di ricerca

• showSearch (booleano, opzionale): Mostra la barra di ricerca. Default: true.
• searchBar (oggetto, opzionale): Configurazione passata al componente @search-bar:
  • searchId: ID univoco del campo input
  • label: Label del campo
  • submitLabel: Testo del bottone di submit
  • placeholder: Placeholder del campo
  • showLabel: Mostra/nasconde la label visiva
  • showClearButton: Mostra il bottone cancella
  • formAction: URL di destinazione del form
  • formMethod: Metodo HTTP (get / post)
  • allResultsHref: URL della pagina risultati completi
  • allResultsLabel: Testo del link risultati completi

Bottoni

• buttons (array, opzionale): Lista di bottoni renderizzati con @button.
  • [].variant (stringa): Suffisso del componente bottone (es. --icon-right).
  • [].context (oggetto): Contesto passato al componente @button:
    • label: Testo del bottone
    • href: URL di destinazione
    • classes: Classi CSS del bottone (variante e dimensione, es. rtds-btn--primary rtds-btn--s)
    • icon: Nome icona (es. mini--chevron-right)

Custom Properties CSS

Le seguenti proprietà possono essere sovrascritte dall’esterno per personalizzare l’aspetto senza modificare il CSS del componente:

• --hero-bg: Colore di sfondo solido.
• --hero-gradient: Gradiente di sfondo.
• --hero-bg-image: URL dell’immagine di sfondo (impostato via style inline da Nunjucks).
• --hero-overlay-bg: Colore dell’overlay per la variante image-bg. Default: rgba(255, 255, 255, 0.5).
• --hero-image-basis: Larghezza base dell’immagine laterale su desktop. Default: 382px.
• --hero-title-color: Colore del titolo. Default: var(--color-content-01).
• --hero-description-color: Colore della descrizione. Default: var(--color-content-03).
• --hero-additional-bg: Sfondo del blocco additionalContent. Default: var(--color-background-03).
• --hero-additional-border: Bordo del blocco additionalContent. Default: var(--color-border-gray-02).
• --hero-additional-text: Colore testo del blocco additionalContent. Default: var(--color-content-01).

Varianti

Il componente include le seguenti varianti:

1. gradient-centered: Sfondo gradiente con contenuto centrato (default).
2. gradient-left-image: Sfondo gradiente con contenuto a sinistra e immagine 382×382px a destra su desktop.
3. light-centered: Sfondo solido chiaro (--color-background-01) con contenuto centrato.
4. light-left-image: Sfondo solido chiaro con layout a due colonne.
5. dark-centered: Sfondo scuro (--color-background-09) con testi e bottoni invertiti (usa rtds-btn--text-inverted).
6. dark-left-image: Sfondo scuro con layout a due colonne e bottoni invertiti.
7. image-bg-centered: Immagine full-cover come sfondo con overlay semitrasparente bianco e contenuto centrato. Non prevede immagine laterale.
8. image-bg-left: Come image-bg-centered ma con contenuto allineato a sinistra.
9. no-search: Variante senza barra di ricerca (showSearch: false).
10. no-additional-content: Variante senza blocco aggiuntivo (additionalContent: null).

Responsive Design

Il componente è completamente responsive:

• Mobile: layout a singola colonna con immagine laterale (se presente) sotto il contenuto, aspect-ratio 16:9.
• Desktop (lg+): quando è presente image, layout a due colonne con contenuto flex-1 e immagine fissa 382×382px.