Banner Onboarding

Banner promozionale per l’onboarding a Me.Toscana, pensato per essere pubblicato su siti diversi dal portale che lo ospita nativamente (portale Regione, portale ARTI, portale Competenze Digitali e altri siti della galassia regionale). Per questo motivo il componente è realizzato solo con classi Tailwind rtds- “sicure” — già presenti nella versione di RTDS attualmente in uso sul portale Regione — e mette a disposizione anche un CSS standalone completo per l’integrazione su siti che non usano affatto il design system RT (vedi Distribuzione standalone).

Comportamento

Il componente viene renderizzato sempre come <section class="rtds-banner-onboarding">. Non ci sono condizioni che cambiano il tag radice; a cambiare tra le varianti sono le classi applicate e la presenza o assenza di un wrapper esterno (vedi Varianti).

All’interno della <section> la struttura è fissa: blocco logo, blocco testo (titolo/heading + descrizione), blocco CTA e, se presente mainImg, blocco immagine principale. Il layout è realizzato con rtds-grid e grid-template-areas che cambiano per breakpoint (mobile: logo/testo impilati sopra la CTA; da md in su: logo, testo, CTA e immagine su tre colonne).

Varianti

Varianti di composizione

• default: banner base (logo, titolo, descrizione, CTA, immagine principale) senza wrapper esterno — da inserire in un contenitore già presente nella pagina ospitante
• with-wrapper: identica al default ma avvolta in <div class="rtds-container rtds-py-8 md:rtds-py-12 rtds-grid rtds-justify-center">, utile quando il banner deve gestire da solo la centratura e il padding verticale nella pagina
• compact: senza immagine principale (mainImg: null); il titolo è sostituito da un heading visivamente nascosto (srOnlyHeading, classe rtds-sr-only) — usata quando lo spazio disponibile non consente il blocco immagine ma va comunque mantenuto un nome accessibile per la sezione

Parametri di configurazione

Contesto di sviluppo Fractal/Nunjucks — Questa sezione riguarda esclusivamente i parametri del context .config.yml usati durante lo sviluppo nella libreria. Per l’uso in ambienti esterni al design system, fare riferimento a Distribuzione standalone.

Parametri Base

• title (stringa, opzionale): Titolo del banner, renderizzato in un <h2>; supporta HTML (viene passato con il filtro safe)
• srOnlyHeading (stringa, opzionale): Testo alternativo al titolo, renderizzato nello stesso <h2> ma con classe rtds-sr-only — usato dalla variante compact per mantenere un nome accessibile senza mostrare un titolo visivo
• description (stringa, obbligatorio): Testo descrittivo del banner
• classes (stringa, opzionale): Classi CSS aggiuntive sull’elemento <section> radice
• contentClasses (stringa, opzionale): Classi CSS aggiuntive sul contenitore .rtds-banner-onboarding__content

Parametri Logo

• logo (oggetto, obbligatorio):
  • path (stringa, obbligatorio): Percorso dell’immagine logo
  • path2x (stringa, opzionale): Percorso della versione a densità doppia; se presente genera l’attributo srcset
  • sizesAttribute (stringa, opzionale): Valore dell’attributo sizes
  • alt (stringa, opzionale): Testo alternativo; se assente l’immagine viene trattata come decorativa (alt="")
  • width / height (numero, opzionale): Dimensioni intrinseche dell’immagine

Parametri CTA

• cta (array, obbligatorio): Elenco dei pulsanti CTA; ogni elemento accetta:
  • variant (stringa): Variante del componente @button (es. '--icon-right')
  • context (oggetto): Contesto passato al componente @button (classes, href, label, srOnlyLabel, ecc.)

Parametri Immagine principale

• mainImg (oggetto, opzionale): Se assente (o null, come nella variante compact) il blocco immagine non viene renderizzato
  • path (stringa, obbligatorio se mainImg è presente): Percorso base dell’immagine
  • path482w, path723w, path844w, path964w (stringa, opzionale): Varianti responsive per l’attributo srcset (241w/482w/723w/844w/964w)
  • sizesAttribute (stringa, opzionale): Valore dell’attributo sizes
  • alt (stringa, opzionale): Testo alternativo; se assente l’immagine viene trattata come decorativa (alt="")
  • width / height (numero, opzionale): Dimensioni intrinseche dell’immagine

