Regione Toscana Design System

Banner Onboarding: Compact 

<section class="rtds-banner-onboarding rtds-banner-onboarding--logo rtds-bg-gradient-04 rtds-shadow-md rtds-rounded-lg rtds-overflow-hidden rtds-banner-onboarding--compact">

    <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="" srcset="/images/me-toscana-logo.png 1x, /images/me-toscana-logo@2x.png 2x" sizes="(max-width: 768px) 100vw, 242px" alt="Logo alt text" 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>L’area personale del sito della Regione Toscana che integra newsletter personalizzate, servizi e il chatbot chiedilo a me, per una Regione trasparente, facile da capire e a misura delle persone.</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-group/button rtds-btn--primary">
                <span>
                    Registrati adesso

                    <span class="rtds-sr-only"> su Me.Toscana</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>

</section>
 
{% extends '@banner-onboarding' %}
{% block classes %}{{ super() }} rtds-banner-onboarding--compact{% endblock classes %}
{% block ctaHorizontalPadding %} rtds-px-4 md:rtds-px-6{% endblock ctaHorizontalPadding %}
{% block contentClasses %}{{ super() }} lg:rtds-gap-8{% endblock contentClasses %}
{% block ctaMdAlignmentClasses %} md:rtds-justify-end md:rtds-items-center{% endblock ctaMdAlignmentClasses %}
 
{
  "title": null,
  "description": "L’area personale del sito della Regione Toscana che integra newsletter personalizzate, servizi e il chatbot chiedilo a me, per una Regione trasparente, facile da capire e a misura delle persone.",
  "logo": {
    "path": "/images/me-toscana-logo.png",
    "srcset": "/images/me-toscana-logo.png 1x, /images/me-toscana-logo@2x.png 2x",
    "sizesAttribute": "(max-width: 768px) 100vw, 242px",
    "alt": "",
    "width": 242,
    "height": 127
  },
  "cta": [
    {
      "variant": "--icon-right",
      "context": {
        "classes": "rtds-btn--primary",
        "href": "#",
        "label": "Registrati adesso",
        "srOnlyLabel": " su Me.Toscana"
      }
    }
  ],
  "mainImg": null,
  "srOnlyHeading": "Me.Toscana.it"
}
  • Content: 
    @layer components {
    .rtds-banner-onboarding--logo .rtds-banner-onboarding__content {
        grid-template-areas: "logo text" "cta cta";
        grid-template-columns: 1fr 2fr;
    }

    .rtds-banner-onboarding--logo .rtds-banner-onboarding__logo {
        grid-area: logo;
    }

    .rtds-banner-onboarding--logo .rtds-banner-onboarding__description {
        font-size: 0.875rem;
        line-height: 1.65;
    }

    .rtds-banner-onboarding--logo .rtds-banner-onboarding__text {
        grid-area: text;
    }

    .rtds-banner-onboarding--logo .rtds-banner-onboarding__cta {
        grid-area: cta;
        z-index: 1;
    }

    .rtds-banner-onboarding--logo .rtds-banner-onboarding__image {
        grid-area: cta;
        position: relative;
        overflow: hidden;
    }

    .rtds-banner-onboarding--logo .rtds-banner-onboarding__image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        /*clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);*/
    }

    @media (min-width: 768px) {
        .rtds-banner-onboarding--logo .rtds-banner-onboarding__content {
            grid-template-areas: "logo text image" "logo cta image";
            grid-template-columns: 1.3fr 4fr 1.5fr;
        }

        .rtds-banner-onboarding--logo .rtds-banner-onboarding__image {
            grid-area: image;
            aspect-ratio: initial;
        }

        .rtds-banner-onboarding--logo .rtds-banner-onboarding__image img {
            clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 100%);
        }

        .rtds-banner-onboarding--logo:where(:not(.rtds-banner-onboarding--compact)) .rtds-banner-onboarding__text {
            padding-bottom: 0;
        }

        .rtds-banner-onboarding--compact .rtds-banner-onboarding__content {
            grid-template-areas: "logo text cta" "logo text cta";
            grid-template-columns: 140px 3fr 2fr;
        }

    }

    @media (min-width: 1024px) {
        .rtds-banner-onboarding--logo .rtds-banner-onboarding__description {
            font-size: 1rem;
        }
    }

    @media (min-width: 1536px) {
        .rtds-banner-onboarding--logo {
            max-width: 1280px;
        }

        .rtds-banner-onboarding--logo .rtds-banner-onboarding__description {
            font-size: 1.125rem;
        }

        .rtds-banner-onboarding--logo .rtds-banner-onboarding__content {
            grid-template-columns: 1fr 4fr 250px;
        }


        .rtds-banner-onboarding--compact .rtds-banner-onboarding__content {
            grid-template-columns: 140px 2.5fr 1fr;
        }
    }


}
  • URL: /components/raw/banner-onboarding/banner-onboarding.css
  • Filesystem Path: components/09-others/banner-onboarding/banner-onboarding.css
  • Size: 2.6 KB

No notes defined.