Regione Toscana Design System

Banner Onboarding: With Wrapper 

<div class="rtds-container rtds-py-8 md:rtds-py-12 rtds-grid rtds-justify-center">

    <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="" 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-heading-3 2xl:rtds-text-2xl rtds-leading-tight">Titolo banner lorem ipsum dolor sit amet</h2>
                <div class="rtds-banner-onboarding__description">
                    <p>Descrizione banner lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</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-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 class="rtds-banner-onboarding__image rtds-aspect-2-1">
                <img src="/images/banner-me-toscana.jpg" alt="" srcset="/images/banner-me-toscana.jpg 241w, /images/banner-me-toscana@2x.jpg 482w, /images/banner-me-toscana@3x.jpg 723w, /images/banner-me-toscana@3-5x.jpg 844w, /images/banner-me-toscana@4x.jpg 964w" sizes="(width &lt;= 767px) 100vw, 27vw" alt="Banner principale" width="482" height="416">
            </div>

        </div>

    </section>

</div>
 
{% extends '@banner-onboarding' %}

{% block wrapperStart %}
<div class="rtds-container rtds-py-8 md:rtds-py-12 rtds-grid rtds-justify-center">
{% endblock wrapperStart %}

{% block wrapperEnd %}
</div>
{% endblock wrapperEnd %}
 
{
  "title": "Titolo banner lorem ipsum dolor sit amet",
  "description": "Descrizione banner lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
  "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": {
    "path": "/images/banner-me-toscana.jpg",
    "srcset": "/images/banner-me-toscana.jpg 241w, /images/banner-me-toscana@2x.jpg 482w, /images/banner-me-toscana@3x.jpg 723w, /images/banner-me-toscana@3-5x.jpg 844w, /images/banner-me-toscana@4x.jpg 964w",
    "sizesAttribute": "(width <= 767px) 100vw, 27vw",
    "alt": "Banner principale",
    "width": 482,
    "height": 416
  }
}
  • 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: 1fr 3fr 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 .rtds-banner-onboarding__text {
            padding-bottom: 0;
        }

        .rtds-banner-onboarding--logo {
            max-width: 1036px;
        }

    }

    @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;
        }
    }


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

No notes defined.