Regione Toscana Design System

Section header component: Has Cta Right 

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

        <span class="rtds-section-header__right-content md:rtds-ml-auto">

            <a href="#" class="rtds-btn 
    rtds-btn--icon-right rtds-group/button rtds-btn--secondary rtds-btn--s">

                Link header

                <svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6 group-hover/button:rtds-translate-x-1" aria-hidden="true" focusable="false" role="img">
                    <use href="../../icons.svg#mini--chevron-right" />
                </svg>

            </a>

        </span>

    </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",
  "sectionHeaderRightCta": [
    {
      "label": "Link header",
      "href": "#",
      "classes": "rtds-btn--secondary rtds-btn--s",
      "variant": "--icon-right"
    }
  ]
}

No notes defined.