<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" style="background-image: url(../../images/lampadina.png);">
<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-12">
<div class="rtds-space-y-2 rtds-pr-16 ">
<h2 class="rtds-heading-4">
Accedi al servizio
</h2>
<div class="rtds-text-sm lg:rtds-text-base">
<p>
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.
</p>
</div>
</div>
<div class="rtds-cta-banner__cta rtds-justify-end rtds-mt-auto rtds-grid sm:rtds-flex sm:rtds-flex-wrap rtds-gap-2">
<a href="#" class="rtds-btn
rtds-btn--icon rtds-btn--primary"><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" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-right" />
</svg>
<span class="rtds-sr-only">
<span>
</span>
<span class="rtds-sr-only"> su {nome servizio}</span>
</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": "Accedi al servizio",
"imgPath": "/images/lampadina.png",
"ctaLabel": "Scopri di più<span class=\"rtds-sr-only\"> su ** TITOLO BANNER **</span>",
"contentWidth": "rtds-col-span-12",
"cta": [
{
"variant": "--icon",
"context": {
"classes": "rtds-btn--primary",
"href": "#",
"label": "",
"icon": "mini--chevron-right",
"iconTransformType": "translate",
"srOnlyLabel": " su {nome servizio}"
}
}
],
"description": "dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.",
"classes": "rtds-background-03 rtds-cta-banner--bg-icon-right rtds-cta-banner--bg-sviluppo-toscana",
"hasMaxWidth": true,
"ctaClasses": "rtds-justify-end"
}
@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;
}
}
}
Componente per la creazione di banner con call-to-action. Include supporto per immagini di sfondo e personalizzazione completa del layout.
Il componente CTA Banner è progettato per creare sezioni con un layout responsive e personalizzabile. Include:
Il componente è stato progettato seguendo le best practice di accessibilità WCAG 2.1:
<section>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>title: Titolo del banner (obbligatorio)imgPath: Percorso dell’immagine di sfondoctaLabel: Testo del pulsante CTAimgBg: Booleano per attivare l’immagine di sfondo (default: false)hasShadow: Booleano per attivare l’ombra (default: false)classes: Classi CSS aggiuntive per il contenitorectaClasses: Classi CSS aggiuntive per il contenitore della ctacta: Configurazione del pulsante CTAvariant: Variante del pulsante (es. ‘–icon-right’)context: Contesto del pulsanteclasses: Classi CSS per il pulsantehref: URL di destinazionelabel: Testo del pulsanteIl componente include diverse possibilità di personalizzazione:
Ogni variante può essere utilizzata come base per personalizzazioni specifiche, mantenendo la coerenza con il design system.