Regione Toscana Design System

Page Header Base: Aggiornamento 

<div class="rtds-page-header rtds-container rtds-space-y-2 rtds-page-header--has-bg rtds-page-header--base">

    <div class="rtds-flex rtds-items-center rtds-flex-wrap rtds-gap-1 md:rtds-gap-2">
        <p class="rtds-text-xs md:rtds-body-sm rtds-content-03 rtds-m-0">
            Aggiornamento presente in:
        </p>
        <a href="#" class="rtds-text-link rtds-leading-snug rtds-text-link--s">

            Formazione

        </a>

        <span class="rtds-border-gray-02">|</span>

        <a href="#" class="rtds-text-link rtds-leading-snug rtds-text-link--s">

            Giovani

        </a>

        <span class="rtds-border-gray-02">|</span>

        <a href="#" class="rtds-text-link rtds-leading-snug rtds-text-link--s">

            Nome Tema

        </a>
    </div>

    <div class="rtds-page-header__content rtds-grid rtds-gap-5 md:rtds-gap-12 rtds-grid-cols-1 md:rtds-grid-cols-12">

        <div class="rtds-grid rtds-gap-5 md:rtds-col-span-9">

            <div class="rtds-page-header__title rtds-space-y-4">

                <h1 class="rtds-heading-1">
                    Titolo pagina
                </h1>
            </div>

        </div>

    </div>

</div>
 
<div class="rtds-page-header rtds-container rtds-space-y-2{% if padding %} {{ padding }}{% endif %}{% if hasBg %} rtds-page-header--has-bg{% endif %}{% block classes %} rtds-page-header--base{% if classes %} {{ classes }}{% endif %}{% endblock classes %}">
    {% if backLink %}
    {% render '@back-link--piu-aggiornamenti', { backLink: backLink }, true %}
    {% endif %}
    {% block contentWrapper %}
    <div class="rtds-page-header__content rtds-grid rtds-gap-5 md:rtds-gap-12{% if contentGridTemplateColumns %} {{ contentGridTemplateColumns }}{% endif %}{% block contentWrapperClasses %}{% endblock contentWrapperClasses %}">
        {% block content %}
            <div class="rtds-grid rtds-gap-5{% if contentLeftMaxWidth %} {{ contentLeftMaxWidth }}{% endif %}{% if contentLeftColumnSpan %} {{ contentLeftColumnSpan }}{% endif %}">
                
                <div class="rtds-page-header__title rtds-space-y-4">
                    {% if titleContext %}
                        <span id="pageHeaderTitleContext" class="rtds-heading-4">
                            {{ titleContext|safe }}
                        </span>
                    {% endif %}
                    <{% if isContextBanner %}p{% else %}h1{% endif %}{% if titleContext %} id="pageHeaderTitle" aria-labelledby="pageHeaderTitleContext pageHeaderTitle"{% endif %} class="rtds-heading-1">
                        {{ title|safe }}
                    </{% if isContextBanner %}p{% else %}h1{% endif %}>
                </div>
                {% if description %}
                    <div class="rtds-page-header__description rtds-text-base lg:rtds-text-lg">
                        <p>
                            {{ description|safe }}
                        </p>
                    </div>
                {% endif %}
                
                {% block additionalContent %}
                {% endblock additionalContent %}
            </div>

            {% block rightContent %}
                {% if cta %}
                    <div class="rtds-grid md:rtds-items-center md:rtds-justify-end{% if contentRightColumnSpan %} {{ contentRightColumnSpan }}{% endif %}">
                        {% render '@button--inverted', cta, true %}
                    </div>
                {% endif %}
            {% endblock rightContent %}
        {% endblock content %}
    </div>
    {% endblock contentWrapper %}
</div>
 
{
  "title": "Titolo pagina",
  "contentGridTemplateColumns": "rtds-grid-cols-1 md:rtds-grid-cols-12",
  "contentLeftColumnSpan": "md:rtds-col-span-9",
  "contentRightColumnSpan": "md:rtds-col-span-3",
  "backLink": {
    "label": "Questo aggiornamento è: Nome Tema",
    "icon": "solid--arrow-up",
    "classes": "rtds-content-03"
  },
  "hasBg": true
}

Page header base

Description

Base template for the page header and its variations.

Variations

Header can have a back to link, a title, a description and a background gradient, a cta button.

  • has-bg: header with background gradient, horizontal padding and rounded corners.