Regione Toscana Design System

Section header component: Has Cta 

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

            <h2 class="rtds-heading-3 md:rtds-heading-2">Titolo sezione</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>

            <span class="rtds-text-sm rtds-leading-none">

                <a href="" class="rtds-action-link
      rtds-action-link--sm
">
                    Link header

                    <svg class="rtds-icon rtds-fill-current" aria-hidden="true" focusable="false" role="img">
                        <use href="../../icons.svg#mini--arrow-small-right" />
                    </svg>

                </a>
            </span>

        </div>

    </div>
</div>
 
<div class="rtds-section-header{% block classes %}{% if classes %} {{ classes }}{% endif %}{% endblock classes %}">
    <div class="{{ contentWrapperDisplay }} rtds-items-center rtds-gap-4 md:rtds-gap-6 {{ textColor }}{% if contentWrapperClasses %} {{ contentWrapperClasses }}{% endif %}">
        <div class="{{ contentLeftDisplay }} rtds-flex-wrap rtds-items-center rtds-gap-2 md:rtds-gap-4{% if contentLeftClasses %} {{ contentLeftClasses }}{% endif %}">
            {% if verticalDividerLeft %}
                {% render '@vertical-divider',{ width: "rtds-w-4 md:rtds-w-6 lg:rtds-w-8" }, true %}
            {% endif %}
            <h2 class="rtds-heading-3 md:rtds-heading-2">{{ heading }}</h2>
            {% if verticalDividerRight %}
                {% render '@vertical-divider',{ width: "rtds-w-4 md:rtds-w-6 lg:rtds-w-8" }, true %}
            {% endif %}
            {% if sectionHeaderSecondaryContent %}
                {{ sectionHeaderSecondaryContent | safe }}
            {% endif %}
            {% if sectionHeaderCta %}
                <span class="rtds-text-sm rtds-leading-none">
                    {% if sectionHeaderCtaAuxiliaryText %}
                        {{ sectionHeaderCtaAuxiliaryText | safe }}
                    {% endif %}
                    {% render '@action-link--sm',{ label: sectionHeaderCta, hasIcon: 'true', classes: sectionHeaderCtaClasses },true %}
                </span>
            {% endif %}
        </div>

        {% block sectionHeaderRightContent %}
            {% if sectionHeaderRightContent or sectionHeaderRightCta %}
            <span class="rtds-section-header__right-content md:rtds-ml-auto">
                {% if sectionHeaderRightContent %}
                    {{ sectionHeaderRightContent | safe }}
                {% endif %}

                {% if sectionHeaderRightCta %}
                    {% for rightCta in sectionHeaderRightCta %}
                        {% render "@button" + rightCta.variant, rightCta, true %}
                    {% endfor %}
                {% endif %}
            </span>
            {% endif %}
        {% endblock %}
    </div>
</div>
 
{
  "heading": "Titolo sezione",
  "textColor": "rtds-content-01",
  "contentWrapperDisplay": "rtds-flex",
  "contentLeftDisplay": "rtds-flex",
  "verticalDividerRight": true,
  "sectionHeaderCta": "Link header"
}

No notes defined.