<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="#">
Le mie istanze
<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">
Nuova istanza
</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 md:rtds-col-span-9">
<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">
Nuova istanza
</h1>
</div>
</div>
<div class="rtds-page-header__description rtds-text-base lg:rtds-text-lg">
<p>
Procedimento principale: Codice Procedimento principale
</p>
<!-- metadati -->
<div class="rtds-flex rtds-flex-wrap rtds-items-center rtds-gap-4 rtds-pt-3">
<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-text-xs rtds-font-bold rtds-content-primary"><CONTESTO></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-text-xs rtds-font-bold"><AMMINISTRAZIONE></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-2 md:rtds-gap-0 md:rtds-items-center md:rtds-col-span-3">
<div class="rtds-flex rtds-items-center rtds-gap-3">
<div class="rtds-text-sm rtds-text-gray-600">
Soggetti coinvolti: <strong>3</strong>
</div>
<button type="button" class="rtds-btn
rtds-btn--outlined rtds-btn--s rtds-border-gray-03 rtds-flex-1 rtds-text-black hover:rtds-border-gray-03 hover:rtds-text-black hover:rtds-background-04 focus:rtds-border-gray-03 focus:rtds-text-black focus:rtds-background-04">
Gestisci
</button>
</div>
<div class="rtds-grid rtds-gap-2 md:rtds-gap-0 md:rtds-items-center">
<button type="button" class="rtds-btn
rtds-btn--icon-left rtds-group/button rtds-btn--s 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#outline--arrow-down-tray" />
</svg>
Scarica anteprima
</button>
</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>
{% if description %}
<div class="rtds-page-header__description rtds-text-base lg:rtds-text-lg">
<p>
{{ description|safe }}
</p>
<!-- metadati -->
<div class="rtds-flex rtds-flex-wrap rtds-items-center rtds-gap-4 rtds-pt-3">
<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-text-xs rtds-font-bold rtds-content-primary"><CONTESTO></li>
{% render '@vertical-divider', { width: 'rtds-w-2 md:rtds-w-4', classes: 'rtds-hidden md:rtds-block' }, true %}
<li class="rtds-text-xs rtds-font-bold"><AMMINISTRAZIONE></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 %}
<div class="rtds-grid rtds-gap-2 md:rtds-gap-0 md:rtds-items-center {% if contentRightColumnSpan %} {{ contentRightColumnSpan }}{% endif %}">
<div class="rtds-flex rtds-items-center rtds-gap-3">
<div class="rtds-text-sm rtds-text-gray-600">
Soggetti coinvolti: <strong>3</strong>
</div>
{% render '@button--outlined', { classes: "rtds-btn--s rtds-border-gray-03 rtds-flex-1 rtds-text-black hover:rtds-border-gray-03 hover:rtds-text-black hover:rtds-background-04 focus:rtds-border-gray-03 focus:rtds-text-black focus:rtds-background-04", label: "Gestisci" }, true %}
</div>
{% if cta or actions %}
<div class="rtds-grid rtds-gap-2 md:rtds-gap-0 md:rtds-items-center">
{% 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 %}
</div>
{% endif %}
</div>
{% endblock rightContent %}
{% endblock content %}
</div>
{% endblock contentWrapper %}
</div>
{
"title": "Nuova istanza",
"contentGridTemplateColumns": "rtds-grid-cols-1 md:rtds-grid-cols-12",
"contentLeftColumnSpan": "md:rtds-col-span-9",
"contentRightColumnSpan": "md:rtds-col-span-3",
"backLink": false,
"description": "Procedimento principale: Codice Procedimento principale",
"hasBg": true,
"breadcrumb": {
"items": [
{
"label": "Le mie istanze"
},
{
"label": "Nuova istanza"
}
]
},
"cta": [
{
"variant": "--icon-left-s",
"label": "Scarica anteprima",
"icon": "outline--arrow-down-tray",
"classes": "rtds-btn--s rtds-btn--secondary"
}
]
}
No notes defined.