<div class="rtds-page-header rtds-container rtds-space-y-2 rtds-page-header--has-bg rtds-page-header--base">
<nav class="rtds-breadcrumb" aria-label="Breadcrumb">
<ol class="rtds-breadcrumb__list">
<li class="rtds-breadcrumb__item">
<a class="rtds-breadcrumb__link" href="#">
Livello 1
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-ml-2" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-right" />
</svg>
</a>
</li>
<li class="rtds-breadcrumb__item">
<a class="rtds-breadcrumb__link" href="#">
Livello 2
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-ml-2" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-right" />
</svg>
</a>
</li>
<li class="rtds-breadcrumb__item">
<a class="rtds-breadcrumb__link" href="#" aria-current="page">
Pagina corrente
</a>
</li>
</ol>
</nav>
<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 rtds-col-span-12 md:rtds-col-span-10">
<div class="rtds-flex rtds-gap-3">
<div class="rtds-page-header__title rtds-space-y-4 rtds-flex-1">
<h1 class="rtds-heading-1">
Titolo pagina <a href='#'>con link</a>
</h1>
</div>
<div class="rtds-flex rtds-justify-end rtds-gap-3">
<div><span class="rtds-chip rtds-chip--category">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-mr-1.5" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--computer-desktop" />
</svg>
<span class="rtds-sr-only">Categoria: </span>
categoria</span></div>
<!-- Actions menu mobile -->
<!-- I menu di editing/azione sono realizzati in due versioni, mobile e desktop -->
<div class="rtds-flex rtds-justify-end rtds-gap-3 md:rtds-hidden">
<div class="rtds-dropdown-menu rtds-dropdown-menu is-dropdown-menu--actions rtds-relative">
<button class="rtds-dropdown-menu__trigger rtds-dropdown-trigger rtds-group rtds-w-full rtds-flex rtds-items-center rtds-p-0 rtds-justify-center" aria-expanded="false" aria-controls="actionsMenuMobile01">
<span class="rtds-sr-only">
Titolo pagina -
Opzioni
</span>
<svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6 rtds-dropdown-menu__trigger-icon" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--cog-6-tooth" />
</svg>
</button>
<ul class="rtds-dropdown-menu__list rtds-hidden rtds-w-[25ch] rtds-absolute rtds-right-0 rtds-top-10 rtds-bg-white rtds-shadow-lg rtds-z-10 rtds-rounded rtds-border rtds-border-gray-01">
<li class="rtds-dropdown-menu__item rtds-group/menu-item">
<a class="rtds-dropdown-menu__link rtds-block rtds-transition" href="">
<div class="rtds-flex rtds-gap-2 rtds-items-center">
<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 rtds-mr-2" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--magnifying-glass-circle" />
</svg>
<span class="rtds-grow">Visualizza profilo</span>
</div>
</a>
</li>
<li class="rtds-dropdown-menu__item rtds-group/menu-item">
<a class="rtds-dropdown-menu__link rtds-block rtds-transition" href="">
<div class="rtds-flex rtds-gap-2 rtds-items-center">
<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 rtds-mr-2" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--pencil" />
</svg>
<span class="rtds-grow">Modifica</span>
</div>
</a>
</li>
<li class="rtds-dropdown-menu__item rtds-group/menu-item">
<a class="rtds-dropdown-menu__link rtds-block rtds-transition" href="">
<div class="rtds-flex rtds-gap-2 rtds-items-center">
<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 rtds-mr-2" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--trash" />
</svg>
<span class="rtds-grow">Cancella</span>
</div>
</a>
</li>
</ul>
</div>
<div class="rtds-dropdown-menu rtds-dropdown-menu is-dropdown-menu--actions rtds-relative">
<button class="rtds-dropdown-menu__trigger rtds-dropdown-trigger rtds-group rtds-w-full rtds-flex rtds-items-center rtds-p-0 rtds-justify-center" aria-expanded="false" aria-controls="actionsMenuMobile02">
<span class="rtds-sr-only">
Titolo pagina -
Opzioni
</span>
<svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6 rtds-dropdown-menu__trigger-icon" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--ellipsis-vertical" />
</svg>
</button>
<ul class="rtds-dropdown-menu__list rtds-hidden rtds-w-[25ch] rtds-absolute rtds-right-0 rtds-top-10 rtds-bg-white rtds-shadow-lg rtds-z-10 rtds-rounded rtds-border rtds-border-gray-01">
<li class="rtds-dropdown-menu__item rtds-group/menu-item">
<a class="rtds-dropdown-menu__link rtds-block rtds-transition" href="">
<div class="rtds-flex rtds-gap-2 rtds-items-center">
<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 rtds-mr-2" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--magnifying-glass-circle" />
</svg>
<span class="rtds-grow">Visualizza profilo</span>
</div>
</a>
</li>
<li class="rtds-dropdown-menu__item rtds-group/menu-item">
<a class="rtds-dropdown-menu__link rtds-block rtds-transition" href="">
<div class="rtds-flex rtds-gap-2 rtds-items-center">
<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 rtds-mr-2" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--pencil" />
</svg>
<span class="rtds-grow">Modifica</span>
</div>
</a>
</li>
<li class="rtds-dropdown-menu__item rtds-group/menu-item">
<a class="rtds-dropdown-menu__link rtds-block rtds-transition" href="">
<div class="rtds-flex rtds-gap-2 rtds-items-center">
<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 rtds-mr-2" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--trash" />
</svg>
<span class="rtds-grow">Cancella</span>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="rtds-page-header__description rtds-text-base lg:rtds-text-lg">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
</p>
<!-- stato e altri metadati -->
<div class="rtds-flex rtds-flex-wrap rtds-items-center rtds-gap-4 rtds-pt-3">
<span class="rtds-text-xs rtds-font-bold rtds-content-primary">STATO</span>
<div class="rtds-vertical-divider rtds-w-2 md:rtds-w-4 rtds-hidden md:rtds-block">
<img class="rtds-w-full rtds-h-auto" src="/images/vertical-divider.svg" alt="">
</div>
<ul class="rtds-flex rtds-flex-wrap rtds-items-center rtds-gap-4 rtds-list-none rtds-p-0 rtds-m-0">
<li class="rtds-flex rtds-items-center rtds-gap-2">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-content-primary" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--user" />
</svg>
<span class="rtds-text-sm rtds-text-gray-600">Autore</span>
</li>
<div class="rtds-vertical-divider rtds-w-2 md:rtds-w-4 rtds-hidden md:rtds-block">
<img class="rtds-w-full rtds-h-auto" src="/images/vertical-divider.svg" alt="">
</div>
<li class="rtds-flex rtds-items-center rtds-gap-2">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-content-primary" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--calendar" />
</svg>
<span class="rtds-text-sm rtds-text-gray-600">28.12.2025 alle 15:00</span>
</li>
<div class="rtds-vertical-divider rtds-w-2 md:rtds-w-4 rtds-hidden md:rtds-block">
<img class="rtds-w-full rtds-h-auto" src="/images/vertical-divider.svg" alt="">
</div>
<li class="rtds-flex rtds-items-center rtds-gap-2">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-content-primary" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--calendar" />
</svg>
<span class="rtds-text-sm rtds-text-gray-600">28.12.2025 alle 15:00</span>
</li>
<div class="rtds-vertical-divider rtds-w-2 md:rtds-w-4 rtds-hidden md:rtds-block">
<img class="rtds-w-full rtds-h-auto" src="/images/vertical-divider.svg" alt="">
</div>
<li class="rtds-flex rtds-items-center rtds-gap-2">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-content-primary" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--calendar" />
</svg>
<span class="rtds-text-sm rtds-text-gray-600">28.12.2025 alle 15:00</span>
</li>
</ul>
</div>
</div>
</div>
<div class="rtds-grid rtds-gap-3 md:rtds-gap-4 md:rtds-items-end rtds-pt-6 md:rtds-pt-0 md:rtds-pl-6 rtds-border-t md:rtds-border-t-0 md:rtds-border-l rtds-border-gray-03 rtds-col-span-12 md:rtds-col-span-2">
<!-- Actions menu desktop -->
<!-- I menu di editing/azione sono realizzati in due versioni, mobile e desktop -->
<div class="rtds-hidden md:rtds-flex md:rtds-justify-end md:rtds-gap-3">
<div class="rtds-dropdown-menu rtds-dropdown-menu is-dropdown-menu--actions rtds-relative">
<button class="rtds-dropdown-menu__trigger rtds-dropdown-trigger rtds-group rtds-w-full rtds-flex rtds-items-center rtds-p-0 rtds-justify-center" aria-expanded="false" aria-controls="actionsMenuDesktop01">
<span class="rtds-sr-only">
Titolo pagina -
Configurazioni
</span>
<svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6 rtds-dropdown-menu__trigger-icon" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--cog-6-tooth" />
</svg>
</button>
<ul class="rtds-dropdown-menu__list rtds-hidden rtds-w-[25ch] rtds-absolute rtds-right-0 rtds-top-10 rtds-bg-white rtds-shadow-lg rtds-z-10 rtds-rounded rtds-border rtds-border-gray-01">
<li class="rtds-dropdown-menu__item rtds-group/menu-item">
<a class="rtds-dropdown-menu__link rtds-block rtds-transition" href="">
<div class="rtds-flex rtds-gap-2 rtds-items-center">
<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 rtds-mr-2" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--magnifying-glass-circle" />
</svg>
<span class="rtds-grow">Visualizza profilo</span>
</div>
</a>
</li>
<li class="rtds-dropdown-menu__item rtds-group/menu-item">
<a class="rtds-dropdown-menu__link rtds-block rtds-transition" href="">
<div class="rtds-flex rtds-gap-2 rtds-items-center">
<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 rtds-mr-2" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--pencil" />
</svg>
<span class="rtds-grow">Modifica</span>
</div>
</a>
</li>
<li class="rtds-dropdown-menu__item rtds-group/menu-item">
<a class="rtds-dropdown-menu__link rtds-block rtds-transition" href="">
<div class="rtds-flex rtds-gap-2 rtds-items-center">
<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 rtds-mr-2" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--trash" />
</svg>
<span class="rtds-grow">Cancella</span>
</div>
</a>
</li>
</ul>
</div>
<div class="rtds-dropdown-menu rtds-dropdown-menu is-dropdown-menu--actions rtds-relative">
<button class="rtds-dropdown-menu__trigger rtds-dropdown-trigger rtds-group rtds-w-full rtds-flex rtds-items-center rtds-p-0 rtds-justify-center" aria-expanded="false" aria-controls="actionsMenuDesktop02">
<span class="rtds-sr-only">
Titolo pagina -
Opzioni
</span>
<svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6 rtds-dropdown-menu__trigger-icon" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--ellipsis-vertical" />
</svg>
</button>
<ul class="rtds-dropdown-menu__list rtds-hidden rtds-w-[25ch] rtds-absolute rtds-right-0 rtds-top-10 rtds-bg-white rtds-shadow-lg rtds-z-10 rtds-rounded rtds-border rtds-border-gray-01">
<li class="rtds-dropdown-menu__item rtds-group/menu-item">
<a class="rtds-dropdown-menu__link rtds-block rtds-transition" href="">
<div class="rtds-flex rtds-gap-2 rtds-items-center">
<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 rtds-mr-2" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--magnifying-glass-circle" />
</svg>
<span class="rtds-grow">Visualizza profilo</span>
</div>
</a>
</li>
<li class="rtds-dropdown-menu__item rtds-group/menu-item">
<a class="rtds-dropdown-menu__link rtds-block rtds-transition" href="">
<div class="rtds-flex rtds-gap-2 rtds-items-center">
<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 rtds-mr-2" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--pencil" />
</svg>
<span class="rtds-grow">Modifica</span>
</div>
</a>
</li>
<li class="rtds-dropdown-menu__item rtds-group/menu-item">
<a class="rtds-dropdown-menu__link rtds-block rtds-transition" href="">
<div class="rtds-flex rtds-gap-2 rtds-items-center">
<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 rtds-mr-2" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--trash" />
</svg>
<span class="rtds-grow">Cancella</span>
</div>
</a>
</li>
</ul>
</div>
</div>
<button type="button" class="rtds-btn
rtds-btn--primary
rtds-btn--s">
Button
</button>
<button type="button" class="rtds-btn
rtds-btn--outlined rtds-btn--s">
Button
</button>
<button type="button" class="rtds-btn
rtds-btn--icon-left rtds-group/button rtds-btn--secondary rtds-btn--s">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-transition-all rtds-duration-200 rtds-ease-out rtds-transform group-hover/button:-rtds-translate-x-1" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-left" />
</svg>
Button icon
</button>
<button type="button" class="rtds-btn
rtds-btn--icon-left rtds-group/button rtds-btn--outlined rtds-btn--s">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-transition-all rtds-duration-200 rtds-ease-out rtds-transform group-hover/button:rtds-scale-125" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--arrow-down-tray" />
</svg>
Button icon
</button>
<a href="" class="rtds-action-link
rtds-action-link--sm rtds-action-link--has-icon
">
Link text
<svg class="rtds-icon rtds-fill-current" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-small-right" />
</svg>
</a>
</div>
<div class="rtds-page-header__bar rtds-grid lg:rtds-flex rtds-pt-4 rtds-gap-5 md:rtds-gap-6 rtds-col-span-12 rtds-border-t rtds-border-gray-03">
<div class="rtds-grid md:rtds-flex rtds-items-center rtds-gap-3 md:rtds-gap-4">
<div class="rtds-content-02 rtds-flex rtds-items-center rtds-gap-2 md:rtds-gap-3">
<div class="rtds-flex rtds-items-center rtds-rounded-full rtds-w-6 rtds-h-6 md:rtds-w-8 md:rtds-h-8 rtds-border-2 rtds-border-secondary">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-6 md:rtds-h-6 rtds-flex-1" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--bell" />
</svg>
</div>
<p class=" rtds-text-xs md:rtds-text-sm rtds-font-bold">
Ci sono 2 notifiche per questa istanza.
</p>
</div>
<div class="rtds-vertical-divider rtds-w-4 md:rtds-w-6 rtds-hidden md:rtds-block">
<img class="rtds-w-full rtds-h-auto" src="/images/vertical-divider.svg" alt="">
</div>
<a href="" class="rtds-action-link
rtds-action-link--sm rtds-action-link--has-icon
">
Link text
<svg class="rtds-icon rtds-fill-current" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-right" />
</svg>
</a>
</div>
<div class="rtds-grid rtds-gap-3 md:rtds-gap-4 md:rtds-flex md:rtds-flex-wrap md:rtds-items-center lg:rtds-ml-auto lg:rtds-justify-end">
<button type="button" class="rtds-btn
rtds-btn--primary
rtds-btn--s">
Button
</button>
<button type="button" class="rtds-btn
rtds-btn--outlined rtds-btn--s">
Button
</button>
<button type="button" class="rtds-btn
rtds-btn--icon-left rtds-group/button rtds-btn--secondary rtds-btn--s">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-transition-all rtds-duration-200 rtds-ease-out rtds-transform group-hover/button:-rtds-translate-x-1" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-left" />
</svg>
Button icon
</button>
<button type="button" class="rtds-btn
rtds-btn--icon-left rtds-group/button rtds-btn--outlined rtds-btn--s">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-transition-all rtds-duration-200 rtds-ease-out rtds-transform group-hover/button:rtds-scale-125" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--arrow-down-tray" />
</svg>
Button icon
</button>
<a href="" class="rtds-action-link
rtds-action-link--sm rtds-action-link--has-icon
">
Link text
<svg class="rtds-icon rtds-fill-current" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-small-right" />
</svg>
</a>
</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-flex rtds-gap-3">
<div class="rtds-page-header__title rtds-space-y-4 rtds-flex-1">
{% 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>
<div class="rtds-flex rtds-justify-end rtds-gap-3">
<div>{% render '@chip--category' %}</div>
<!-- Actions menu mobile -->
<!-- I menu di editing/azione sono realizzati in due versioni, mobile e desktop -->
<div class="rtds-flex rtds-justify-end rtds-gap-3 md:rtds-hidden">
{% render '@dropdown-menu--actions', {
context: 'Titolo pagina',
id: 'actionsMenuMobile01',
triggerIcon: 'outline--cog-6-tooth',
triggerLabel: 'Configurazioni'
}, true %}
{% render '@dropdown-menu--actions', {
context: 'Titolo pagina',
id: 'actionsMenuMobile02',
triggerLabel: 'Opzioni'
}, true %}
</div>
</div>
</div>
{% if description %}
<div class="rtds-page-header__description rtds-text-base lg:rtds-text-lg">
<p>
{{ description|safe }}
</p>
<!-- stato e altri metadati -->
<div class="rtds-flex rtds-flex-wrap rtds-items-center rtds-gap-4 rtds-pt-3">
<span class="rtds-text-xs rtds-font-bold rtds-content-primary">STATO</span>
{% render '@vertical-divider', { width: 'rtds-w-2 md:rtds-w-4', classes: 'rtds-hidden md:rtds-block' }, true %}
<ul class="rtds-flex rtds-flex-wrap rtds-items-center rtds-gap-4 rtds-list-none rtds-p-0 rtds-m-0">
<li class="rtds-flex rtds-items-center rtds-gap-2">
{% render '@icon', {id: 'outline--user', size: 'rtds-w-4 rtds-h-4', classes: 'rtds-content-primary'}, true %}
<span class="rtds-text-sm rtds-text-gray-600">Autore</span>
</li>
{% render '@vertical-divider', { width: 'rtds-w-2 md:rtds-w-4', classes: 'rtds-hidden md:rtds-block' }, true %}
<li class="rtds-flex rtds-items-center rtds-gap-2">
{% render '@icon', {id: 'outline--calendar', size: 'rtds-w-4 rtds-h-4', classes: 'rtds-content-primary'}, true %}
<span class="rtds-text-sm rtds-text-gray-600">28.12.2025 alle 15:00</span>
</li>
{% render '@vertical-divider', { width: 'rtds-w-2 md:rtds-w-4', classes: 'rtds-hidden md:rtds-block' }, true %}
<li class="rtds-flex rtds-items-center rtds-gap-2">
{% render '@icon', {id: 'outline--calendar', size: 'rtds-w-4 rtds-h-4', classes: 'rtds-content-primary'}, true %}
<span class="rtds-text-sm rtds-text-gray-600">28.12.2025 alle 15:00</span>
</li>
{% render '@vertical-divider', { width: 'rtds-w-2 md:rtds-w-4', classes: 'rtds-hidden md:rtds-block' }, true %}
<li class="rtds-flex rtds-items-center rtds-gap-2">
{% render '@icon', {id: 'outline--calendar', size: 'rtds-w-4 rtds-h-4', classes: 'rtds-content-primary'}, true %}
<span class="rtds-text-sm rtds-text-gray-600">28.12.2025 alle 15:00</span>
</li>
</ul>
</div>
</div>
{% endif %}
{% block additionalContent %}
{% endblock additionalContent %}
</div>
{% block rightContent %}
{% if cta or actions %}
<div class="rtds-grid rtds-gap-3 md:rtds-gap-4 md:rtds-items-end rtds-pt-6 md:rtds-pt-0 md:rtds-pl-6 rtds-border-t md:rtds-border-t-0 md:rtds-border-l rtds-border-gray-03{% if contentRightColumnSpan %} {{ contentRightColumnSpan }}{% endif %}">
<!-- Actions menu desktop -->
<!-- I menu di editing/azione sono realizzati in due versioni, mobile e desktop -->
<div class="rtds-hidden md:rtds-flex md:rtds-justify-end md:rtds-gap-3">
{% render '@dropdown-menu--actions', {
context: 'Titolo pagina',
label: 'Configurazioni',
triggerIcon: 'outline--cog-6-tooth',
id: 'actionsMenuDesktop01'
}, true %}
{% render '@dropdown-menu--actions', {
context: 'Titolo pagina',
label: 'Opzioni',
id: 'actionsMenuDesktop02'
}, true %}
</div>
{% if cta is iterable and cta is not string %}
{% for ctaItem in cta %}
{% render '@button' + ctaItem.variant, ctaItem, true %}
{% endfor %}
{% else %}
{% render '@button' + cta.variant, cta, true %}
{% endif %}
{% render '@action-link--has-icon', { classes: 'rtds-action-link--sm' }, true %}
</div>
{% endif %}
{% endblock rightContent %}
<div class="rtds-page-header__bar rtds-grid lg:rtds-flex rtds-pt-4 rtds-gap-5 md:rtds-gap-6 rtds-col-span-12 rtds-border-t rtds-border-gray-03">
<div class="rtds-grid md:rtds-flex rtds-items-center rtds-gap-3 md:rtds-gap-4">
<div class="rtds-content-02 rtds-flex rtds-items-center rtds-gap-2 md:rtds-gap-3">
<div class="rtds-flex rtds-items-center rtds-rounded-full rtds-w-6 rtds-h-6 md:rtds-w-8 md:rtds-h-8 rtds-border-2 rtds-border-secondary">
{% render '@icon', {id: 'outline--bell', size: 'rtds-w-4 rtds-h-4 md:rtds-w-6 md:rtds-h-6', classes: 'rtds-flex-1'}, true %}
</div>
<p class=" rtds-text-xs md:rtds-text-sm rtds-font-bold">
Ci sono 2 notifiche per questa istanza.
</p>
</div>
{% render '@vertical-divider', { width: 'rtds-w-4 md:rtds-w-6', classes: 'rtds-hidden md:rtds-block' }, true %}
{% render '@action-link--has-icon', { classes: 'rtds-action-link--sm', icon: 'mini--chevron-right' }, true %}
</div>
<div class="rtds-grid rtds-gap-3 md:rtds-gap-4 md:rtds-flex md:rtds-flex-wrap md:rtds-items-center lg:rtds-ml-auto lg:rtds-justify-end">
{% if cta is iterable and cta is not string %}
{% for ctaItem in cta %}
{% render '@button' + ctaItem.variant, ctaItem, true %}
{% endfor %}
{% else %}
{% render '@button' + cta.variant, cta, true %}
{% endif %}
{% render '@action-link--has-icon', { classes: 'rtds-action-link--sm' }, true %}
</div>
</div>
{% 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"
}
}
No notes defined.