Regione Toscana Design System

Cta Banner 

<section class="rtds-cta-banner rtds-shadow-md rtds-cta-banner--img-bg" 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 md:rtds-gap-6 rtds-col-span-6 lg:rtds-col-span-7">
            <div class="rtds-space-y-2 rtds-pr-16 ">
                <h2 class="rtds-heading-4">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, aenean id pretium lacus
                </h2>

            </div>

            <div class="rtds-cta-banner__cta  rtds-mt-auto rtds-grid sm:rtds-flex sm:rtds-flex-wrap rtds-gap-2">

                <a href="#" class="rtds-btn 
    rtds-btn--icon-right rtds-group/button rtds-btn--s rtds-btn--inverted">

                    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>

                <a href="#" class="rtds-btn 
    rtds-btn--icon-right rtds-group/button rtds-btn--s rtds-btn--primary">

                    Altro CTA

                    <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-cta-banner{% if hasShadow %} rtds-shadow-md{% endif %}{% if classes %} {{ classes }}{% endif %}{% if imgBg %} rtds-cta-banner--img-bg{% endif %}{% if hasMaxWidth %} rtds-cta-banner--max-width{% endif %}"{% if imgPath %} style="background-image: url({{ imgPath | path }});"{% endif %}>
    <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{% if contentWidth %} {{ contentWidth }}{% endif %}">
            <div class="rtds-space-y-2 rtds-pr-16 ">
                <h2 class="rtds-heading-4">
                    {{ title }}
                </h2>
                {% if description %}
                    <div class="rtds-text-sm lg:rtds-text-base">
                        <p>
                            {{ description }}
                        </p>
                    </div>
                {% endif %}
            </div>

            {% if cta %}
                <div class="rtds-cta-banner__cta {% if ctaClasses %} {{ ctaClasses }} {% endif %} rtds-mt-auto rtds-grid sm:rtds-flex sm:rtds-flex-wrap rtds-gap-2">
                    {% for ctaItem in cta %}
                        {% render '@button' ~ ctaItem.variant, ctaItem.context , true %}
                    {% endfor %}
                </div>
            {% endif %}
        </div>

        {% block rightContent %}
        {% endblock %}

    </div>
</section>
 
{
  "title": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, aenean id pretium lacus",
  "imgPath": "/images/feathers.jpg",
  "ctaLabel": "Scopri di più<span class=\"rtds-sr-only\"> su ** TITOLO BANNER **</span>",
  "contentWidth": "rtds-col-span-6 lg:rtds-col-span-7",
  "cta": [
    {
      "variant": "--icon-right",
      "context": {
        "classes": "rtds-btn--s rtds-btn--inverted",
        "href": "#",
        "label": "Scopri di più<span class=\"rtds-sr-only\"> su ** TITOLO BANNER **</span>"
      }
    },
    {
      "variant": "--icon-right",
      "context": {
        "classes": "rtds-btn--s rtds-btn--primary",
        "href": "#",
        "label": "Altro CTA"
      }
    }
  ]
}
  • Content: 
    @layer components {
    .rtds-cta-banner {
        @apply rtds-grid rtds-rounded-xl rtds-min-h-36;
    }

    .rtds-cta-banner--img-bg {
        @apply rtds-bg-cover rtds-bg-center rtds-relative rtds-overflow-hidden;
    }

    :where(.rtds-cta-banner--img-bg) .rtds-cta-banner__content {
        @apply rtds-relative rtds-text-white;
    }

    /* manage overlay */

    .rtds-cta-banner--img-bg {
        @apply before:rtds-content-[''] before:rtds-absolute before:rtds-top-0 before:rtds-left-0 before:rtds-w-full before:rtds-h-full before:rtds-bg-black before:rtds-opacity-50;
    }

    /* ICON BG RIGHT */

    .rtds-cta-banner--bg-icon-right {
        @apply rtds-bg-no-repeat rtds-bg-[position:right_center];
    }

    .rtds-cta-banner--bg-sviluppo-toscana {
        background-size: 5em; 
        background-position: right bottom 3em;
        background-repeat: no-repeat;
    }

    .rtds-cta-banner--max-width {
        max-width: 500px; /* o il valore che preferisci */
    }
    
    /* Opzionale: arrotonda gli angoli quando c'è il max-width */
    .rtds-cta-banner--max-width {
        border-radius: 8px; /* o il valore del tuo design system */
        overflow: hidden; /* per mantenere il background-image dentro i bordi arrotondati */
    }

    /* ========================================
   VARIANTE 2-COL-TEST
   ======================================== */

.rtds-cta-banner--2-col-test {
    @apply rtds-rounded-2xl rtds-overflow-hidden;
    background-position: center bottom;
    background-size: auto 40%; /* o la dimensione che preferisci */
    padding-bottom: 12rem; /* spazio per l'icona */
}

/* Desktop: icona torna a destra */
@screen lg {
    .rtds-cta-banner--2-col-test {
        background-position: right center;
        background-size: auto 80%;
        padding-bottom: 0;
    }
}

}
  • URL: /components/raw/cta-banner/cta-banner.css
  • Filesystem Path: components/04-organisms/cta-banner/cta-banner.css
  • Size: 1.8 KB

Componente CTA Banner

Componente per la creazione di banner con call-to-action. Include supporto per immagini di sfondo e personalizzazione completa del layout.

Comportamento e Funzionalità

Il componente CTA Banner è progettato per creare sezioni con un layout responsive e personalizzabile. Include:

  • Supporto per immagini di sfondo
  • Layout responsive con griglia
  • Personalizzazione del contenuto e del CTA
  • Supporto per ombreggiature
  • Classi personalizzabili per il contenitore

Accessibilità

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

Struttura

  • Utilizzo di heading semantici per il titolo
  • Supporto per testo nascosto per screen reader nel CTA
  • Struttura semantica con <section>

Markup e Struttura

Il componente è strutturato come segue:

<section class="rtds-cta-banner [hasShadow] [classes] [imgBg]">
    <div class="rtds-grid rtds-grid-cols-1 lg:rtds-grid-cols-12">
        <div class="rtds-cta-banner__content">
            <h2 class="rtds-heading-4">[title]</h2>
            <div class="rtds-cta-banner__cta">
                [CTA Button]
            </div>
        </div>
    </div>
</section>

Configurazioni per lo Sviluppo in Nunjucks

Parametri Disponibili

Contenuto

  • title: Titolo del banner (obbligatorio)
  • imgPath: Percorso dell’immagine di sfondo
  • ctaLabel: Testo del pulsante CTA
  • imgBg: Booleano per attivare l’immagine di sfondo (default: false)
  • hasShadow: Booleano per attivare l’ombra (default: false)
  • classes: Classi CSS aggiuntive per il contenitore
  • ctaClasses: Classi CSS aggiuntive per il contenitore della cta

CTA Button

  • cta: Configurazione del pulsante CTA
    • variant: Variante del pulsante (es. ‘–icon-right’)
    • context: Contesto del pulsante
      • classes: Classi CSS per il pulsante
      • href: URL di destinazione
      • label: Testo del pulsante

Varianti

Il componente include diverse possibilità di personalizzazione:

  1. Default: Banner base con immagine di sfondo e ombra
  2. Senza Immagine: Banner senza immagine di sfondo
  3. Senza Ombra: Banner senza ombreggiatura
  4. Personalizzato: Banner con classi CSS personalizzate

Ogni variante può essere utilizzata come base per personalizzazioni specifiche, mantenendo la coerenza con il design system.