Componente Banner

Componente per la creazione di banner informativi con supporto per immagini, testo descrittivo e call-to-action. Include layout responsive e personalizzazione completa del contenuto.

Comportamento e Funzionalità

Il componente Banner è progettato per creare sezioni promozionali o informative con:

• Layout responsive con immagine posizionabile a destra o sinistra
• Supporto per titolo, categoria e descrizione
• Call-to-action configurabile tramite componente button
• Personalizzazione dello sfondo tramite classi CSS
• Layout flessibile che si adatta a diverse dimensioni dello schermo

Varianti

Il componente include due varianti principali per il posizionamento dell’immagine:

Default (immagine a destra)

• Immagine posizionata a destra del contenuto
• Layout ottimizzato per desktop con contenuto a sinistra e immagine a destra
• Su mobile, l’immagine viene visualizzata sopra il contenuto

Image Left (immagine a sinistra)

• Immagine posizionata a sinistra del contenuto
• Layout speculare rispetto alla variante default
• Su mobile, l’immagine viene visualizzata sopra il contenuto

Markup e Struttura

Il componente è strutturato come segue:

<section class="rtds-banner [bgColor] [rtds-banner--image-left|rtds-banner--image-right] [classes]">
    <div class="lg:rtds-flex lg:rtds-justify-between">
        <!-- Immagine a sinistra (se imgLeft è true) -->
        <figure class="rtds-banner__image rtds-banner__image-left">
            <img src="[imgPath]" alt="[imgAlt]">
        </figure>
        
        <!-- Contenuto principale -->
        <div class="rtds-banner__content">
            <div class="rtds-flex rtds-flex-col-reverse rtds-gap-2">
                <h2 class="rtds-heading-2">[title]</h2>
            </div>
            <div class="rtds-banner__description">
                [description]
            </div>
            <div class="rtds-banner__action">
                [CTA Button]
            </div>
        </div>
        
        <!-- Immagine a destra (se imgRight è true) -->
        <figure class="rtds-banner__image rtds-banner__image-right">
            <img src="[imgPath]" alt="[imgAlt]">
        </figure>
    </div>
</section>

Configurazioni per lo Sviluppo in Nunjucks

Parametri Disponibili

Contenuto

• title (stringa, obbligatorio): Titolo del banner
• category (stringa, opzionale): Categoria del banner (es. “Category”)
• description (stringa, opzionale): Descrizione del banner (supporta HTML)
• bgColor (stringa, opzionale): Classe CSS per il colore di sfondo (es. ‘rtds-background-03’)
• classes (stringa, opzionale): Classi CSS aggiuntive per il contenitore

Immagine

• imgPath (stringa, obbligatorio se si utilizza un’immagine): Percorso dell’immagine
• imgAlt (stringa, obbligatorio se presente imgPath): Testo alternativo per l’immagine
• imgRight (booleano, opzionale): Posiziona l’immagine a destra (default: true nella variante default)
• imgLeft (booleano, opzionale): Posiziona l’immagine a sinistra (default: true nella variante image-left)

Call-to-Action

• button (oggetto, opzionale): Configurazione del pulsante CTA
  • variant (stringa, opzionale): Variante del pulsante (es. ‘–icon-right’)
  • context (oggetto, obbligatorio se presente button): Contesto del pulsante
    • label (stringa, obbligatorio): Testo del pulsante
    • href (stringa, obbligatorio): URL di destinazione
    • srOnlyLabel (stringa, opzionale): Testo aggiuntivo per screen reader (es. ‘su ** TITOLO BANNER **’)

Blocchi Disponibili

• classes: Blocco per aggiungere classi CSS personalizzate al contenitore principale (utile per override di stili nelle varianti)

Stili CSS

Classi Base

• .rtds-banner: Contenitore principale del banner
  • Sfondo: bianco di default (rtds-bg-white)

Classi per Varianti

• .rtds-banner--image-left: Applicata quando l’immagine è posizionata a sinistra
• .rtds-banner--image-right: Applicata quando l’immagine è posizionata a destra

Classi per Elementi

• .rtds-banner__content: Contenitore del contenuto principale
  • Layout: grid con gap-4 su mobile, gap-6 su desktop
  • Larghezza: 2/3 su desktop (lg:rtds-w-2/3)
  • Padding: py-8 px-10 su mobile, p-12 su tablet, p-16 su desktop, p-20 su 2xl
• .rtds-banner__description: Contenitore della descrizione
  • Font: text-base su mobile, text-lg su 2xl
  • Larghezza massima: 75ch
  • Spaziatura verticale: space-y-2
  • Line-height: leading-relaxed
• .rtds-banner__image: Contenitore dell’immagine
  • Aspect ratio: aspect-video
  • Larghezza: 1/3 su desktop (lg:rtds-w-1/3)
  • Layout: flex con justify-center
• .rtds-banner__image img: Immagine stessa
  • Object-fit: cover
  • Object-position: center
  • Dimensioni: w-full h-full
• .rtds-banner__action: Contenitore del pulsante CTA
  • Padding top: pt-5

Responsive Design

Il componente è completamente responsive:

• Mobile: Layout verticale con immagine sopra il contenuto
• Desktop (lg+): Layout orizzontale con contenuto e immagine affiancati
  • Contenuto occupa 2/3 della larghezza
  • Immagine occupa 1/3 della larghezza

Accessibilità

Il componente è stato progettato seguendo le best practice di accessibilità WCAG 2.1:

• Struttura semantica: Utilizzo di <section> per identificare la sezione
• Heading semantico: Utilizzo di <h2> per il titolo del banner
• Testo alternativo: Supporto obbligatorio per imgAlt quando è presente un’immagine
• Screen reader: Supporto per testo aggiuntivo nel CTA tramite srOnlyLabel per fornire contesto agli screen reader
• Contenuto descrittivo: La descrizione supporta HTML per una migliore strutturazione del contenuto

Esempi di Utilizzo

Banner Standard con Immagine a Destra

title: "Parità e inclusione"
category: Category
description: "<p>Accedi a norme, iniziative e strumenti dedicati alla promozione dell'equità di genere e dell'inclusione sociale.</p>"
bgColor: 'rtds-background-03'
imgRight: true
imgPath: '/images/feathers.jpg'
imgAlt: 'Descrizione dell\'immagine'
button:
  variant: '--icon-right'
  context:
    label: 'Scopri di più'
    href: '#'
    srOnlyLabel: 'su Parità e inclusione'

Banner con Immagine a Sinistra

title: "Titolo del Banner"
description: "<p>Descrizione del contenuto del banner.</p>"
imgLeft: true
imgPath: '/images/example.jpg'
imgAlt: 'Testo alternativo'
button:
  variant: '--icon-right'
  context:
    label: 'Vai alla pagina'
    href: '/pagina'

Banner Senza Immagine

title: "Titolo del Banner"
description: "<p>Descrizione del contenuto.</p>"
bgColor: 'rtds-background-02'
button:
  variant: '--primary'
  context:
    label: 'Azione'
    href: '#'