Regione Toscana Design System

Servizi: Carousel 

<div class="rtds-container rtds-py-6 md:rtds-pt-10 lg:rtds-pt-12 md:rtds-pb-16">

    <div class="rtds-carousel rtds-carousel--5-cols splide" aria-label="I Servizi della Regione">

        <div class="rtds-carousel__arrows splide__arrows">
            <button class="rtds-carousel__arrow rtds-carousel__arrow--prev splide__arrow splide__arrow--prev">
                <svg class="rtds-icon rtds-fill-current rtds-carousel__arrow-svg" aria-hidden="true" focusable="false" role="img">
                    <use href="../../icons.svg#solid--chevron-right" />
                </svg>

                <span class="rtds-sr-only">Precedente</span>
            </button>
            <button class="rtds-carousel__arrow rtds-carousel__arrow--next splide__arrow splide__arrow--next">
                <svg class="rtds-icon rtds-fill-current rtds-carousel__arrow-svg" aria-hidden="true" focusable="false" role="img">
                    <use href="../../icons.svg#solid--chevron-right" />
                </svg>

                <span class="rtds-sr-only">Successiva</span>
            </button>
        </div>

        <div class="rtds-carousel-wrapper splide__track">
            <ul class="rtds-carousel__list splide__list rtds-space-y-6 md:rtds-space-y-0">

                <li class="rtds-carousel-col splide__slide">
                    <article class="rtds-card rtds-card--information rtds-bg-gradient-04
 is-card-fullclickable rtds-group/card">

                        <div class="rtds-card__content">

                            <div class="rtds-card__heading">

                                <h3 class="rtds-card__title">
                                    <a class="group-hover/card:rtds-underline" href="">

                                        Nunc aliquam phasellus molestie blandit. Nisi, amet, id maecenas diam

                                    </a>
                                </h3>

                            </div>

                            <div class="rtds-card__description ">
                                <p>
                                    Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.
                                </p>
                            </div>

                            <ul class="rtds-card__tags" aria-label="Categorie">

                                <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                        label</span></li>

                                <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                        label</span></li>

                                <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                        label</span></li>

                                <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                        label</span></li>

                            </ul>

                        </div>

                    </article>

                </li>
                <li class="rtds-carousel-col splide__slide">
                    <article class="rtds-card rtds-card--information rtds-bg-gradient-04
 is-card-fullclickable rtds-group/card">

                        <div class="rtds-card__content">

                            <div class="rtds-card__heading">

                                <h3 class="rtds-card__title">
                                    <a class="group-hover/card:rtds-underline" href="">

                                        Servizio 2

                                    </a>
                                </h3>

                            </div>

                            <div class="rtds-card__description ">
                                <p>
                                    Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.
                                </p>
                            </div>

                            <ul class="rtds-card__tags" aria-label="Categorie">

                                <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                        label</span></li>

                                <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                        label</span></li>

                                <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                        label</span></li>

                                <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                        label</span></li>

                            </ul>

                        </div>

                    </article>

                </li>

                <li class="rtds-carousel-col splide__slide">
                    <article class="rtds-card rtds-card--information rtds-bg-gradient-04
 is-card-fullclickable rtds-group/card">

                        <div class="rtds-card__content">

                            <div class="rtds-card__heading">

                                <h3 class="rtds-card__title">
                                    <a class="group-hover/card:rtds-underline" href="">

                                        Nunc aliquam phasellus molestie blandit. Nisi, amet, id maecenas diam

                                    </a>
                                </h3>

                            </div>

                            <div class="rtds-card__description ">
                                <p>
                                    Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.
                                </p>
                            </div>

                            <ul class="rtds-card__tags" aria-label="Categorie">

                                <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                        label</span></li>

                                <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                        label</span></li>

                                <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                        label</span></li>

                                <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                        label</span></li>

                            </ul>

                        </div>

                    </article>

                </li>
                <li class="rtds-carousel-col splide__slide">
                    <article class="rtds-card rtds-card--information rtds-bg-gradient-04
 is-card-fullclickable rtds-group/card">

                        <div class="rtds-card__content">

                            <div class="rtds-card__heading">

                                <h3 class="rtds-card__title">
                                    <a class="group-hover/card:rtds-underline" href="">

                                        Servizio 2

                                    </a>
                                </h3>

                            </div>

                            <div class="rtds-card__description ">
                                <p>
                                    Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.
                                </p>
                            </div>

                            <ul class="rtds-card__tags" aria-label="Categorie">

                                <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                        label</span></li>

                                <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                        label</span></li>

                                <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                        label</span></li>

                                <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                        label</span></li>

                            </ul>

                        </div>

                    </article>

                </li>

                <li class="rtds-carousel-col splide__slide">
                    <article class="rtds-card rtds-card--information rtds-bg-gradient-04
 is-card-fullclickable rtds-group/card">

                        <div class="rtds-card__content">

                            <div class="rtds-card__heading">

                                <h3 class="rtds-card__title">
                                    <a class="group-hover/card:rtds-underline" href="">

                                        Nunc aliquam phasellus molestie blandit. Nisi, amet, id maecenas diam

                                    </a>
                                </h3>

                            </div>

                            <div class="rtds-card__description ">
                                <p>
                                    Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.
                                </p>
                            </div>

                            <ul class="rtds-card__tags" aria-label="Categorie">

                                <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                        label</span></li>

                                <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                        label</span></li>

                                <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                        label</span></li>

                                <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                        label</span></li>

                            </ul>

                        </div>

                    </article>

                </li>
                <li class="rtds-carousel-col splide__slide">
                    <article class="rtds-card rtds-card--information rtds-bg-gradient-04
 is-card-fullclickable rtds-group/card">

                        <div class="rtds-card__content">

                            <div class="rtds-card__heading">

                                <h3 class="rtds-card__title">
                                    <a class="group-hover/card:rtds-underline" href="">

                                        Servizio 2

                                    </a>
                                </h3>

                            </div>

                            <div class="rtds-card__description ">
                                <p>
                                    Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.
                                </p>
                            </div>

                            <ul class="rtds-card__tags" aria-label="Categorie">

                                <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                        label</span></li>

                                <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                        label</span></li>

                                <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                        label</span></li>

                                <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                        label</span></li>

                            </ul>

                        </div>

                    </article>

                </li>

                <li class="rtds-carousel-col splide__slide">
                    <article class="rtds-card rtds-card--information rtds-bg-gradient-04
 is-card-fullclickable rtds-group/card">

                        <div class="rtds-card__content">

                            <div class="rtds-card__heading">

                                <h3 class="rtds-card__title">
                                    <a class="group-hover/card:rtds-underline" href="">

                                        Nunc aliquam phasellus molestie blandit. Nisi, amet, id maecenas diam

                                    </a>
                                </h3>

                            </div>

                            <div class="rtds-card__description ">
                                <p>
                                    Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.
                                </p>
                            </div>

                            <ul class="rtds-card__tags" aria-label="Categorie">

                                <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                        label</span></li>

                                <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                        label</span></li>

                                <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                        label</span></li>

                                <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                        label</span></li>

                            </ul>

                        </div>

                    </article>

                </li>
                <li class="rtds-carousel-col splide__slide">
                    <article class="rtds-card rtds-card--information rtds-bg-gradient-04
 is-card-fullclickable rtds-group/card">

                        <div class="rtds-card__content">

                            <div class="rtds-card__heading">

                                <h3 class="rtds-card__title">
                                    <a class="group-hover/card:rtds-underline" href="">

                                        Servizio 2

                                    </a>
                                </h3>

                            </div>

                            <div class="rtds-card__description ">
                                <p>
                                    Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.
                                </p>
                            </div>

                            <ul class="rtds-card__tags" aria-label="Categorie">

                                <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                        label</span></li>

                                <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                        label</span></li>

                                <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                        label</span></li>

                                <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                        label</span></li>

                            </ul>

                        </div>

                    </article>

                </li>

                <li class="rtds-carousel-col splide__slide">
                    <article class="rtds-card rtds-card--information rtds-bg-gradient-04
 is-card-fullclickable rtds-group/card">

                        <div class="rtds-card__content">

                            <div class="rtds-card__heading">

                                <h3 class="rtds-card__title">
                                    <a class="group-hover/card:rtds-underline" href="">

                                        Nunc aliquam phasellus molestie blandit. Nisi, amet, id maecenas diam

                                    </a>
                                </h3>

                            </div>

                            <div class="rtds-card__description ">
                                <p>
                                    Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.
                                </p>
                            </div>

                            <ul class="rtds-card__tags" aria-label="Categorie">

                                <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                        label</span></li>

                                <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                        label</span></li>

                                <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                        label</span></li>

                                <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                        label</span></li>

                            </ul>

                        </div>

                    </article>

                </li>
                <li class="rtds-carousel-col splide__slide">
                    <article class="rtds-card rtds-card--information rtds-bg-gradient-04
 is-card-fullclickable rtds-group/card">

                        <div class="rtds-card__content">

                            <div class="rtds-card__heading">

                                <h3 class="rtds-card__title">
                                    <a class="group-hover/card:rtds-underline" href="">

                                        Servizio 2

                                    </a>
                                </h3>

                            </div>

                            <div class="rtds-card__description ">
                                <p>
                                    Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.
                                </p>
                            </div>

                            <ul class="rtds-card__tags" aria-label="Categorie">

                                <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                        label</span></li>

                                <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                        label</span></li>

                                <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                        label</span></li>

                                <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                        label</span></li>

                            </ul>

                        </div>

                    </article>

                </li>

                <li class="rtds-carousel-col splide__slide">
                    <article class="rtds-card rtds-card--information rtds-bg-gradient-04
 is-card-fullclickable rtds-group/card">

                        <div class="rtds-card__content">

                            <div class="rtds-card__heading">

                                <h3 class="rtds-card__title">
                                    <a class="group-hover/card:rtds-underline" href="">

                                        Nunc aliquam phasellus molestie blandit. Nisi, amet, id maecenas diam

                                    </a>
                                </h3>

                            </div>

                            <div class="rtds-card__description ">
                                <p>
                                    Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.
                                </p>
                            </div>

                            <ul class="rtds-card__tags" aria-label="Categorie">

                                <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                        label</span></li>

                                <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                        label</span></li>

                                <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                        label</span></li>

                                <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                        label</span></li>

                            </ul>

                        </div>

                    </article>

                </li>
                <li class="rtds-carousel-col splide__slide">
                    <article class="rtds-card rtds-card--information rtds-bg-gradient-04
 is-card-fullclickable rtds-group/card">

                        <div class="rtds-card__content">

                            <div class="rtds-card__heading">

                                <h3 class="rtds-card__title">
                                    <a class="group-hover/card:rtds-underline" href="">

                                        Servizio 2

                                    </a>
                                </h3>

                            </div>

                            <div class="rtds-card__description ">
                                <p>
                                    Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.
                                </p>
                            </div>

                            <ul class="rtds-card__tags" aria-label="Categorie">

                                <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                        label</span></li>

                                <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                        label</span></li>

                                <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                        label</span></li>

                                <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                        label</span></li>

                            </ul>

                        </div>

                    </article>

                </li>

                <li class="rtds-carousel-col splide__slide">
                    <article class="rtds-card rtds-card--information rtds-bg-gradient-04
 is-card-fullclickable rtds-group/card">

                        <div class="rtds-card__content">

                            <div class="rtds-card__heading">

                                <h3 class="rtds-card__title">
                                    <a class="group-hover/card:rtds-underline" href="">

                                        Nunc aliquam phasellus molestie blandit. Nisi, amet, id maecenas diam

                                    </a>
                                </h3>

                            </div>

                            <div class="rtds-card__description ">
                                <p>
                                    Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.
                                </p>
                            </div>

                            <ul class="rtds-card__tags" aria-label="Categorie">

                                <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                        label</span></li>

                                <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                        label</span></li>

                                <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                        label</span></li>

                                <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                        label</span></li>

                            </ul>

                        </div>

                    </article>

                </li>
                <li class="rtds-carousel-col splide__slide">
                    <article class="rtds-card rtds-card--information rtds-bg-gradient-04
 is-card-fullclickable rtds-group/card">

                        <div class="rtds-card__content">

                            <div class="rtds-card__heading">

                                <h3 class="rtds-card__title">
                                    <a class="group-hover/card:rtds-underline" href="">

                                        Servizio 2

                                    </a>
                                </h3>

                            </div>

                            <div class="rtds-card__description ">
                                <p>
                                    Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.
                                </p>
                            </div>

                            <ul class="rtds-card__tags" aria-label="Categorie">

                                <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                        label</span></li>

                                <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                        label</span></li>

                                <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                        label</span></li>

                                <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                        label</span></li>

                            </ul>

                        </div>

                    </article>

                </li>

                <li class="rtds-carousel-col splide__slide">
                    <article class="rtds-card rtds-card--information rtds-bg-gradient-04
 is-card-fullclickable rtds-group/card">

                        <div class="rtds-card__content">

                            <div class="rtds-card__heading">

                                <h3 class="rtds-card__title">
                                    <a class="group-hover/card:rtds-underline" href="">

                                        Nunc aliquam phasellus molestie blandit. Nisi, amet, id maecenas diam

                                    </a>
                                </h3>

                            </div>

                            <div class="rtds-card__description ">
                                <p>
                                    Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.
                                </p>
                            </div>

                            <ul class="rtds-card__tags" aria-label="Categorie">

                                <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                        label</span></li>

                                <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                        label</span></li>

                                <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                        label</span></li>

                                <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                        label</span></li>

                            </ul>

                        </div>

                    </article>

                </li>
                <li class="rtds-carousel-col splide__slide">
                    <article class="rtds-card rtds-card--information rtds-bg-gradient-04
 is-card-fullclickable rtds-group/card">

                        <div class="rtds-card__content">

                            <div class="rtds-card__heading">

                                <h3 class="rtds-card__title">
                                    <a class="group-hover/card:rtds-underline" href="">

                                        Servizio 2

                                    </a>
                                </h3>

                            </div>

                            <div class="rtds-card__description ">
                                <p>
                                    Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.
                                </p>
                            </div>

                            <ul class="rtds-card__tags" aria-label="Categorie">

                                <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                        label</span></li>

                                <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                        label</span></li>

                                <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                        label</span></li>

                                <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                        label</span></li>

                            </ul>

                        </div>

                    </article>

                </li>

                <li class="rtds-carousel-col splide__slide">
                    <article class="rtds-card rtds-card--information rtds-bg-gradient-04
 is-card-fullclickable rtds-group/card">

                        <div class="rtds-card__content">

                            <div class="rtds-card__heading">

                                <h3 class="rtds-card__title">
                                    <a class="group-hover/card:rtds-underline" href="">

                                        Nunc aliquam phasellus molestie blandit. Nisi, amet, id maecenas diam

                                    </a>
                                </h3>

                            </div>

                            <div class="rtds-card__description ">
                                <p>
                                    Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.
                                </p>
                            </div>

                            <ul class="rtds-card__tags" aria-label="Categorie">

                                <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                        label</span></li>

                                <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                        label</span></li>

                                <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                        label</span></li>

                                <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                        label</span></li>

                            </ul>

                        </div>

                    </article>

                </li>
                <li class="rtds-carousel-col splide__slide">
                    <article class="rtds-card rtds-card--information rtds-bg-gradient-04
 is-card-fullclickable rtds-group/card">

                        <div class="rtds-card__content">

                            <div class="rtds-card__heading">

                                <h3 class="rtds-card__title">
                                    <a class="group-hover/card:rtds-underline" href="">

                                        Servizio 2

                                    </a>
                                </h3>

                            </div>

                            <div class="rtds-card__description ">
                                <p>
                                    Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.
                                </p>
                            </div>

                            <ul class="rtds-card__tags" aria-label="Categorie">

                                <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                        label</span></li>

                                <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                        label</span></li>

                                <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                        label</span></li>

                                <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                        label</span></li>

                            </ul>

                        </div>

                    </article>

                </li>

            </ul>
        </div>
    </div>

