<div class="rtds-page-header rtds-container rtds-space-y-2 rtds-page-header--base">
<div class="rtds-flex">
<a href="#" class="rtds-text-link rtds-content-03 rtds-text-link--s">
<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--arrow-left" />
</svg>
Torna a: 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', { backLink: backLink }, true %}
{% endif %}
{% block contentWrapper %}
{% if breadcrumb %}
{% render '@breadcrumb', breadcrumb, true %}
{% endif %}
<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 isContextBanner %}p{% else %}h1{% endif %} class="rtds-heading-1">
{% if titleContext %}
<span class="rtds-heading-5 md:rtds-heading-4 rtds-block rtds-pt-3 rtds-pb-1.5 md:rtds-pt-4 md:rtds-pb-2">
{{ titleContext|safe }}
</span>
{% endif %}
{% if titleContext %}<span class="rtds-block">{% endif %}
{{ title|safe }}
{% if titleContext %}</span>{% endif %}
</{% 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 rtds-gap-2 md:rtds-justify-end md:rtds-items-end{% if contentRightColumnSpan %} {{ contentRightColumnSpan }}{% endif %}">
{% for ctaItem in cta %}
{% render '@button' + ctaItem.variant, ctaItem, true %}
{% endfor %}
</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": "Torna a: Nome Tema",
"icon": "solid--arrow-left",
"classes": "rtds-content-03"
}
}
/* Base Heading Component */
@layer components {
}
Base template for the page header and its variations.
Header can have a back to link, a title, a description and a background gradient, a cta button.