Banner salute: Default

<section class="rtds-cta-banner rtds-banner-fullclick rtds-shadow-md rtds-min-h-52 rtds-cta-banner--img-bg" style="background-image: url(../../images/feathers.jpg);"> <a href="#" class="rtds-text-inherit rtds-grid"> <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 md:rtds-gap-6 md:rtds-col-span-6 lg:rtds-col-span-7"> <h2 class="rtds-heading-4"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, aenean id pretium lacus </h2> </div> </div> </a> </section>

<section class="rtds-cta-banner rtds-banner-fullclick{% if hasShadow %} rtds-shadow-md{% endif %}{% if classes %} {{ classes }}{% endif %}{% if imgBg %} rtds-cta-banner--img-bg{% endif %}"{% if imgPath and imgBg %} style="background-image: url({{ imgPath | path }});"{% endif %}> <a href="{{ href | default('#') }}" class="rtds-text-inherit rtds-grid"> <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 md:rtds-gap-6 md:rtds-col-span-6 lg:rtds-col-span-7"> <h2 class="rtds-heading-4{% block headingClasses %}{% if headingClass %} {{ headingClass }}{% endif %}{% endblock headingClasses %}"> {{ title }} </h2> </div> {% block rightContent %} {% endblock %} </div> </a> </section>

{ "title": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, aenean id pretium lacus", "imgPath": "/images/feathers.jpg", "href": "#", "imgBg": true, "hasShadow": true, "classes": "rtds-min-h-52" }

Banner cliccabile in cui l’intera area è un link. Supporta immagine di sfondo, titolo e ombra. Usato per banner promozionali che portano a una pagina di destinazione.

Comportamento

Il componente viene renderizzato come <section> con un <a> che copre l’intera area (rtds-grid + link come elemento grid). Il titolo è un <h2>. Opzionalmente può avere un’immagine di sfondo inline.

Varianti

default: Banner con immagine di sfondo, ombra e altezza minima di 208px

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.

Parametri Base

title (stringa, obbligatorio): Titolo del banner (renderizzato come <h2>)
href (stringa, obbligatorio): URL di destinazione del link. Default: #
classes (stringa, opzionale): Classi CSS aggiuntive per il contenitore (es. rtds-min-h-52)
headingClass (stringa, opzionale): Classi CSS aggiuntive per il titolo <h2>

Parametri per l’immagine di sfondo

imgBg (booleano, opzionale): Se true, applica la classe rtds-cta-banner--img-bg e usa imgPath come sfondo CSS
imgPath (stringa, opzionale): Percorso dell’immagine di sfondo (usato solo se imgBg: true)

Parametri visivi

hasShadow (booleano, opzionale): Se true, aggiunge rtds-shadow-md al contenitore

Stili CSS

Classi Base

.rtds-cta-banner: Stile base del banner CTA
.rtds-banner-fullclick: Aggiunta specifica — il link interno non ha sottolineatura (no-underline)
.rtds-cta-banner--img-bg: Variante con immagine di sfondo CSS

Struttura layout

Layout a griglia 12 colonne da lg
Contenuto: 6 colonne su md, 7 su lg
rightContent block: area destra disponibile per estensioni

Accessibilità

WCAG 2.1

Livello AA — criteri pertinenti:

2.4.4 Scopo del collegamento (nel contesto) — il titolo funge da testo del link poiché l’intera area è cliccabile; deve essere sufficientemente descrittivo
1.3.1 Informazioni e correlazioni — struttura semantica con <section> e <h2>

Struttura e semantica

Il componente è renderizzato come <section> — identifica il banner come regione autonoma della pagina
Il titolo è un <h2> — rispetta la gerarchia degli heading nella pagina
Il link avvolge l’intera area del banner (<a> come elemento grid)

Il titolo <h2> viene letto come testo del link dall’<a> che lo contiene
Evitare titoli generici come “Scopri di più”: il testo deve essere descrittivo della destinazione
Il componente variante --sr-only aggiunge testo visibile solo ai lettori di schermo

Esempi di utilizzo

<!-- Banner con immagine di sfondo -->
<section
  class="rtds-cta-banner rtds-banner-fullclick rtds-shadow-md rtds-cta-banner--img-bg rtds-min-h-52"
  style="background-image: url('/images/banner-bg.jpg');"
>
  <a href="/pagina-destinazione" class="rtds-text-inherit rtds-grid">
    <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 md:rtds-gap-6 md:rtds-col-span-6 lg:rtds-col-span-7">
        <h2 class="rtds-heading-4">
          Titolo descrittivo del banner
        </h2>
      </div>
    </div>
  </a>
</section>

<!-- Banner senza sfondo -->
<section class="rtds-cta-banner rtds-banner-fullclick">
  <a href="/pagina" class="rtds-text-inherit rtds-grid">
    <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 md:rtds-col-span-6 lg:rtds-col-span-7">
        <h2 class="rtds-heading-4">Titolo banner</h2>
      </div>
    </div>
  </a>
</section>

Banner Fullclick (Banner Salute)