Regione Toscana Design System

Servizi: Grid 

<section class="rtds-section rtds-section--servizi rtds-py-8 md:rtds-py-12">
    <div class="rtds-container rtds-space-y-4">
        <div class="rtds-section-header rtds-section-header--servizi">
            <div class="rtds-flex rtds-items-center rtds-gap-4 md:rtds-gap-6 rtds-content-01">
                <div class="rtds-flex rtds-flex-wrap rtds-items-center rtds-gap-2 md:rtds-gap-4">

                    <h2 class="rtds-heading-3 md:rtds-heading-2">Servizi</h2>

                    <div class="rtds-vertical-divider rtds-w-4 md:rtds-w-6 lg:rtds-w-8">
                        <img class="rtds-w-full rtds-h-auto" src="/images/vertical-divider.svg" alt="">
                    </div>

                </div>

            </div>
        </div>

        <div class="rtds-servizi-list">
            <div class="rtds-grid rtds-gap-4 md:rtds-gap-5  md:rtds-grid-cols-2 lg:rtds-grid-cols-4 xl:rtds-grid-cols-5">

                <!-- Grid item wrapper -->
                <div class="rtds-col">
                    <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>

                </div>

                <!-- Grid item wrapper -->
                <div class="rtds-col">
                    <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>

                </div>

                <!-- Grid item wrapper -->
                <div class="rtds-col">
                    <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>

                </div>

                <!-- Grid item wrapper -->
                <div class="rtds-col">
                    <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>

                </div>

                <!-- Grid item wrapper -->
                <div class="rtds-col">
                    <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>

                </div>

            </div>

            <div class="rtds-flex rtds-justify-center rtds-py-8">
                <a href="#" class="rtds-btn 
    rtds-btn--icon-right rtds-group/button rtds-btn--secondary rtds-btn--s">

                    vedi tutti i servizi

                    <svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-transition-all rtds-duration-200 rtds-ease-out rtds-transform 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-section rtds-section--servizi rtds-py-8 md:rtds-py-12{% if backgroundClass %} {{ backgroundClass }}{% endif %}">
    <div class="rtds-container rtds-space-y-4">
        {% render '@section-header', { 
            verticalDividerRight: 'true',
            heading: 'Servizi',
            classes: 'rtds-section-header--servizi'
            }, true %}

        <div class="rtds-servizi-list">
            <div class="rtds-grid rtds-gap-4 md:rtds-gap-5{% if gridClass %} {{ gridClass }}{% endif %}">
                {% for i in range(0,items) %}
                    <!-- Grid item wrapper -->
                    <div class="rtds-col">
                        {% render '@card--information-with-gradient' %}
                    </div>
                {% endfor %}
            </div>

            <div class="rtds-flex rtds-justify-center rtds-py-8">
                {% render '@button--icon-right-s',{ href: '#', classes: 'rtds-btn--secondary', label: 'vedi tutti i servizi', hasIcon: 'true' }, true %}
            </div>
        </div>
    </div>

</section>
 
{
  "items": 5,
  "gridClass": " md:rtds-grid-cols-2 lg:rtds-grid-cols-4 xl:rtds-grid-cols-5"
}

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.