Accessibilità

WCAG 2.1

Livello AA — criteri pertinenti:

• 1.1.1 Contenuti non testuali — logo e immagine principale sono decorativi per default (alt=""); se veicolano un’informazione non presente nel testo, valorizzare logo.alt / mainImg.alt
• 1.3.1 Informazioni e correlazioni — struttura semantica con <section> e <h2> (visibile o rtds-sr-only)
• 2.4.4 Scopo del collegamento (nel contesto) — la CTA “Registrati adesso” usa srOnlyLabel per specificare la destinazione ( su Me.Toscana) a beneficio di chi naviga con screen reader

Struttura e semantica

• <section class="rtds-banner-onboarding"> — regione presentazionale; non è un landmark navigabile (nessun aria-label/aria-labelledby) — se il banner viene isolato come sezione autonoma di pagina, valutare l’aggiunta di aria-labelledby puntato all’<h2>
• <h2> — intestazione del banner; nella variante compact è presente ma visivamente nascosta (rtds-sr-only) tramite srOnlyHeading, così la sezione mantiene comunque un nome accessibile in assenza di titolo visibile
• <img alt=""> (logo e immagine principale) — decorative per default; diventano informative solo se viene valorizzato il rispettivo parametro alt

Screen reader

• Il CTA è generato tramite il sotto-componente @button: se il testo visibile del pulsante è generico (es. “Registrati adesso”), va integrato con srOnlyLabel nel context del CTA per specificare la destinazione, come nell’esempio di default (srOnlyLabel: " su Me.Toscana")

Stili CSS

Classi Base

• .rtds-banner-onboarding: contenitore radice; il layout effettivo è determinato dal modificatore --logo (sempre presente nei template forniti)

Classi Modificatori

• .rtds-banner-onboarding--logo: attiva il layout a griglia con aree logo/text/cta/image; cambia grid-template-columns per breakpoint (mobile, md, lg, 2xl) e imposta un max-width crescente da md in su
• .rtds-banner-onboarding--compact: da usare insieme a --logo; da md in su ridispone le aree in tre colonne (logo text cta) senza colonna immagine

Classi Elementi (BEM)

• .rtds-banner-onboarding__content: contenitore grid dei blocchi interni
• .rtds-banner-onboarding__logo: blocco logo, centrato
• .rtds-banner-onboarding__text: blocco titolo + descrizione
• .rtds-banner-onboarding__description: testo descrittivo; dimensione del font crescente per breakpoint (0.875rem → 1.125rem)
• .rtds-banner-onboarding__cta: contenitore dei pulsanti CTA
• .rtds-banner-onboarding__image: blocco immagine principale; su mobile ha aspect-ratio: 2/1, da md in su segue l’altezza della riga con un clip-path diagonale sul lato sinistro

Distribuzione standalone

Oltre al CSS di libreria (banner-onboarding.css, che si appoggia ai token globali di custom-properties.css come ogni altro componente RTDS), la cartella del componente contiene --banner-onboarding-complete.css: un bundle autosufficiente pensato per contesti che non caricano il design system RT, ad esempio siti a tema completamente diverso (es. Competenze Digitali).

Questo file:

• ridefinisce in un blocco :root tutte le custom properties usate dal componente con valori letterali diretti (spacing, colori, gradiente, font) invece di far riferimento a public/css/custom-properties.css
• include copie inline di tutte le utility Tailwind rtds- effettivamente usate dal markup (flex/grid, spacing, colori, tipografia, ecc.)
• include copie inline degli stili di .rtds-btn/.rtds-btn--primary/.rtds-btn--icon-right e di .rtds-icon, necessari per renderizzare correttamente la CTA generata da @button
• passa comunque nella normale pipeline di build dei CSS di componente (npm run build:components:*), che genera il corrispondente --banner-onboarding-complete.built.css

