CTA Banner

Componente per la creazione di banner con call-to-action. Supporta layout a colonna singola con immagine di sfondo e layout a due colonne con contenuto e CTA separati.

Comportamento

Il componente viene renderizzato come <section class="rtds-cta-banner">.

Esistono due template principali:

• cta-banner.njk — layout a colonna singola: contenuto e CTA nella stessa colonna, immagine opzionale come sfondo CSS
• cta-banner--2-col.njk — layout a due colonne: titolo nella colonna sinistra, CTA (e descrizione opzionale) nella colonna destra; usato anche dalla variante 2-col-stacked

Il parametro hasMaxWidth aggiunge la classe .rtds-cta-banner--max-width per limitare la larghezza massima del banner.

Varianti

Varianti di layout

• default: Layout a colonna singola con immagine di sfondo CSS e ombra (imgBg: true, hasShadow: true)
• 2-col: Layout a due colonne — titolo a sinistra, CTA a destra; sfondo colorato con icona decorativa (rtds-cta-banner--bg-icon-right)
• 2-col-test: Layout a due colonne con immagine in basso su mobile e a destra su desktop (rtds-cta-banner--2-col-test); adatta per immagini non ritagliabili
• 2-col-stacked: Variante del layout a due colonne — titolo a sinistra, descrizione + CTA impilati nella colonna destra; attivato tramite layout: '2-col-stacked' nel context di cta-banner--2-col.njk
• has-icon-right: Layout a colonna singola con sfondo colorato e icona decorativa a destra; due pulsanti CTA
• has-icon-right-v2: Variante di has-icon-right con immagine custom in basso a destra; CTA allineata a destra tramite ctaClasses: 'rtds-justify-end'
• has-icon-right-v2-max-width: Identica a has-icon-right-v2 con aggiunta di hasMaxWidth: true — limita la larghezza del banner a 500px

Parametri di configurazione

Contesto di sviluppo Fractal/Nunjucks — Questa sezione riguarda esclusivamente i parametri del context .config.yml usati durante lo sviluppo nella libreria.

Parametri Base

• title (stringa, obbligatorio): Titolo del banner, renderizzato come <h2>
• description (stringa, opzionale): Testo descrittivo sotto il titolo; nel layout 2-col-stacked appare nella colonna destra
• imgPath (stringa, opzionale): Percorso dell’immagine; usata come sfondo CSS inline (style="background-image: url(...)") nel layout base; nel layout 2-col usata come sfondo CSS se non è presente iconPath
• imgBg (booleano, opzionale): Se true, aggiunge .rtds-cta-banner--img-bg — attiva overlay scuro e testo bianco per garantire il contrasto sull’immagine di sfondo
• hasShadow (booleano, opzionale): Se true, aggiunge rtds-shadow-md al banner
• hasMaxWidth (booleano, opzionale): Se true, aggiunge .rtds-cta-banner--max-width — limita la larghezza massima a 500px; utile per banner in contesti a larghezza ridotta
• classes (stringa, opzionale): Classi CSS aggiuntive sull’elemento <section> radice (es. rtds-background-03 rtds-cta-banner--bg-icon-right)
• contentWidth (stringa, opzionale): Classi Tailwind per la larghezza della colonna di contenuto nella griglia a 12 colonne (es. rtds-col-span-6 lg:rtds-col-span-7, rtds-col-span-12)
• ctaClasses (stringa, opzionale): Classi CSS aggiuntive sul contenitore .rtds-cta-banner__cta (es. rtds-justify-end)
• layout (stringa, opzionale): Valore '2-col-stacked' nel template cta-banner--2-col.njk — sposta la descrizione nella colonna destra sopra le CTA

Parametri CTA

• cta (array, opzionale): Elenco dei pulsanti CTA; ogni elemento accetta:
  • variant (stringa): Variante del componente @button (es. '--icon-right', '--icon-right-s', '--icon')
  • context (oggetto): Contesto passato al componente @button:
    • classes (stringa): Classi CSS del pulsante (es. rtds-btn--primary, rtds-btn--inverted)
    • href (stringa): URL di destinazione
    • label (stringa): Testo del pulsante; può contenere HTML (es. <span class="rtds-sr-only">)
    • icon (stringa, opzionale): ID icona dallo sprite SVG (es. mini--arrow-right)
    • iconTransformType (stringa, opzionale): Tipo di animazione icona (scale, translate)
    • srOnlyLabel (stringa, opzionale): Testo aggiuntivo per screen reader da aggiungere al label (es. ' su {nome servizio}')

Parametro solo per cta-banner--2-col.njk

• iconPath (stringa, opzionale): Percorso di un’immagine decorativa renderizzata come <img aria-hidden="true"> in una colonna separata; se presente, imgPath non viene usato come sfondo CSS

Accessibilità

WCAG 2.1

Livello AA — criteri pertinenti:

• 1.3.1 Informazioni e correlazioni — struttura semantica con <section> e <h2> come intestazione
• 2.4.4 Scopo del collegamento (nel contesto) — i CTA devono avere testo descrittivo; usare srOnlyLabel o <span class="rtds-sr-only"> se il label è generico (es. “Scopri di più”)
• 1.1.1 Contenuti non testuali — l’immagine decorativa nel layout 2-col usa aria-hidden="true"; le immagini di sfondo CSS non richiedono testo alternativo

Struttura e semantica

