Regione Toscana Design System

Links: Column 

<section class="rtds-section rtds-section--links rtds-py-8 md:rtds-py-12">
    <div class="rtds-space-y-4">
        <div class="rtds-section-header rtds-section-header--links">
            <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">

                    <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>

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

                </div>

            </div>
        </div>

        <div class="">

            <ul role="list" class="xl:rtds-columns-2 xl:rtds-gap-12">

                <li class="rtds-border-b rtds-border-gray-03">
                    <a href="#" class="rtds-text-link rtds-leading-snug">

                        <svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-flex-shrink-0 rtds-flex-grow-0" aria-hidden="true" focusable="false" role="img">
                            <use href="../../icons.svg#solid--link" />
                        </svg>

                        Agenzia europea per la sicurezza alimentare - EFSA

                    </a>
                </li>

                <li class="rtds-border-b rtds-border-gray-03">
                    <a href="#" class="rtds-text-link rtds-leading-snug">

                        <svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-flex-shrink-0 rtds-flex-grow-0" aria-hidden="true" focusable="false" role="img">
                            <use href="../../icons.svg#solid--link" />
                        </svg>

                        Agenzia europea per la sicurezza alimentare - EFSA

                    </a>
                </li>

                <li class="rtds-border-b rtds-border-gray-03">
                    <a href="#" class="rtds-text-link rtds-leading-snug">

                        <svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-flex-shrink-0 rtds-flex-grow-0" aria-hidden="true" focusable="false" role="img">
                            <use href="../../icons.svg#solid--link" />
                        </svg>

                        Agenzia europea per la sicurezza alimentare - EFSA

                    </a>
                </li>

                <li class="rtds-border-b rtds-border-gray-03">
                    <a href="#" class="rtds-text-link rtds-leading-snug">

                        <svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-flex-shrink-0 rtds-flex-grow-0" aria-hidden="true" focusable="false" role="img">
                            <use href="../../icons.svg#solid--link" />
                        </svg>

                        Agenzia europea per la sicurezza alimentare - EFSA

                    </a>
                </li>

                <li class="rtds-border-b rtds-border-gray-03">
                    <a href="#" class="rtds-text-link rtds-leading-snug">

                        <svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-flex-shrink-0 rtds-flex-grow-0" aria-hidden="true" focusable="false" role="img">
                            <use href="../../icons.svg#solid--link" />
                        </svg>

                        Agenzia europea per la sicurezza alimentare - EFSA

                    </a>
                </li>

                <li class="rtds-border-b rtds-border-gray-03">
                    <a href="#" class="rtds-text-link rtds-leading-snug">

                        <svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-flex-shrink-0 rtds-flex-grow-0" aria-hidden="true" focusable="false" role="img">
                            <use href="../../icons.svg#solid--link" />
                        </svg>

                        Agenzia europea per la sicurezza alimentare - EFSA

                    </a>
                </li>

                <li class="rtds-border-b rtds-border-gray-03">
                    <a href="#" class="rtds-text-link rtds-leading-snug">

                        <svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-flex-shrink-0 rtds-flex-grow-0" aria-hidden="true" focusable="false" role="img">
                            <use href="../../icons.svg#solid--link" />
                        </svg>

                        Agenzia europea per la sicurezza alimentare - EFSA

                    </a>
                </li>

                <li class="rtds-border-b rtds-border-gray-03">
                    <a href="#" class="rtds-text-link rtds-leading-snug">

                        <svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-flex-shrink-0 rtds-flex-grow-0" aria-hidden="true" focusable="false" role="img">
                            <use href="../../icons.svg#solid--link" />
                        </svg>

                        Agenzia europea per la sicurezza alimentare - EFSA

                    </a>
                </li>

            </ul>
        </div>
    </div>
</section>
 
<section class="rtds-section rtds-section--links rtds-py-8 md:rtds-py-12">
    <div class="rtds-space-y-4">
        {% render '@section-header--divider-left', { 
            classes: 'rtds-section-header--links',
            heading: 'Link utili'
            }, true %}

        <div class="">
            
            <ul role="list" class="xl:rtds-columns-2 xl:rtds-gap-12">

                {% for i in range(0, items) %}
                    <li class="rtds-border-b rtds-border-gray-03">
                    {% render '@text-link', {
                        label: 'Agenzia europea per la sicurezza alimentare - EFSA',
                        url: ''
                        }, true %}
                    </li>
                {% endfor %}
            </ul>
        </div>
    </div>
</section>
 
{
  "items": 8,
  "heading": "Titolo sezione",
  "verticalDividerLeft": "",
  "verticalDividerRight": true
}

No notes defined.