</div>
 
<div class="rtds-container rtds-py-6 md:rtds-pt-10 lg:rtds-pt-12 md:rtds-pb-16">

        <div class="rtds-carousel rtds-carousel--5-cols splide" aria-label="I Servizi della Regione">
            {# Arrows #}
            <div class="rtds-carousel__arrows splide__arrows">
            <button
                class="rtds-carousel__arrow rtds-carousel__arrow--prev splide__arrow splide__arrow--prev"
            >
                {% render '@icon', {id: 'solid--chevron-right', classes:
                'rtds-carousel__arrow-svg', size: ''}, true %}
                <span class="rtds-sr-only">Precedente</span>
            </button>
            <button
                class="rtds-carousel__arrow rtds-carousel__arrow--next splide__arrow splide__arrow--next"
            >
                {% render '@icon', {id: 'solid--chevron-right', classes:
                'rtds-carousel__arrow-svg', size: ''}, true %}
                <span class="rtds-sr-only">Successiva</span>
            </button>
            </div>

            <div class="rtds-carousel-wrapper splide__track">
                <ul class="rtds-carousel__list splide__list rtds-space-y-6 md:rtds-space-y-0">
                {% for i in range(0,items) %}
                <li class="rtds-carousel-col splide__slide">
                    {% render '@card--information-with-gradient' %}
                </li>
                <li class="rtds-carousel-col splide__slide">
                    {% render '@card--information-with-gradient', {heading: 'Servizio 2', description: 'Descrizione del servizio 2'}, true %}
                </li>
                {% endfor %}
                </ul>
            </div>
        </div>

</div>
 
{
  "items": 9
}

Servizi section

  • Default: complete homepage section
  • carousel: partial component(used in homepage and where it’s needed)
  • grid: section with grid and cta. Cta is shown when items are more than grid columns/grid items number.