• <section class="rtds-cta-banner"> — regione semantica; identifica il banner come area distinta della pagina; senza aria-label o aria-labelledby non è un landmark navigabile dagli screen reader
• <h2> — intestazione del banner; rispetta la gerarchia degli heading nella pagina; nel layout base usa classe tipografica rtds-heading-4, nel layout 2-col usa rtds-heading-1
• <img aria-hidden="true"> (solo layout 2-col con iconPath) — immagine puramente decorativa; nascosta agli screen reader

Screen reader

• I pulsanti CTA devono avere label descrittive della destinazione; se il testo visivo è generico (es. “Scopri di più”), aggiungere testo nascosto tramite <span class="rtds-sr-only"> nel label del context
• L’immagine di sfondo è impostata via CSS inline e non ha testo alternativo — le informazioni trasmesse dall’immagine devono essere disponibili nel testo visibile

Stili CSS

Classi Base

• .rtds-cta-banner: Stile base del banner; grid, rounded-xl, altezza minima rtds-min-h-36

Classi Modificatori

• .rtds-cta-banner--img-bg: Attiva l’immagine di sfondo (bg-cover, bg-center); aggiunge overlay scuro semitrasparente (before:) per garantire il contrasto del testo
• .rtds-cta-banner--bg-icon-right: Posiziona l’immagine di sfondo a destra al centro (bg-no-repeat, bg-[position:right_center])
• .rtds-cta-banner--bg-sviluppo-toscana: Immagine di sfondo piccola (5em) in basso a destra, background-repeat: no-repeat
• .rtds-cta-banner--max-width: Limita la larghezza massima a 500px; aggiunge border-radius: 8px e overflow: hidden
• .rtds-cta-banner--2-col-test: Immagine di sfondo centrata in basso su mobile con padding-bottom: 12rem; su lg torna a destra con dimensione automatica (80% altezza)

Classi Elementi (BEM)

• .rtds-cta-banner__content: Colonna con titolo, descrizione e CTA (layout base); grid, p-5, gap-4 md:gap-6
• .rtds-cta-banner__cta: Contenitore dei pulsanti CTA; grid sm:flex sm:flex-wrap gap-2
• .rtds-cta-banner__grid: Griglia interna del layout 2-col; grid grid-cols-1 lg:grid-cols-12 lg:gap-6
• .rtds-cta-banner__cta-col: Colonna destra nel layout 2-col; flex flex-col justify-end
• .rtds-cta-banner__icon: Contenitore immagine decorativa nel layout 2-col (con iconPath); flex justify-center items-end p-4

Esempi di utilizzo

<!-- Banner base con immagine di sfondo -->
<section class="rtds-cta-banner rtds-cta-banner--img-bg rtds-shadow-md"
         style="background-image: url('/images/feathers.jpg');">
    <div class="rtds-grid rtds-grid-cols-1 lg:rtds-grid-cols-12">
        <div class="rtds-cta-banner__content rtds-grid rtds-p-5 rtds-gap-4 rtds-col-span-6 lg:rtds-col-span-7">
            <div class="rtds-space-y-2 rtds-pr-16">
                <h2 class="rtds-heading-4">Titolo del banner</h2>
            </div>
            <div class="rtds-cta-banner__cta rtds-mt-auto rtds-grid sm:rtds-flex rtds-gap-2">
                <a href="#" class="rtds-btn rtds-btn--s rtds-btn--inverted">
                    Scopri di più<span class="rtds-sr-only"> su Titolo Banner</span>
                </a>
            </div>
        </div>
    </div>
</section>

<!-- Banner a due colonne con sfondo colorato -->
<section class="rtds-cta-banner rtds-shadow-md rtds-background-03 rtds-cta-banner--bg-icon-right"
         style="background-image: url('/images/banner-bg-icon.svg');">
    <div class="rtds-cta-banner__grid rtds-grid rtds-grid-cols-1 lg:rtds-grid-cols-12 lg:rtds-gap-6">
        <div class="rtds-cta-banner__content rtds-p-2 lg:rtds-p-5 lg:rtds-col-span-6 rtds-flex rtds-flex-col">
            <h2 class="rtds-heading-1">Banner a due colonne</h2>
        </div>
        <div class="rtds-cta-banner__cta-col rtds-p-2 lg:rtds-p-5 lg:rtds-col-span-6 rtds-flex rtds-flex-col rtds-justify-end rtds-gap-4 lg:rtds-items-end">
            <div class="rtds-cta-banner__cta rtds-grid sm:rtds-flex rtds-gap-2">
                <a href="#" class="rtds-btn rtds-btn--primary">Azione principale</a>
            </div>
        </div>
    </div>
</section>

<!-- Banner con larghezza massima (has-icon-right-v2-max-width) -->
<section class="rtds-cta-banner rtds-background-03 rtds-cta-banner--bg-icon-right rtds-cta-banner--bg-sviluppo-toscana rtds-cta-banner--max-width">
    <!-- contenuto -->
</section>

Note

• Le varianti 2-col, 2-col-test e 2-col-stacked usano il template cta-banner--2-col.njk, non cta-banner.njk
• La variante 2-col-stacked estende cta-banner--2-col.njk tramite {% extends "@cta-banner--2-col" %} e usa il parametro layout: '2-col-stacked' per spostare la descrizione nella colonna destra
• Il parametro ctaLabel presente nel context globale è un segnaposto legacy — il testo dei pulsanti va configurato tramite cta[].context.label
• Il blocco rightContent nel template base è vuoto e disponibile per override tramite Nunjucks in implementazioni custom