Nota di manutenzione: il contenuto di questo file è scritto e allineato manualmente — non esiste uno script che lo rigenera a partire dai file reali di button, icon o dai token del design system. Se cambiano gli stili di questi componenti/token, --banner-onboarding-complete.css va aggiornato a mano per restare coerente con la versione “di libreria” del banner.

Esempi di utilizzo

<!-- Esempio base (variante default) -->
<section class="rtds-banner-onboarding rtds-banner-onboarding--logo rtds-bg-gradient-04 rtds-shadow-md rtds-rounded-lg rtds-overflow-hidden">
  <div class="rtds-banner-onboarding__content rtds-grid">
    <div class="rtds-banner-onboarding__logo rtds-flex rtds-justify-center rtds-items-center rtds-py-6 rtds-px-4 md:rtds-px-6">
      <img src="/images/me-toscana-logo.png" alt="" width="242" height="127">
    </div>
    <div class="rtds-banner-onboarding__text rtds-py-6 rtds-px-4 rtds-grid rtds-gap-2 lg:rtds-gap-3 rtds-content-start">
      <h2 class="rtds-heading-3 2xl:rtds-text-2xl rtds-leading-tight">Titolo banner lorem ipsum dolor sit amet</h2>
      <div class="rtds-banner-onboarding__description">
        <p>Testo descrittivo del banner.</p>
      </div>
    </div>
    <div class="rtds-banner-onboarding__cta rtds-flex rtds-py-6 rtds-px-4 rtds-justify-center rtds-items-center md:rtds-justify-end md:rtds-items-end">
      <a href="#" class="rtds-btn rtds-btn--icon-right rtds-btn--primary">Registrati adesso</a>
    </div>
    <div class="rtds-banner-onboarding__image rtds-aspect-2-1">
      <img src="/images/banner-me-toscana.jpg" alt="Banner principale" width="482" height="416">
    </div>
  </div>
</section>

<!-- Variante compact (senza immagine principale, heading nascosto) -->
<section class="rtds-banner-onboarding rtds-banner-onboarding--logo rtds-banner-onboarding--compact rtds-bg-gradient-04 rtds-shadow-md rtds-rounded-lg rtds-overflow-hidden">
  <div class="rtds-banner-onboarding__content rtds-grid lg:rtds-gap-8">
    <div class="rtds-banner-onboarding__logo rtds-flex rtds-justify-center rtds-items-center rtds-py-6 rtds-px-4 md:rtds-px-6">
      <img src="/images/me-toscana-logo.png" alt="" width="242" height="127">
    </div>
    <div class="rtds-banner-onboarding__text rtds-py-6 rtds-px-4 rtds-grid rtds-gap-2 lg:rtds-gap-3 rtds-content-start">
      <h2 class="rtds-sr-only">Me.Toscana.it</h2>
      <div class="rtds-banner-onboarding__description">
        <p>Testo descrittivo del banner.</p>
      </div>
    </div>
    <div class="rtds-banner-onboarding__cta rtds-flex rtds-py-6 rtds-px-4 md:rtds-px-6 rtds-justify-center rtds-items-center md:rtds-justify-end md:rtds-items-center">
      <a href="#" class="rtds-btn rtds-btn--icon-right rtds-btn--primary">Registrati adesso</a>
    </div>
  </div>
</section>

Note

• Dipende dal componente @button per il rendering della CTA
• Richiede lo sprite SVG caricato in pagina per l’icona della CTA (--icon-right)
• Contenuti e asset di default (loghi, immagine principale, testo, link) sono specifici della campagna Me.Toscana: quando il componente viene riusato per un’altra campagna vanno sostituiti tutti i parametri logo, mainImg, title/srOnlyHeading, description e cta
• Le classi Tailwind usate nel markup sono deliberatamente limitate a quelle già disponibili nella versione di RTDS pubblicata sul portale Regione, per garantire compatibilità anche lì dove viene integrata una versione meno recente della libreria