Regione Toscana Design System Design System Servizi

Banner: Image Left 

<section class="rtds-banner rtds-background-03 rtds-banner--image-left">
    <div class="lg:rtds-flex lg:rtds-justify-between">

        <figure class="rtds-banner__image rtds-banner__image-left">
            <img src="../../images/feathers.jpg" alt="">
        </figure>

        <div class="rtds-banner__content">
            <div class="rtds-flex rtds-flex-col-reverse rtds-gap-2">
                <h2 class="rtds-heading-2">
                    Parità e inclusione
                </h2>
            </div>

            <div class="rtds-banner__description">
                <p>Accedi a norme, iniziative e strumenti dedicati alla promozione dell’equità di genere e dell’inclusione sociale. Scopri le opportunità disponibili.</p>
                <p>Le politiche di parità e inclusione mirano a rimuovere le barriere che ostacolano la partecipazione paritaria di tutti alla vita lavorativa e sociale. Attraverso misure concrete, si favorisce la riduzione delle disuguaglianze, l’empowerment individuale e una crescita collettiva più equa e sostenibile.</p>
            </div>

            <div class="rtds-banner__action">
                <a href="#" class="rtds-btn 
    rtds-btn--icon-right rtds-group/button rtds-btn--primary">
                    <span>
                        Scopri di più

                        <span class="rtds-sr-only">su ** TITOLO BANNER **</span>

                        <svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6 group-hover/button:rtds-translate-x-1" aria-hidden="true" focusable="false" role="img">
                            <use href="../../icons.svg#mini--chevron-right" />
                        </svg>

                </a>

            </div>
        </div>

    </div>
</section>
 
<section class="rtds-banner{% if bgColor %} {{ bgColor }}{% endif %}{% if imgLeft %} rtds-banner--image-left{% elseif imgRight %} rtds-banner--image-right{% endif %}{% block classes %}{% if classes %} {{ classes }}{% endif %}{% endblock classes %}">
    <div class="lg:rtds-flex lg:rtds-justify-between">
        {% if imgLeft %} 
            <figure class="rtds-banner__image rtds-banner__image-left">
                <img src="{{ imgPath | path }}" alt="{{ imgAlt }}">
            </figure>
        {% endif %}
        <div class="rtds-banner__content">
            <div class="rtds-flex rtds-flex-col-reverse rtds-gap-2">
                <h2 class="rtds-heading-2">
                    {{ title | safe }}
                </h2>
            </div>
            {% if description %}
            <div class="rtds-banner__description">
                {{ description | safe }}
            </div>
            {% endif %}
            <div class="rtds-banner__action">
                {% render '@button' + button.variant, button.context, true %}
            </div>  
        </div>
        {% if imgRight %} 
            <figure class="rtds-banner__image rtds-banner__image-right">
                <img src="{{ imgPath | path }}" alt="{{ imgAlt }}">
            </figure>
        {% endif %}
    </div>
</section>
 
{
  "bgColor": "rtds-background-03",
  "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. Scopri le opportunità disponibili.</p><p>Le politiche di parità e inclusione mirano a rimuovere le barriere che ostacolano la partecipazione paritaria di tutti alla vita lavorativa e sociale. Attraverso misure concrete, si favorisce la riduzione delle disuguaglianze, l’empowerment individuale e una crescita collettiva più equa e sostenibile.</p>",
  "imgRight": false,
  "imgPath": "/images/feathers.jpg",
  "imgAlt": "",
  "button": {
    "variant": "--icon-right",
    "context": {
      "label": "Scopri di più",
      "href": "#",
      "srOnlyLabel": "su ** TITOLO BANNER **"
    }
  },
  "imgLeft": true
}
  • Content: 
    .rtds-banner {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.rtds-banner__content {
    gap: var(--spacing-4);
    padding-left: var(--spacing-10);
    padding-right: var(--spacing-10);
    display: grid;
    padding-top: var(--spacing-8);
    padding-bottom: var(--spacing-8);
}
@media (min-width: 768px) {
    .rtds-banner__content {
        padding: var(--spacing-12);
    }
}
@media (min-width: 1024px) {
    .rtds-banner__content {
        width: 66.666667%;
        gap: var(--spacing-6);
        padding: var(--spacing-16);
    }
}
@media (min-width: 1536px) {
    .rtds-banner__content {
        padding: var(--spacing-20);
    }
}
.rtds-banner__description {
    max-width: 75ch;
}
.rtds-banner__description > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-2) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-2) * var(--tw-space-y-reverse));
}
.rtds-banner__description {
    font-size: var(--fontsize-text-base);
    line-height: 1.625;
}
@media (min-width: 1536px) {
    .rtds-banner__description {
        font-size: var(--fontsize-text-lg);
    }
}
.rtds-banner__image {
    aspect-ratio: 16 / 9;
    display: flex;
    justify-content: center;
}
@media (min-width: 1024px) {
    .rtds-banner__image {
        width: 33.333333%;
    }
}
.rtds-banner__image img {
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
}
.rtds-banner__action {
    padding-top: var(--spacing-5);
}
  • URL: /components/raw/banner/banner.built.css
  • Filesystem Path: components/04-organisms/banner/banner.built.css
  • Size: 1.6 KB
  • Content: 
    @layer components {
    .rtds-banner {
        @apply rtds-bg-white;
    }

    .rtds-banner__content {
        @apply rtds-grid rtds-gap-4 lg:rtds-gap-6 lg:rtds-w-2/3 rtds-py-8 rtds-px-10 md:rtds-p-12 lg:rtds-p-16 2xl:rtds-p-20;
    }

    .rtds-banner__description {
        @apply rtds-text-base 2xl:rtds-text-lg rtds-max-w-[75ch] rtds-space-y-2 rtds-leading-relaxed;
    }
    
    .rtds-banner__image {
        @apply rtds-aspect-video lg:rtds-w-1/3 rtds-flex rtds-justify-center;
    }

    .rtds-banner__image img {
        @apply rtds-object-cover rtds-object-center rtds-w-full rtds-h-full;
    }


    .rtds-banner__action {
        @apply rtds-pt-5;
    }
    
}
  • URL: /components/raw/banner/banner.css
  • Filesystem Path: components/04-organisms/banner/banner.css
  • Size: 673 Bytes

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à

WCAG 2.1

Livello AA — criteri pertinenti:

  • 1.1.1 Contenuti non testuali — l’immagine richiede imgAlt descrittivo; se decorativa usare alt=""
  • 1.3.1 Informazioni e correlazioni — struttura semantica con <section>, <figure> e <h2>
  • 2.4.4 Scopo del collegamento (nel contesto) — il CTA deve avere testo descrittivo; usare srOnlyLabel per aggiungere contesto agli screen reader

Struttura e semantica

  • Il componente è renderizzato come <section class="rtds-banner"> — identifica il banner come regione autonoma della pagina
  • Il titolo è un <h2> — rispetta la gerarchia degli heading nella pagina
  • L’immagine è racchiusa in <figure> — markup semanticamente corretto per immagini illustrative

Attributi ARIA

Attributo Valori Condizione
alt su <img> stringa descrittiva o "" sempre presente — vuoto se decorativa

Screen reader

  • Il parametro srOnlyLabel nel contesto del button aggiunge testo nascosto al CTA per fornire contesto (es. "su Titolo Banner")
  • L’immagine viene descritta dall’imgAlt; se il titolo descrive già il contenuto, alt="" è appropriato

Esempi di Utilizzo

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