Regione Toscana Design System

Section Title Link Text 

<section class="rtds-space-y-4 md:rtds-space-y-6">
    <div>
        <div class="rtds-section-header">
            <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">Titolo sezione</h2>

                </div>

            </div>
        </div>
    </div>
    <ul class="rtds-space-y-4">

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

                Lorem ipsum

            </a>
        </li>

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

                Lorem ipsum

            </a>
        </li>

    </ul>
</section>
 
<section class="rtds-space-y-4 md:rtds-space-y-6">
    <div>
        {% render '@section-header--divider-left' , {heading: title}, true %}
    </div>
    <ul {% if classes %} class="{{ classes }}"{% endif %}>
        {% for link in links %}
            <li>
                {% render '@' + linkVariant, link, true %}
            </li>
        {% endfor %}
    </ul>
</section>
 
{
  "title": "Titolo sezione",
  "linkVariant": "text-link",
  "href": "#",
  "classes": "rtds-space-y-4",
  "links": [
    {
      "label": "Lorem ipsum"
    },
    {
      "label": "Lorem ipsum"
    }
  ]
}

No notes defined.