<div class="rtds-container rtds-mx-auto rtds-px-4 rtds-py-8 rtds-space-y-16">
<div class="rtds-p-4 rtds-rounded rtds-border rtds-border-gray-03 rtds-background-01">
<p class="rtds-text-sm rtds-content-02">
<strong>Preview di test.</strong>
Carica esclusivamente <code>core.css</code> + <code>servizi.css</code>
(senza <code>main.css</code>). Verificare che tutti i componenti si rendano
correttamente e che non vi siano stili mancanti o override inattesi.
</p>
</div>
<section>
<h2 class="rtds-text-2xl rtds-font-bold rtds-mb-2 rtds-pb-2 rtds-border-b rtds-border-gray-03">A. Core — Atoms</h2>
<div class="rtds-space-y-8">
<h3 class="rtds-text-base rtds-font-semibold rtds-content-02 rtds-mb-3">
Button
</h3>
<div class="rtds-flex rtds-flex-wrap rtds-gap-3 rtds-items-center">
<button type="button" class="rtds-btn
rtds-btn--primary
">
Primary
</button>
<button type="button" class="rtds-btn
rtds-btn--secondary ">
Secondary
</button>
<button type="button" class="rtds-btn
rtds-btn--outlined ">
Outlined
</button>
</div>
<h3 class="rtds-text-base rtds-font-semibold rtds-content-02 rtds-mb-3">
Chip
</h3>
<div class="rtds-flex rtds-flex-wrap rtds-gap-3 rtds-items-center">
<span class="rtds-chip has-button-close">
Default
<button class="rtds-chip__close rtds-w-5 rtds-h-5" type="button">
<svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--x-mark" />
</svg>
<span class="rtds-sr-only">Rimuovi Default</span>
</button>
</span>
<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>
<span class="rtds-chip"><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--tag" />
</svg>
<span class="rtds-sr-only">Tag: </span>
Tag</span>
</div>
<h3 class="rtds-text-base rtds-font-semibold rtds-content-02 rtds-mb-3">
Tipografia
</h3>
<div class="rtds-space-y-2">
<p class="rtds-text-xl rtds-font-bold">Titolo H1 — rtds-text-xl font-bold</p>
<p class="rtds-text-base">Testo body — Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<p class="rtds-text-sm rtds-content-02">Testo secondario — rtds-text-sm content-02</p>
<a href="#" class="rtds-link">Link di esempio — rtds-link</a>
</div>
</div>
</section>
<section>
<h2 class="rtds-text-2xl rtds-font-bold rtds-mb-2 rtds-pb-2 rtds-border-b rtds-border-gray-03">B. Core — Molecules</h2>
<div class="rtds-space-y-10">
<h3 class="rtds-text-base rtds-font-semibold rtds-content-02 rtds-mb-3">
Card
</h3>
<div class="rtds-grid rtds-gap-6 md:rtds-grid-cols-2">
<article class="rtds-card rtds-card--news
is-card-fullclickable rtds-group/card">
<picture class="rtds-card__image-wrapper
">
<img class="rtds-card__image" alt="" src="../../images/card-image.jpg" />
</picture>
<div class="rtds-card__content">
<div class="rtds-card__heading">
<h3 class="rtds-card__title">
<a class="group-hover/card:rtds-underline" href="">
Titolo notizia — test core.css
</a>
</h3>
<div class="rtds-card__metadata">
<div class="rtds-card__date">
<time datetime="2025-05-30">30 MAG 2025</time>
</div>
</div>
</div>
<div class="rtds-card__description ">
<p>
Breve testo della notizia. Verifica che card sia stilizzata da core.css.
</p>
</div>
<div class="rtds-card__categories">
<span class="rtds-category ">
Notizie
</span>
</div>
</div>
</article>
<article class="rtds-card rtds-card--news
is-card-fullclickable rtds-group/card">
<picture class="rtds-card__image-wrapper
">
<img class="rtds-card__image" alt="" src="../../images/card-image.jpg" />
</picture>
<div class="rtds-card__content">
<div class="rtds-card__heading">
<h3 class="rtds-card__title">
<a class="group-hover/card:rtds-underline" href="">
Seconda card — verifica grid
</a>
</h3>
<div class="rtds-card__metadata">
<div class="rtds-card__date">
<time datetime="2025-05-30">30 MAG 2025</time>
</div>
</div>
</div>
<div class="rtds-card__description ">
<p>
Se entrambe sono allineate il grid funziona.
</p>
</div>
<div class="rtds-card__categories">
<span class="rtds-category ">
Comunicati
</span>
</div>
</div>
</article>
</div>
<h3 class="rtds-text-base rtds-font-semibold rtds-content-02 rtds-mb-3">
Input field
</h3>
<div class="rtds-max-w-md">
<div class="rtds-input-field rtds-gap-1 ">
<label for="test-input-core" class="rtds-input-field__label">
Campo di testo
</label>
<div class="rtds-input">
<input id="test-input-core" class="rtds-text-sm rtds-input-placeholder" type="text">
</div>
</div>
</div>
<h3 class="rtds-text-base rtds-font-semibold rtds-content-02 rtds-mb-3">
Accordion
</h3>
<div class="rtds-accordion rtds-accordion--default">
<div class="rtds-accordion__item">
<h3 class="rtds-accordion__title rtds-flex rtds-font-bold rtds-heading-3">
<button type="button" aria-expanded="false" class="rtds-accordion__trigger rtds-group rtds-flex rtds-items-center rtds-flex-1 rtds-transition-all" aria-controls="accordionSection-1" id="accordion1id">
<span class="rtds-accordion__trigger-label">
Panel 1 Nunc aliquam phasellus molestie blandit?
</span>
<span class="rtds-accordion__icon rtds-flex rtds-p-2 rtds-ml-auto rtds-h-auto rtds-transition-all rtds-background-02 rtds-rounded group-aria-expanded:rtds-background-primary group-aria-expanded:rtds-text-white ">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-8 md:rtds-h-8 lg:rtds-w-9 lg:rtds-h-9 is-show-more group-aria-expanded:rtds-hidden" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--plus" />
</svg>
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-8 md:rtds-h-8 lg:rtds-w-9 lg:rtds-h-9 is-show-less rtds-hidden group-aria-expanded:rtds-inline-block" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--minus" />
</svg>
</span>
</button>
</h3>
<div id="accordionSection-1" role="region" aria-labelledby="accordion1id" class="rtds-accordion__pane rtds-transition-all" hidden>
<p>Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.</p>
</div>
</div>
<div class="rtds-accordion__item">
<h3 class="rtds-accordion__title rtds-flex rtds-font-bold rtds-heading-3">
<button type="button" aria-expanded="false" class="rtds-accordion__trigger rtds-group rtds-flex rtds-items-center rtds-flex-1 rtds-transition-all" aria-controls="accordionSection-2" id="accordion2id">
<span class="rtds-accordion__trigger-label">
Panel 2 Nunc aliquam phasellus molestie blandit?
</span>
<span class="rtds-accordion__icon rtds-flex rtds-p-2 rtds-ml-auto rtds-h-auto rtds-transition-all rtds-background-02 rtds-rounded group-aria-expanded:rtds-background-primary group-aria-expanded:rtds-text-white ">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-8 md:rtds-h-8 lg:rtds-w-9 lg:rtds-h-9 is-show-more group-aria-expanded:rtds-hidden" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--plus" />
</svg>
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-8 md:rtds-h-8 lg:rtds-w-9 lg:rtds-h-9 is-show-less rtds-hidden group-aria-expanded:rtds-inline-block" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--minus" />
</svg>
</span>
</button>
</h3>
<div id="accordionSection-2" role="region" aria-labelledby="accordion2id" class="rtds-accordion__pane rtds-transition-all" hidden>
<p>Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.</p>
</div>
</div>
<div class="rtds-accordion__item">
<h3 class="rtds-accordion__title rtds-flex rtds-font-bold rtds-heading-3">
<button type="button" aria-expanded="false" class="rtds-accordion__trigger rtds-group rtds-flex rtds-items-center rtds-flex-1 rtds-transition-all" aria-controls="accordionSection-3" id="accordion3id">
<span class="rtds-accordion__trigger-label">
Panel 3 Nunc aliquam phasellus molestie blandit?
</span>
<span class="rtds-accordion__icon rtds-flex rtds-p-2 rtds-ml-auto rtds-h-auto rtds-transition-all rtds-background-02 rtds-rounded group-aria-expanded:rtds-background-primary group-aria-expanded:rtds-text-white ">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-8 md:rtds-h-8 lg:rtds-w-9 lg:rtds-h-9 is-show-more group-aria-expanded:rtds-hidden" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--plus" />
</svg>
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-8 md:rtds-h-8 lg:rtds-w-9 lg:rtds-h-9 is-show-less rtds-hidden group-aria-expanded:rtds-inline-block" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--minus" />
</svg>
</span>
</button>
</h3>
<div id="accordionSection-3" role="region" aria-labelledby="accordion3id" class="rtds-accordion__pane rtds-transition-all" hidden>
<p>Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.</p>
</div>
</div>
</div>
</div>
</section>
<section>
<h2 class="rtds-text-2xl rtds-font-bold rtds-mb-2 rtds-pb-2 rtds-border-b rtds-border-gray-03">C. 07-widgets — Componenti</h2>
<p class="rtds-text-sm rtds-content-02 rtds-mb-6">Usano classi core (@tab, @input-field, @select-field, @button). Verifica la dipendenza tra i due bundle.</p>
<div class="rtds-space-y-10">
<h3 class="rtds-text-base rtds-font-semibold rtds-content-02 rtds-mb-3">
Widget Box
</h3>
<div class="rtds-max-w-sm">
<section class="rtds-widget-box">
<div class="rtds-widget-box__header">
<h2 class="rtds-widget-box__title">Dato semplice</h2>
</div>
<div class="rtds-widget-box__content">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
quos.
</p>
<p>
Ufficio: Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
quos.
</p>
<p>
Email: <a href="mailto:info@example.com">info@example.com</a>
</p>
<p>
Telefono: <a href="tel:0123456789">0123456789</a>
</p>
</div>
<div class="rtds-widget-box__header">
<h2 class="rtds-widget-box__title">Dato semplice con lista</h2>
</div>
<div class="rtds-widget-box__content">
<ul>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</li>
</ul>
</div>
</section>
</div>
<h3 class="rtds-text-base rtds-font-semibold rtds-content-02 rtds-mb-3">
Widget Nav <span class="rtds-text-xs rtds-font-normal">(usa @tab--borderless da core)</span>
</h3>
<nav class="rtds-widget-nav" aria-label="Sezioni atti">
<ul class="rtds-widget-nav__list">
<li>
<a href="#" class="rtds-tab is-tab rtds-tab--borderless
rtds-content-02 rtds-min-w-4
is-active" id="widget-nav-tab-1">
<span class="rtds-tab__label">Dalla giunta</span>
</a>
</li>
<li>
<a href="#" class="rtds-tab is-tab rtds-tab--borderless
rtds-content-02 rtds-min-w-4
" id="widget-nav-tab-2">
<span class="rtds-tab__label">Dal Presidente</span>
</a>
</li>
<li>
<a href="#" class="rtds-tab is-tab rtds-tab--borderless
rtds-content-02 rtds-min-w-4
" id="widget-nav-tab-3">
<span class="rtds-tab__label">dai Dirigenti</span>
</a>
</li>
<li>
<a href="#" class="rtds-tab is-tab rtds-tab--borderless
rtds-content-02 rtds-min-w-4
" id="widget-nav-tab-3">
<span class="rtds-tab__label">di Protezione Civile (dal 20/01/22)</span>
</a>
</li>
</ul>
</nav>
<h3 class="rtds-text-base rtds-font-semibold rtds-content-02 rtds-mb-3">
Widget Chip Filters
</h3>
<ul class="rtds-flex rtds-flex-wrap rtds-gap-2" aria-label="Filtri attivi">
<li><span class="rtds-chip has-button-close rtds-chip--filter">
ALESSANDRA NARDINI
<button class="rtds-chip__close rtds-w-5 rtds-h-5" type="button">
<svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--x-mark" />
</svg>
<span class="rtds-sr-only">Rimuovi ALESSANDRA NARDINI</span>
</button>
</span></li>
<li>
<span class="rtds-chip has-button-close rtds-chip--filter">
Data atto inizio: 23/05/2024
<button class="rtds-chip__close rtds-w-5 rtds-h-5" type="button">
<svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--x-mark" />
</svg>
<span class="rtds-sr-only">Rimuovi Data atto inizio: 23/05/2024</span>
</button>
</span>
</li>
<li><span class="rtds-chip has-button-close rtds-chip--filter">
Oggetto: Atto
<button class="rtds-chip__close rtds-w-5 rtds-h-5" type="button">
<svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--x-mark" />
</svg>
<span class="rtds-sr-only">Rimuovi Oggetto: Atto</span>
</button>
</span></li>
<li>
<span class="rtds-chip has-button-close rtds-chip--filter">
Tipologia atto: Lorem ipsum dolor sit
amet
<button class="rtds-chip__close rtds-w-5 rtds-h-5" type="button">
<svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--x-mark" />
</svg>
<span class="rtds-sr-only">Rimuovi Tipologia atto: Lorem ipsum dolor sit
amet</span>
</button>
</span>
</li>
<li>
<span class="rtds-chip has-button-close rtds-chip--filter">
Numero atto - da numero: 12
<button class="rtds-chip__close rtds-w-5 rtds-h-5" type="button">
<svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--x-mark" />
</svg>
<span class="rtds-sr-only">Rimuovi Numero atto - da numero: 12</span>
</button>
</span>
</li>
</ul>
<h3 class="rtds-text-base rtds-font-semibold rtds-content-02 rtds-mb-3">
Widget Composite Field
</h3>
<!-- FIELDSET -->
<fieldset class="rtds-input-field rtds-input-fieldset">
<legend class="rtds-input-field__label">
Legend fieldset
</legend>
<div class="rtds-grid sm:rtds-flex rtds-gap-4 sm:rtds-gap-6 sm:rtds-items-start">
<div class="rtds-input-field rtds-gap-1 sm:rtds-flex-1 ">
<label for="idField1" class="rtds-input-field__label rtds-sr-only">
Label campo 1
</label>
<div class="rtds-input">
<input id="idField1" class="rtds-text-sm rtds-input-placeholder" type="text" aria-describedBy="inputDesc1">
</div>
<span class="rtds-input-field__hint">
<span class="rtds-input-field__description" id="inputDesc1">
Descrizione campo 1
</span>
</span>
</div>
<div class="rtds-input-field rtds-gap-1 sm:rtds-flex-1 ">
<label for="idField2" class="rtds-input-field__label rtds-sr-only">
Label campo 2
</label>
<div class="rtds-input">
<input id="idField2" class="rtds-text-sm rtds-input-placeholder" type="text" aria-describedBy="inputDesc2">
</div>
<span class="rtds-input-field__hint">
<span class="rtds-input-field__description" id="inputDesc2">
Descrizione campo 2
</span>
</span>
</div>
</div>
</fieldset>
<h3 class="rtds-text-base rtds-font-semibold rtds-content-02 rtds-mb-3">
Widget Field Row
</h3>
<!-- FIELD ROW -->
<div class="rtds-field-row">
<!-- INPUT - HAS MAX-WIDTH 50% -->
<div class="rtds-input-field rtds-select-field">
<label for="selectId" class="rtds-input-field__label">
Struttura di vertice
</label>
<div class="rtds-select">
<select id="selectId" class="" aria-describedBy="selectStrutturaVertice">
<option value="1">Text</option>
<option value="2">Option 1</option>
<option value="3">Option 2</option>
<option value="4">Option 3</option>
<option value="5">Option 4</option>
<option value="6">Option 5</option>
</select>
</div>
<span class="rtds-input-field__hint">
<span class="rtds-input-field__description" id="selectStrutturaVertice">
Ricerca struttura di riferimento
</span>
</span>
</div>
</div>
<h3 class="rtds-text-base rtds-font-semibold rtds-content-02 rtds-mb-3">
Widget Search <span class="rtds-text-xs rtds-font-normal">(usa @input-field, @select-field, @button da core — test di integrazione più pesante)</span>
</h3>
<div class="rtds-accordion rtds-p-0 rtds-accordion--widget">
<h2 class="rtds-accordion__title rtds-flex rtds-font-bold rtds-p-2 rtds-text-base rtds-background-03">
<button type="button" aria-expanded="true" class="rtds-accordion__trigger rtds-group rtds-flex rtds-items-center rtds-flex-1 rtds-transition-all" aria-controls="accordionSearch-1" id="accordionSearch1id">
<span class="rtds-accordion__trigger-label">
Ricerca avanzata
</span>
<span class="rtds-accordion__icon rtds-flex rtds-p-2 rtds-ml-auto rtds-h-auto rtds-transition-all">
<svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6 rtds-transition-all is-expand-arrow group-aria-expanded:rtds-rotate-180" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-up" />
</svg>
</span>
</button>
</h2>
<div id="accordionSearch-1" role="region" aria-labelledby="accordionSearch1id" class="rtds-accordion__pane rtds-transition-all rtds-px-2">
<form name="search-form">
<div class="rtds-grid rtds-gap-6">
<!-- ROW 1 -->
<div class="rtds-field-row">
<!-- FIELDSET DATA -->
<fieldset class="rtds-input-field rtds-input-fieldset">
<legend class="rtds-input-field__label">
Data atto
</legend>
<div class="rtds-grid sm:rtds-flex rtds-gap-4 sm:rtds-gap-6 sm:rtds-items-start">
<div class="rtds-input-field rtds-gap-1 sm:rtds-flex-1 ">
<label for="attoStart" class="rtds-input-field__label rtds-sr-only">
Data inizio atto
</label>
<div class="rtds-input">
<input id="attoStart" class="rtds-text-sm rtds-input-placeholder" type="date" aria-describedBy="inputDataInizioAtto">
</div>
<span class="rtds-input-field__hint">
<span class="rtds-input-field__description" id="inputDataInizioAtto">
Anno inizio ricerca - formato gg/mm/aaaa
</span>
</span>
</div>
<div class="rtds-input-field rtds-gap-1 sm:rtds-flex-1 ">
<label for="attoEnd" class="rtds-input-field__label rtds-sr-only">
Data fine atto
</label>
<div class="rtds-input">
<input id="attoEnd" class="rtds-text-sm rtds-input-placeholder" type="date" aria-describedBy="inputDataFineAtto">
</div>
<span class="rtds-input-field__hint">
<span class="rtds-input-field__description" id="inputDataFineAtto">
Anno fine ricerca - formato gg/mm/aaaa
</span>
</span>
</div>
</div>
</fieldset>
<!-- FIELDSET NUMERO ATTO -->
<fieldset class="rtds-input-field rtds-input-fieldset">
<legend class="rtds-input-field__label">
Numero atto
</legend>
<div class="rtds-grid sm:rtds-flex rtds-gap-4 sm:rtds-gap-6 sm:rtds-items-start">
<div class="rtds-input-field rtds-gap-1 sm:rtds-flex-1 ">
<label for="attoNumberStart" class="rtds-input-field__label rtds-sr-only">
Numero atto - inizio
</label>
<div class="rtds-input">
<input id="attoNumberStart" class="rtds-text-sm rtds-input-placeholder" type="text" aria-describedBy="inputNumeroAttoInizio">
</div>
<span class="rtds-input-field__hint">
<span class="rtds-input-field__description" id="inputNumeroAttoInizio">
Da numero
</span>
</span>
</div>
<div class="rtds-input-field rtds-gap-1 sm:rtds-flex-1 ">
<label for="attoNumberEnd" class="rtds-input-field__label rtds-sr-only">
Numero atto - fine
</label>
<div class="rtds-input">
<input id="attoNumberEnd" class="rtds-text-sm rtds-input-placeholder" type="text" aria-describedBy="inputNumeroAttoFine">
</div>
<span class="rtds-input-field__hint">
<span class="rtds-input-field__description" id="inputNumeroAttoFine">
A numero
</span>
</span>
</div>
</div>
</fieldset>
</div>
<!-- ROW 2 -->
<div class="rtds-field-row">
<div class="rtds-input-field rtds-gap-1 ">
<label for="oggetto" class="rtds-input-field__label">
Oggetto
</label>
<div class="rtds-input">
<input id="oggetto" class="rtds-text-sm rtds-input-placeholder" type="text" aria-describedBy="inputOggetto">
</div>
<span class="rtds-input-field__hint">
<span class="rtds-input-field__description" id="inputOggetto">
Ricerca esatta del testo inserito
</span>
</span>
</div>
<div class="rtds-input-field rtds-select-field">
<label for="selectId" class="rtds-input-field__label">
Assessore
</label>
<div class="rtds-select">
<select id="selectId" class="" aria-describedBy="selectAssessore">
<option value="1">Text</option>
<option value="2">Option 1</option>
<option value="3">Option 2</option>
<option value="4">Option 3</option>
<option value="5">Option 4</option>
<option value="6">Option 5</option>
</select>
</div>
<span class="rtds-input-field__hint">
<span class="rtds-input-field__description" id="selectAssessore">
Seleziona nome dell'assessore
</span>
</span>
</div>
<div class="rtds-input-field rtds-select-field">
<label for="selectId" class="rtds-input-field__label">
Tipologia Atto
</label>
<div class="rtds-select">
<select id="selectId" class="" aria-describedBy="selectAtto">
<option value="1">Text</option>
<option value="2">Option 1</option>
<option value="3">Option 2</option>
<option value="4">Option 3</option>
<option value="5">Option 4</option>
<option value="6">Option 5</option>
</select>
</div>
<span class="rtds-input-field__hint">
<span class="rtds-input-field__description" id="selectAtto">
Ricerca tipologia atto
</span>
</span>
</div>
</div>
<!-- ROW 3 -->
<div class="rtds-field-row">
<div class="rtds-input-field rtds-select-field">
<label for="selectId" class="rtds-input-field__label">
Struttura di vertice
</label>
<div class="rtds-select">
<select id="selectId" class="" aria-describedBy="selectStrutturaVertice">
<option value="1">Text</option>
<option value="2">Option 1</option>
<option value="3">Option 2</option>
<option value="4">Option 3</option>
<option value="5">Option 4</option>
<option value="6">Option 5</option>
</select>
</div>
<span class="rtds-input-field__hint">
<span class="rtds-input-field__description" id="selectStrutturaVertice">
Ricerca struttura di riferimento
</span>
</span>
</div>
<div class="rtds-input-field rtds-gap-1 ">
<label for="procedimento" class="rtds-input-field__label">
Procedimento
</label>
<div class="rtds-input">
<input id="procedimento" class="rtds-text-sm rtds-input-placeholder" type="text" aria-describedBy="inputProcedimento">
</div>
<span class="rtds-input-field__hint">
<span class="rtds-input-field__description" id="inputProcedimento">
Ricerca tipologia procedimento
</span>
</span>
</div>
</div>
<!-- ROW 4 - DEM0 -->
<div class="rtds-field-row">
<div class="rtds-input-field rtds-select-field">
<label for="selectId" class="rtds-input-field__label">
Field demo 1
</label>
<div class="rtds-select">
<select id="selectId" class="" aria-describedBy="selectDemo1">
<option value="1">Text</option>
<option value="2">Option 1</option>
<option value="3">Option 2</option>
<option value="4">Option 3</option>
<option value="5">Option 4</option>
<option value="6">Option 5</option>
</select>
</div>
<span class="rtds-input-field__hint">
<span class="rtds-input-field__description" id="selectDemo1">
Ricerca struttura di riferimento
</span>
</span>
</div>
<div class="rtds-input-field rtds-gap-1 ">
<label for="demo2" class="rtds-input-field__label">
Field demo 2
</label>
<div class="rtds-input">
<input id="demo2" class="rtds-text-sm rtds-input-placeholder" type="text" aria-describedBy="inputDemo2">
</div>
<span class="rtds-input-field__hint">
<span class="rtds-input-field__description" id="inputDemo2">
Ricerca tipologia procedimento
</span>
</span>
</div>
<div class="rtds-input-field rtds-select-field">
<label for="selectId" class="rtds-input-field__label">
Field demo 3
</label>
<div class="rtds-select">
<select id="selectId" class="" aria-describedBy="selectDemo3">
<option value="1">Text</option>
<option value="2">Option 1</option>
<option value="3">Option 2</option>
<option value="4">Option 3</option>
<option value="5">Option 4</option>
<option value="6">Option 5</option>
</select>
</div>
<span class="rtds-input-field__hint">
<span class="rtds-input-field__description" id="selectDemo3">
Ricerca struttura di riferimento
</span>
</span>
</div>
<div class="rtds-input-field rtds-gap-1 ">
<label for="demo4" class="rtds-input-field__label">
Field demo 4
</label>
<div class="rtds-input">
<input id="demo4" class="rtds-text-sm rtds-input-placeholder" type="text" aria-describedBy="inputDemo4">
</div>
<span class="rtds-input-field__hint">
<span class="rtds-input-field__description" id="inputDemo4">
Ricerca tipologia procedimento
</span>
</span>
</div>
</div>
<!-- ROW ACTIONS -->
<div class="rtds-form-actions rtds-flex rtds-justify-start">
<button type="submit" class="rtds-btn
rtds-btn--icon-right rtds-group/button rtds-btn--secondary">
Cerca
<svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5 group-hover/button:rtds-translate-x-1" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-right" />
</svg>
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
<section>
<h2 class="rtds-text-2xl rtds-font-bold rtds-mb-2 rtds-pb-2 rtds-border-b rtds-border-gray-03">D. 08-servizi — Card Smart</h2>
<p class="rtds-text-sm rtds-content-02 rtds-mb-6">Estende @card da core. Verifica il pattern triple fallback CSS (--_card-smart-bg, --_card-smart-border, --_card-smart-shadow).</p>
<div class="rtds-space-y-10">
<h3 class="rtds-text-base rtds-font-semibold rtds-content-02 rtds-mb-3">
Standard — complete, accordion, agenda, notifiche
</h3>
<div class="rtds-space-y-4">
<article class="rtds-card rtds-card--information rtds-card--information-02 rtds-card--compact-header is-card-fullclickable rtds-group/card">
<div class="rtds-card__content !rtds-gap-3">
<div class="rtds-card__heading">
<div class="rtds-flex rtds-items-center rtds-justify-between rtds-w-full">
<h3 class="rtds-card__title">
<div class="rtds-flex rtds-items-center rtds-gap-2">
<svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5 rtds-text-success" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#solid--check-circle" />
</svg>
<span class="rtds-sr-only">Etichetta check</span>
<span><Codice istanza></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>
<span><Nome soggetto></span>
</div>
</h3>
<div class="rtds-flex rtds-items-center rtds-gap-2">
<span class="rtds-chip rtds-chip--category">
<span class="rtds-sr-only">Stato</span>
Stato</span>
<div class="rtds-hidden md:rtds-flex md:rtds-justify-end md:rtds-gap-3">
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><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" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#solid--eye" />
</svg>
<span class="rtds-sr-only">
Visualizza dettagli
</span>
</button>
<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>
</div>
</div>
</div>
<div class="rtds-flex rtds-items-center rtds-gap-2">
<a class="rtds-link rtds-text-xs" href="#"><CONTESTO></a>
<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>
<span class="rtds-text-xs rtds-font-medium"><COMUNE></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>
<span class="rtds-text-xs rtds-font-medium "><CODICE PROCEDIMENTO PRINCIPALE></span>
</div>
<div class="rtds-card__description !rtds-text-sm">
<p>
Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et. Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et. Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et. Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.
</p>
</div>
<div class="rtds-border-t rtds-border-gray-03 rtds-pt-3">
<div class="rtds-flex rtds-flex-wrap rtds-items-center rtds-gap-4">
<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>
</article>
<article class="rtds-card rtds-card--information rtds-card--information-02 rtds-card--compact-header">
<div class="rtds-card__content rtds-gap-3">
<div class="rtds-card__heading">
<div class="rtds-flex rtds-items-center rtds-justify-between rtds-w-full rtds-flex-wrap md:rtds-flex-nowrap rtds-gap-2">
<div class="rtds-flex rtds-items-center rtds-gap-2 rtds-flex-1 rtds-min-w-0">
<h3 class="rtds-accordion__title rtds-flex rtds-font-bold rtds-flex-1 rtds-min-w-0">
<button type="button" class="rtds-accordion__trigger rtds-group rtds-flex rtds-items-center rtds-flex-1 rtds-transition-all rtds-p-1 rtds-content-primary rtds-js-accordion-toggle" data-role="button" aria-expanded="false" aria-controls="accordion-content">
<span class="rtds-accordion__icon rtds-flex rtds-flex-shrink-0 rtds-transition-transform rtds-mr-2">
<svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5 rtds-transition-transform rtds-transition-all is-expand-arrow group-aria-expanded:rtds-rotate-180" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--chevron-down" />
</svg>
</span>
<span class="rtds-accordion__trigger-label rtds-content-01 rtds-flex rtds-items-center rtds-gap-2 rtds-flex-wrap sm:rtds-flex-nowrap rtds-flex-1 rtds-min-w-0">
<span class="rtds-truncate"><Codice istanza></span>
<span class="rtds-truncate"><Nome soggetto></span>
</span>
</button>
</h3>
</div>
<div class="rtds-flex rtds-items-center rtds-gap-2 rtds-flex-shrink-0 rtds-w-full md:rtds-w-auto rtds-justify-end">
<span class="rtds-chip rtds-chip--category">
<span class="rtds-sr-only">Stato</span>
Stato</span>
<div class="rtds-flex rtds-items-center rtds-gap-2">
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03 "><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" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#solid--eye" />
</svg>
<span class="rtds-sr-only">
<span>
Button label
</span>
<span class="rtds-sr-only">Visualizza dettagli</span>
</button>
<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 rtds-border-none" 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>
</div>
</div>
</div>
<div class="rtds-flex rtds-items-center rtds-gap-2 rtds-flex-wrap rtds-ml-6 sm:rtds-ml-8 md:rtds-ml-10">
<a class="rtds-link rtds-text-xs" href="#"><CONTESTO></a>
<span class="rtds-text-xs rtds-font-medium"><COMUNE></span>
<span class="rtds-text-xs rtds-font-medium rtds-break-all sm:rtds-break-normal"><CODICE PROCEDIMENTO PRINCIPALE></span>
</div>
<div id="accordion-content" role="region" aria-labelledby="accordion-trigger" class="rtds-accordion__pane rtds-transition-all rtds-hidden rtds-ml-6 sm:rtds-ml-8 md:rtds-ml-10">
<div class="rtds-card__description rtds-text-sm">
<p class="rtds-text-sm md:rtds-text-base">
Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et. Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et. Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et. Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.
</p>
</div>
<div class="rtds-border-t rtds-border-gray-03 rtds-pt-3 rtds-mt-4">
<div class="rtds-flex rtds-flex-wrap rtds-items-center rtds-gap-2 sm:rtds-gap-4">
<ul class="rtds-flex rtds-flex-wrap rtds-items-center rtds-gap-2 sm:rtds-gap-4 rtds-list-none rtds-p-0 rtds-m-0">
<li class="rtds-flex rtds-items-center rtds-gap-1 sm:rtds-gap-2">
<svg class="rtds-icon rtds-fill-current rtds-w-3 rtds-h-3 sm:rtds-w-4 sm:rtds-h-4 rtds-content-primary" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--user" />
</svg>
<span class="rtds-text-xs sm:rtds-text-sm rtds-text-gray-600">Autore</span>
</li>
<li class="rtds-flex rtds-items-center rtds-gap-1 sm:rtds-gap-2">
<svg class="rtds-icon rtds-fill-current rtds-w-3 rtds-h-3 sm:rtds-w-4 sm:rtds-h-4 rtds-content-primary" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--calendar" />
</svg>
<span class="rtds-text-xs sm:rtds-text-sm rtds-text-gray-600 rtds-whitespace-nowrap">28.12.2025 alle 15:00</span>
</li>
<li class="rtds-flex rtds-items-center rtds-gap-1 sm:rtds-gap-2">
<svg class="rtds-icon rtds-fill-current rtds-w-3 rtds-h-3 sm:rtds-w-4 sm:rtds-h-4 rtds-content-primary" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--calendar" />
</svg>
<span class="rtds-text-xs sm:rtds-text-sm rtds-text-gray-600 rtds-whitespace-nowrap">28.12.2025 alle 15:00</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</article>
<article class="rtds-card rtds-card--information rtds-card--information-02 rtds-card--compact-header is-card-fullclickable rtds-group/card">
<div class="rtds-card__content rtds-gap-3">
<div class="rtds-card__heading">
<div class="rtds-flex rtds-items-start rtds-justify-between rtds-w-full rtds-gap-4">
<div class="rtds-flex rtds-gap-2">
<h3 class="rtds-text-xl rtds-font-bold rtds-content-01">
<span class="rtds-text-xl rtds-font-bold rtds-uppercase rtds-content-primary"> <Tipologia scadenza> </span>
<Oggetto scadenza>
</h3>
</div>
</div>
<div class="rtds-flex rtds-items-start rtds-justify-between rtds-w-full">
<div class="rtds-flex-1">
<time class="rtds-text-xl rtds-font-bold rtds-content-01 rtds-block rtds-mb-2" datetime="2024-07-23">
23.07.2024
</time>
<div class="rtds-flex rtds-flex-wrap rtds-items-center rtds-gap-2 sm:rtds-gap-4">
<ul class="rtds-flex rtds-flex-wrap rtds-items-center rtds-gap-2 rtds-list-none rtds-p-0 rtds-m-0">
<li class="rtds-flex rtds-items-center rtds-gap-1 sm:rtds-gap-2">
<span class="rtds-text-xs sm:rtds-text-sm rtds-content-primary rtds-uppercase">Suap</span>
</li>
<li role="presentation" aria-hidden="true">
<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>
<li class="rtds-flex rtds-items-center rtds-gap-1 sm:rtds-gap-2">
<span class="rtds-text-xs sm:rtds-text-sm rtds-text-gray-600 rtds-whitespace-nowrap"><Amministrazione></span>
</li>
</ul>
</div>
</div>
<div class="rtds-flex rtds-items-center rtds-gap-2 rtds-flex-shrink-0">
<span class="rtds-chip rtds-chip--category rtds-chip--outlined">
<span class="rtds-sr-only">Stato: </span>
Pagato</span>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-border-none rtds-p-0 rtds-content-01 hover:rtds-text-white hover:rtds-bg-black focus:rtds-content-03"><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" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--arrow-up-on-square" />
</svg>
<span class="rtds-sr-only">
Visualizza dettagli
</span>
</button>
</div>
</div>
</div>
<div class="rtds-card__description rtds-justify-self-center md:rtds-justify-self-start">
<p class="rtds-text-base rtds-content-03">
Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.
</p>
</div>
<div class="rtds-mt-2">
<div class="rtds-flex rtds-flex-wrap rtds-items-center rtds-justify-between rtds-gap-4">
<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">Nome soggetto</span>
</li>
<li role="presentation" aria-hidden="true">
<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>
<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--document-text" />
</svg>
<span class="rtds-text-sm rtds-text-gray-600">Numero istanza</span>
</li>
</ul>
<div class="rtds-flex rtds-justify-center sm:rtds-justify-end rtds-w-full sm:rtds-w-auto">
<div class="rtds-flex-shrink-0">
<a href="#" class="rtds-action-link
rtds-action-link--has-icon rtds-content-primary rtds-action-link--sm
">
Vai ai pagamenti
<svg class="rtds-icon rtds-fill-current rtds-transition-all hover:rtds-translate-x-1" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--arrow-right" />
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
</article>
<article class="rtds-card rtds-card--information rtds-card--information-02 is-card-fullclickable rtds-group/card">
<div class="rtds-card__content rtds-gap-3">
<div class="rtds-card__heading">
<div class="rtds-flex rtds-items-center rtds-justify-between rtds-w-full">
<h3 class="rtds-card__title">
<div class="rtds-flex rtds-items-center rtds-gap-2">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-content-02" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#solid--circle" />
</svg>
<span>Istanza approvata</span>
</div>
</h3>
</div>
</div>
<div class="rtds-card__description rtds-ml-6 lg:rtds-pr-[280px] !rtds-text-sm">
<p>
Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et. Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et. Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.
</p>
</div>
<div class="rtds-ml-6 rtds-space-y-2 md:rtds-space-y-0 md:rtds-flex md:rtds-items-baseline md:rtds-justify-between md:rtds-gap-2">
<ul class="rtds-card__tags rtds-items-center" aria-label="Categorie">
<li class="rtds-text-xs rtds-font-bold rtds-content-03">10.01.2025</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-uppercase rtds-font-semibold rtds-content-primary">Avanzamento istanza</li>
</ul>
<div class="rtds-flex rtds-justify-end rtds-w-full sm:rtds-w-auto">
<div class="rtds-flex-shrink-0">
<a href="#" class="rtds-btn
rtds-btn--icon rtds-action-link--has-icon rtds-content-01 hover:rtds-text-white hover:rtds-bg-black focus:rtds-content-03"><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" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--chevron-right" />
</svg>
<span class="rtds-sr-only">
Visualizza dettagli
</span>
</a>
</div>
</div>
</div>
</div>
</article>
</div>
<h3 class="rtds-text-base rtds-font-semibold rtds-content-02 rtds-mb-3">
Standard — shortcut, scadenza
</h3>
<div class="rtds-grid rtds-gap-4 md:rtds-grid-cols-2">
<article class="rtds-card rtds-card--smart-shortcut rtds-background-08 is-card-fullclickable rtds-group/card">
<div class="rtds-card__content">
<div class="rtds-card__heading">
<h3 class="rtds-card__title rtds-flex-1 rtds-content-inverse">
<a class="rtds-flex rtds-items-center rtds-w-full rtds-no-underline hover:rtds-underline" href="">
<div class="rtds-flex rtds-gap-5">
<svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5 rtds-content-inverse rtds-mt-1" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--plus-circle" />
</svg>
<span class="rtds-pr-4">Crea una nuova istanza</span>
</div>
<div class="rtds-ml-auto">
<svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5 rtds-content-inverse" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#solid--chevron-right" />
</svg>
</div>
</a>
</h3>
</div>
</div>
</article>
<article class="rtds-card rtds-card--event rtds-background-08 rtds-relative rtds-card--smart-scadenza is-card-fullclickable rtds-group/card">
<div class="rtds-card__content">
<div class="rtds-flex rtds-flex-col rtds-gap-2 rtds-order-2">
<button type="button" class="rtds-btn
rtds-btn--icon rtds-content-inverse hover:rtds-content-02 hover:rtds-bg-white rtds-absolute rtds-top-4 rtds-right-4 rtds-btn--s"><svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-right" />
</svg>
<span class="rtds-sr-only">
Clicca sull'oggetto
</span>
</button>
<div class="rtds-card__heading">
<h3 class="rtds-card__title rtds-content-inverse">
<a class="group-hover/card:rtds-underline" href="">
<OGGETTO>
</a>
</h3>
</div>
<ul class="rtds-card__tags" aria-label="Categorie">
<li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
<Tipologia></span></li>
</ul>
</div>
<div class="rtds-card__date">
<time class="rtds-content-inverse rtds-grid rtds-gap-0.5 rtds-justify-end rtds-text-right" datetime="2023-06-25/2023-06-30">
<span class="rtds-content-inverse rtds-text-lg rtds-leading-none rtds-italic rtds-font-extrabold">25/30</span>
<span class="rtds-text-xs">2025</span>
</time>
</div>
</div>
</article>
</div>
<h3 class="rtds-text-base rtds-font-semibold rtds-content-02 rtds-mb-3">
Trascinabile (default / selected) <span class="rtds-text-xs rtds-font-normal">(verifica --_card-smart-bg e --_card-smart-border sullo stato selected)</span>
</h3>
<div class="rtds-space-y-3">
<div class="rtds-card rtds-card--smart-trascinabile rtds-cursor-pointer is-card-fullclickable rtds-group/card">
<div class="rtds-card__content rtds-p-0">
<div class="rtds-flex rtds-flex-col rtds-gap-2 rtds-order-2">
<div class="rtds-card__heading">
<div class="rtds-flex rtds-items-center rtds-justify-between rtds-gap-4">
<h3 class="rtds-card__title rtds-flex-1">
<span class="rtds-flex rtds-items-center rtds-gap-3">
<svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5 rtds-content-03 rtds-mt-0.5 rtds-flex-shrink-0" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#solid--cube-transparent" />
</svg>
<span class="rtds-flex-1 rtds-text-sm rtds-font-bold rtds-content-01">Codice oggetto con titolo medio/lungo a discrezione dell'autore</span>
</span>
<div class="rtds-flex rtds-gap-3 rtds-text-sm rtds-font-normal rtds-content-03 rtds-mt-2">
<span>Creato il <time datetime="28.01.25">28.01.25</time></span>
<span>|</span>
<span><span class="rtds-sr-only">Autore:</span> Mario Rossi</span>
</div>
</h3>
<div class="rtds-flex-shrink-0 rtds-self-center">
<svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5 rtds-content-primary rtds-cursor-pointer hover:rtds-content-03 rtds-mr-2.5" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--squares-2x2" />
</svg>
</div>
</div>
</div>
<div>
<a href="true" class="rtds-action-link
rtds-action-link--sm rtds-text-xs rtds-action-link--has-icon
">
Mostra anteprima
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--chevron-right" />
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="rtds-card rtds-card--smart-trascinabile rtds-cursor-pointer is-selected is-card-fullclickable rtds-group/card">
<div class="rtds-card__content rtds-p-0">
<div class="rtds-flex rtds-flex-col rtds-gap-2 rtds-order-2">
<div class="rtds-card__heading">
<div class="rtds-flex rtds-items-center rtds-justify-between rtds-gap-4">
<h3 class="rtds-card__title rtds-flex-1">
<span class="rtds-flex rtds-items-center rtds-gap-3">
<svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5 rtds-content-03 rtds-mt-0.5 rtds-flex-shrink-0" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#solid--cube-transparent" />
</svg>
<span class="rtds-flex-1 rtds-text-sm rtds-font-bold rtds-content-01">Codice oggetto con titolo medio/lungo a discrezione dell'autore</span>
</span>
<div class="rtds-flex rtds-gap-3 rtds-text-sm rtds-font-normal rtds-content-03 rtds-mt-2">
<span>Creato il <time datetime="28.01.25">28.01.25</time></span>
<span>|</span>
<span><span class="rtds-sr-only">Autore:</span> Mario Rossi</span>
</div>
</h3>
<div class="rtds-flex-shrink-0 rtds-self-center">
<svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5 rtds-content-primary rtds-cursor-pointer hover:rtds-content-03 rtds-mr-2.5" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--squares-2x2" />
</svg>
</div>
</div>
</div>
<div>
<a href="true" class="rtds-action-link
rtds-action-link--sm rtds-text-xs rtds-action-link--has-icon
">
Mostra anteprima
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--chevron-right" />
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
<h3 class="rtds-text-base rtds-font-semibold rtds-content-02 rtds-mb-3">
Selezione — radio sm, selected, checkbox sm
</h3>
<div class="rtds-space-y-3">
<article class="rtds-card rtds-card--smart-trascinabile is-card-fullclickable rtds-group/card">
<div class="rtds-grid md:rtds-flex rtds-w-full md:rtds-items-center md:rtds-justify-between rtds-gap-2">
<div class="rtds-input rtds-input-field rtds-input-radio rtds-input--sm rtds-flex-1">
<div class="rtds-flex rtds-gap-2 rtds-items-center">
<input id="radio-1" name="radio-1" class=" " type="radio">
<label class="rtds-input-radio__label rtds-flex-1 rtds-text-sm md:rtds-text-base" for="radio-1">
Nome procedimento
</label>
</div>
</div>
</div>
</article>
<article class="rtds-card
rtds-card--smart-trascinabile is-selected
is-card-fullclickable rtds-group/card">
<div class="rtds-grid md:rtds-flex rtds-w-full md:rtds-items-center md:rtds-justify-between rtds-gap-2">
<div class="rtds-input rtds-input-field rtds-input-radio rtds-input--sm rtds-flex-1">
<div class="rtds-flex rtds-gap-2 rtds-items-center">
<input id="radio-1" name="radio-1" class=" " type="radio" checked>
<label class="rtds-input-radio__label rtds-flex-1 rtds-text-sm md:rtds-text-base" for="radio-1">
Nome procedimento
</label>
</div>
</div>
</div>
</article>
<article class="rtds-card rtds-card--smart-trascinabile is-card-fullclickable rtds-group/card">
<div class="rtds-grid md:rtds-flex rtds-w-full md:rtds-items-center md:rtds-justify-between rtds-gap-2">
<div class="rtds-input rtds-input-field rtds-input-checkbox rtds-input--sm rtds-flex-1">
<div class="rtds-flex rtds-gap-2 rtds-items-center">
<input id="radio-1" name="radio-1" class=" " type="checkbox">
<label class="rtds-input-checkbox__label rtds-flex-1 rtds-text-sm md:rtds-text-base" for="radio-1">
Nome procedimento
</label>
</div>
</div>
</div>
</article>
</div>
<h3 class="rtds-text-base rtds-font-semibold rtds-content-02 rtds-mb-3">
Selezione large — radio, checkbox, selected
</h3>
<div class="rtds-space-y-3">
<article class="rtds-card rtds-card--smart-trascinabile is-card-fullclickable rtds-group/card">
<div class="rtds-grid md:rtds-flex rtds-w-full md:rtds-items-center md:rtds-justify-between rtds-gap-2">
<div class="rtds-input rtds-input-field rtds-input-radio rtds-flex-1">
<div class="rtds-flex rtds-gap-2 rtds-items-center">
<input id="radio-1" name="radio-1" class=" " type="radio">
<label class="rtds-input-radio__label rtds-flex-1 rtds-text-sm md:rtds-text-base" for="radio-1">
Nome procedimento
</label>
</div>
</div>
<div class="rtds-flex rtds-items-center rtds-justify-end rtds-gap-2">
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><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" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--trash" />
</svg>
<span class="rtds-sr-only">
Elimina Nome Procedimento
</span>
</button>
</div>
</div>
</article>
<article class="rtds-card rtds-card--smart-trascinabile is-card-fullclickable rtds-group/card">
<div class="rtds-grid md:rtds-flex rtds-w-full md:rtds-items-center md:rtds-justify-between rtds-gap-2">
<div class="rtds-input rtds-input-field rtds-input-checkbox rtds-flex-1">
<div class="rtds-flex rtds-gap-2 rtds-items-center">
<input id="radio-1" name="radio-1" class=" " type="checkbox">
<label class="rtds-input-checkbox__label rtds-flex-1 rtds-text-sm md:rtds-text-base" for="radio-1">
Nome procedimento
</label>
</div>
</div>
<div class="rtds-flex rtds-items-center rtds-justify-end rtds-gap-2">
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><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" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--trash" />
</svg>
<span class="rtds-sr-only">
Elimina Nome Procedimento
</span>
</button>
</div>
</div>
</article>
<article class="rtds-card
rtds-card--smart-trascinabile is-selected
is-card-fullclickable rtds-group/card">
<div class="rtds-grid md:rtds-flex rtds-w-full md:rtds-items-center md:rtds-justify-between rtds-gap-2">
<div class="rtds-input rtds-input-field rtds-input-checkbox rtds-flex-1">
<div class="rtds-flex rtds-gap-2 rtds-items-center">
<input id="radio-1" name="radio-1" class=" " type="checkbox" checked>
<label class="rtds-input-checkbox__label rtds-flex-1" for="radio-1">
Nome procedimento
</label>
</div>
</div>
<div class="rtds-flex rtds-items-center rtds-justify-end rtds-gap-2">
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><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" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--trash" />
</svg>
<span class="rtds-sr-only">
Elimina Nome Procedimento
</span>
</button>
</div>
</div>
</article>
</div>
<h3 class="rtds-text-base rtds-font-semibold rtds-content-02 rtds-mb-3">
Selezione procedimento — tutte le varianti
</h3>
<div class="rtds-space-y-3">
<article class="rtds-card
rtds-card--smart-trascinabile rtds-background-03 !rtds-cursor-grab
is-card-fullclickable rtds-group/card">
<div class="rtds-grid md:rtds-flex rtds-w-full md:rtds-items-center md:rtds-justify-between rtds-gap-2 rtds-p-2">
<div class="rtds-flex rtds-items-center rtds-gap-2">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 rtds-flex-shrink-0 rtds-transition-opacity rtds-opacity-0 group-hover/card:rtds-opacity-100 group-focus-within/card:rtds-opacity-100" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#grab-handle" />
</svg>
<p class="rtds-text-sm md:rtds-text-base rtds-font-medium">Nome procedimento</p>
</div>
<div class="rtds-flex rtds-items-center rtds-justify-end rtds-gap-2">
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><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" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-up" />
</svg>
<span class="rtds-sr-only">
Sposta sopra Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><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" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-down" />
</svg>
<span class="rtds-sr-only">
Sposta sotto Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><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" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--trash" />
</svg>
<span class="rtds-sr-only">
Elimina Nome Procedimento
</span>
</button>
</div>
</div>
</article>
<article class="rtds-card
rtds-card--smart-trascinabile rtds-background-03 !rtds-cursor-grab
rtds-background-03 !rtds-cursor-grab
is-card-fullclickable rtds-group/card">
<div class="rtds-grid md:rtds-flex rtds-w-full md:rtds-items-center md:rtds-justify-between rtds-gap-2 rtds-p-2">
<div class="rtds-input rtds-input-field rtds-input-radio rtds-flex-1">
<div class="rtds-flex rtds-gap-2 rtds-items-center">
<input id="radio-1" name="radio-1" class=" " type="radio">
<label class="rtds-input-radio__label rtds-flex-1 rtds-text-sm md:rtds-text-base" for="radio-1">
Nome procedimento
</label>
</div>
</div>
<div class="rtds-flex rtds-items-center rtds-justify-end rtds-gap-2">
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><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" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-up" />
</svg>
<span class="rtds-sr-only">
Sposta sopra Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><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" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-down" />
</svg>
<span class="rtds-sr-only">
Sposta sotto Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><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" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--trash" />
</svg>
<span class="rtds-sr-only">
Elimina Nome Procedimento
</span>
</button>
</div>
</div>
</article>
<article class="rtds-card
rtds-card--smart-trascinabile rtds-background-03 !rtds-cursor-grab
rtds-background-03 !rtds-cursor-grab
is-card-fullclickable rtds-group/card">
<div class="rtds-grid md:rtds-flex rtds-w-full md:rtds-items-center md:rtds-justify-between rtds-gap-2 rtds-p-2">
<div class="rtds-input rtds-input-field rtds-input-checkbox rtds-flex-1">
<div class="rtds-flex rtds-gap-2 rtds-items-center">
<input id="radio-1" name="radio-1" class=" " type="checkbox">
<label class="rtds-input-checkbox__label rtds-flex-1 rtds-text-sm md:rtds-text-base" for="radio-1">
Nome procedimento
</label>
</div>
</div>
<div class="rtds-flex rtds-items-center rtds-justify-end rtds-gap-2">
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><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" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-up" />
</svg>
<span class="rtds-sr-only">
Sposta sopra Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><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" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-down" />
</svg>
<span class="rtds-sr-only">
Sposta sotto Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><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" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--trash" />
</svg>
<span class="rtds-sr-only">
Elimina Nome Procedimento
</span>
</button>
</div>
</div>
</article>
<article class="rtds-card
rtds-card--smart-trascinabile rtds-background-03 !rtds-cursor-grab
rtds-background-03 !rtds-cursor-grab
rtds-background-03 !rtds-cursor-grab is-selected
is-card-fullclickable rtds-group/card">
<div class="rtds-grid md:rtds-flex rtds-w-full md:rtds-items-center md:rtds-justify-between rtds-gap-2 rtds-p-2">
<div class="rtds-input rtds-input-field rtds-input-checkbox rtds-flex-1">
<div class="rtds-flex rtds-gap-2 rtds-items-center">
<input id="radio-1" name="radio-1" class=" " type="checkbox" checked>
<label class="rtds-input-checkbox__label rtds-flex-1 rtds-text-sm md:rtds-text-base" for="radio-1">
Nome procedimento
</label>
</div>
</div>
<div class="rtds-flex rtds-items-center rtds-justify-end rtds-gap-2">
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><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" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-up" />
</svg>
<span class="rtds-sr-only">
Sposta sopra Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><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" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-down" />
</svg>
<span class="rtds-sr-only">
Sposta sotto Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><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" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--trash" />
</svg>
<span class="rtds-sr-only">
Elimina Nome Procedimento
</span>
</button>
</div>
</div>
</article>
</div>
</div>
</section>
<section>
<h2 class="rtds-text-2xl rtds-font-bold rtds-mb-2 rtds-pb-2 rtds-border-b rtds-border-gray-03">E. 08-servizi — Altri componenti</h2>
<div class="rtds-space-y-10">
<h3 class="rtds-text-base rtds-font-semibold rtds-content-02 rtds-mb-3">
Accordion Smart
</h3>
<div class="rtds-accordion rtds-accordion--smart rtds-gap-0">
<div class="rtds-accordion__item rtds-border-b rtds-border-gray-01 rtds-py-3">
<div class="rtds-flex rtds-items-center rtds-justify-between rtds-gap-2 rtds-pr-3">
<div class="rtds-flex rtds-items-center rtds-gap-2 rtds-flex-1">
<h3 class="rtds-accordion__title rtds-flex rtds-font-bold rtds-text-base rtds-content-01">
<button type="button" aria-expanded="false" class="rtds-accordion__trigger rtds-group rtds-flex rtds-items-center rtds-text-left rtds-flex-1 rtds-transition-all rtds-p-1 rtds-content-primary" aria-controls="accordionSection-1" id="accordion1id">
<span class="rtds-accordion__icon rtds-flex rtds-p-2 rtds-ml-auto rtds-h-auto rtds-transition-all">
<svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6 rtds-transition-all is-expand-arrow group-aria-expanded:rtds-rotate-180" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-up" />
</svg>
</span>
<span class="rtds-accordion__trigger-label rtds-content-01 rtds-flex rtds-items-center rtds-flex-1 rtds-min-w-0 rtds-text-base lg:rtds-text-lg">
Titolo panel
</span>
</button>
</h3>
</div>
<div class="rtds-flex rtds-items-center rtds-gap-2 rtds-ml-auto rtds-justify-end">
<span class="rtds-chip rtds-chip--status is-in-progress">
<span class="rtds-sr-only">Da pagare</span>
Da pagare</span>
<span class="rtds-chip rtds-chip--category">
<span class="rtds-sr-only">Stato</span>
Stato</span>
<div class="rtds-flex rtds-items-center rtds-gap-2">
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><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" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#solid--pencil-square" />
</svg>
<span class="rtds-sr-only">
Visualizza dettagli
</span>
</button>
</div>
</div>
</div>
<div id="accordionSection-1" role="region" aria-labelledby="accordion1id" class="rtds-accordion__pane rtds-transition-all rtds-pb-4 rtds-pl-6 sm:rtds-pl-8 md:rtds-pl-10 rtds-pr-4 md:rtds-pr-6" hidden>
Content
</div>
</div>
<div class="rtds-accordion__item rtds-border-b rtds-border-gray-01 rtds-py-3">
<div class="rtds-flex rtds-items-center rtds-justify-between rtds-gap-2 rtds-pr-3">
<div class="rtds-flex rtds-items-center rtds-gap-2 rtds-flex-1">
<h3 class="rtds-accordion__title rtds-flex rtds-font-bold rtds-text-base rtds-content-01">
<button type="button" aria-expanded="false" class="rtds-accordion__trigger rtds-group rtds-flex rtds-items-center rtds-text-left rtds-flex-1 rtds-transition-all rtds-p-1 rtds-content-primary" aria-controls="accordionSection-2" id="accordion2id">
<span class="rtds-accordion__icon rtds-flex rtds-p-2 rtds-ml-auto rtds-h-auto rtds-transition-all">
<svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6 rtds-transition-all is-expand-arrow group-aria-expanded:rtds-rotate-180" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-up" />
</svg>
</span>
<span class="rtds-accordion__trigger-label rtds-content-01 rtds-flex rtds-items-center rtds-flex-1 rtds-min-w-0 rtds-text-base lg:rtds-text-lg">
Titolo panel
</span>
</button>
</h3>
</div>
<div class="rtds-flex rtds-items-center rtds-gap-2 rtds-ml-auto rtds-justify-end">
<span class="rtds-chip rtds-chip--status is-in-progress">
<span class="rtds-sr-only">Da pagare</span>
Da pagare</span>
<span class="rtds-chip rtds-chip--category">
<span class="rtds-sr-only">Stato</span>
Stato</span>
<div class="rtds-flex rtds-items-center rtds-gap-2">
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><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" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#solid--pencil-square" />
</svg>
<span class="rtds-sr-only">
Visualizza dettagli
</span>
</button>
</div>
</div>
</div>
<div id="accordionSection-2" role="region" aria-labelledby="accordion2id" class="rtds-accordion__pane rtds-transition-all rtds-pb-4 rtds-pl-6 sm:rtds-pl-8 md:rtds-pl-10 rtds-pr-4 md:rtds-pr-6" hidden>
Content
</div>
</div>
<div class="rtds-accordion__item rtds-border-b rtds-border-gray-01 rtds-py-3">
<div class="rtds-flex rtds-items-center rtds-justify-between rtds-gap-2 rtds-pr-3">
<div class="rtds-flex rtds-items-center rtds-gap-2 rtds-flex-1">
<h3 class="rtds-accordion__title rtds-flex rtds-font-bold rtds-text-base rtds-content-01">
<button type="button" aria-expanded="false" class="rtds-accordion__trigger rtds-group rtds-flex rtds-items-center rtds-text-left rtds-flex-1 rtds-transition-all rtds-p-1 rtds-content-primary" aria-controls="accordionSection-3" id="accordion3id">
<span class="rtds-accordion__icon rtds-flex rtds-p-2 rtds-ml-auto rtds-h-auto rtds-transition-all">
<svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6 rtds-transition-all is-expand-arrow group-aria-expanded:rtds-rotate-180" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-up" />
</svg>
</span>
<span class="rtds-accordion__trigger-label rtds-content-01 rtds-flex rtds-items-center rtds-flex-1 rtds-min-w-0 rtds-text-base lg:rtds-text-lg">
Titolo panel
</span>
</button>
</h3>
</div>
<div class="rtds-flex rtds-items-center rtds-gap-2 rtds-ml-auto rtds-justify-end">
<span class="rtds-chip rtds-chip--status is-in-progress">
<span class="rtds-sr-only">Da pagare</span>
Da pagare</span>
<span class="rtds-chip rtds-chip--category">
<span class="rtds-sr-only">Stato</span>
Stato</span>
<div class="rtds-flex rtds-items-center rtds-gap-2">
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><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" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#solid--pencil-square" />
</svg>
<span class="rtds-sr-only">
Visualizza dettagli
</span>
</button>
</div>
</div>
</div>
<div id="accordionSection-3" role="region" aria-labelledby="accordion3id" class="rtds-accordion__pane rtds-transition-all rtds-pb-4 rtds-pl-6 sm:rtds-pl-8 md:rtds-pl-10 rtds-pr-4 md:rtds-pr-6" hidden>
Content
</div>
</div>
<div class="rtds-accordion__item rtds-border-b rtds-border-gray-01 rtds-py-3">
<div class="rtds-flex rtds-items-center rtds-justify-between rtds-gap-2 rtds-pr-3">
<div class="rtds-flex rtds-items-center rtds-gap-2 rtds-flex-1">
<h3 class="rtds-accordion__title rtds-flex rtds-font-bold rtds-text-base rtds-content-01">
<button type="button" aria-expanded="false" class="rtds-accordion__trigger rtds-group rtds-flex rtds-items-center rtds-text-left rtds-flex-1 rtds-transition-all rtds-p-1 rtds-content-primary" aria-controls="accordionSection-4" id="accordion4id">
<span class="rtds-accordion__icon rtds-flex rtds-p-2 rtds-ml-auto rtds-h-auto rtds-transition-all">
<svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6 rtds-transition-all is-expand-arrow group-aria-expanded:rtds-rotate-180" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-up" />
</svg>
</span>
<span class="rtds-accordion__trigger-label rtds-content-01 rtds-flex rtds-items-center rtds-flex-1 rtds-min-w-0 rtds-text-base lg:rtds-text-lg">
Titolo panel
</span>
</button>
</h3>
</div>
<div class="rtds-flex rtds-items-center rtds-gap-2 rtds-ml-auto rtds-justify-end">
<span class="rtds-chip rtds-chip--status is-in-progress">
<span class="rtds-sr-only">Da pagare</span>
Da pagare</span>
<span class="rtds-chip rtds-chip--category">
<span class="rtds-sr-only">Stato</span>
Stato</span>
<div class="rtds-flex rtds-items-center rtds-gap-2">
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><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" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#solid--pencil-square" />
</svg>
<span class="rtds-sr-only">
Visualizza dettagli
</span>
</button>
</div>
</div>
</div>
<div id="accordionSection-4" role="region" aria-labelledby="accordion4id" class="rtds-accordion__pane rtds-transition-all rtds-pb-4 rtds-pl-6 sm:rtds-pl-8 md:rtds-pl-10 rtds-pr-4 md:rtds-pr-6" hidden>
Content
</div>
</div>
</div>
<h3 class="rtds-text-base rtds-font-semibold rtds-content-02 rtds-mb-3">
Struttura Gerarchica <span class="rtds-text-xs rtds-font-normal">(integra accordion-smart + card-smart + trascinamento-oggetti)</span>
</h3>
<ul role="list" class="rtds-hierarchy rtds-accordion rtds-accordion--smart">
<li class="rtds-hierarchy__item rtds-accordion__item rtds-grid rtds-pr-3 rtds-py-3 rtds-pl-8 rtds-space-y-4 rtds-background-01 rtds-rounded-lg rtds-shadow-sm rtds-cursor-grab">
<div class="rtds-flex rtds-items-center rtds-justify-between rtds-group/item">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 -rtds-ml-4 md:-rtds-ml-5 rtds-flex-shrink-0 rtds-transition-opacity rtds-opacity-0 group-hover/item:rtds-opacity-100 group-focus-within/item:rtds-opacity-100" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#grab-handle" />
</svg>
<div class="rtds-flex rtds-items-center rtds-gap-2 rtds-flex-1">
<h3 class="rtds-accordion__title rtds-flex rtds-font-bold rtds-content-01">
<button type="button" aria-expanded="true" class="rtds-accordion__trigger rtds-group rtds-flex rtds-items-center rtds-text-left rtds-flex-1 rtds-transition-all rtds-p-1 rtds-content-primary" aria-controls="accordionSection-1-1" id="accordion1-1id">
<span class="rtds-accordion__icon rtds-flex rtds-p-2 rtds-ml-auto rtds-h-auto rtds-transition-all">
<svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6 rtds-transition-all is-expand-arrow group-aria-expanded:rtds-rotate-180" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-up" />
</svg>
</span>
<span class="rtds-accordion__trigger-label rtds-content-01 rtds-flex rtds-items-center rtds-flex-1 rtds-min-w-0 rtds-text-sm md:rtds-text-base lg:rtds-text-lg">
Titolo panel
</span>
</button>
</h3>
</div>
<div class="rtds-flex rtds-items-center rtds-gap-2">
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><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" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-up" />
</svg>
<span class="rtds-sr-only">
Sposta sopra Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><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" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-down" />
</svg>
<span class="rtds-sr-only">
Sposta sotto Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><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" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--trash" />
</svg>
<span class="rtds-sr-only">
Elimina Nome Procedimento
</span>
</button>
</div>
</div>
<ul role="list" id="accordionSection-1-1" aria-labelledby="accordion1-1id" class="rtds-accordion__pane rtds-transition-all rtds-pb-4 rtds-pl-0.5 sm:rtds-pl-4 md:rtds-pl-6 lg:rtds-pl-10 rtds-pr-3 rtds-space-y-4">
<li class="rtds-accordion__item rtds-grid rtds-py-3 rtds-pr-3 rtds-pl-5 rtds-cursor-grab">
<div class="rtds-flex rtds-items-center rtds-justify-between rtds-group/item">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 -rtds-ml-4 md:-rtds-ml-5 rtds-flex-shrink-0 rtds-transition-opacity rtds-opacity-0 group-hover/item:rtds-opacity-100 group-focus-within/item:rtds-opacity-100" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#grab-handle" />
</svg>
<div class="rtds-flex rtds-items-center rtds-gap-2 rtds-flex-1">
<h3 class="rtds-accordion__title rtds-flex rtds-font-bold rtds-content-01">
<button type="button" aria-expanded="true" class="rtds-accordion__trigger rtds-group rtds-flex rtds-items-center rtds-text-left rtds-flex-1 rtds-transition-all rtds-p-1 rtds-content-primary" aria-controls="accordionSubSection-1-1" id="accordionSubSection1-1id">
<span class="rtds-accordion__icon rtds-flex rtds-p-2 rtds-ml-auto rtds-h-auto rtds-transition-all">
<svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6 rtds-transition-all is-expand-arrow group-aria-expanded:rtds-rotate-180" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-up" />
</svg>
</span>
<span class="rtds-accordion__trigger-label rtds-content-01 rtds-flex rtds-items-center rtds-flex-1 rtds-min-w-0 rtds-text-sm md:rtds-text-base lg:rtds-text-lg">
Titolo panel
</span>
</button>
</h3>
</div>
<div class="rtds-flex rtds-items-center rtds-gap-2">
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><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" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-up" />
</svg>
<span class="rtds-sr-only">
Sposta sopra Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><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" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-down" />
</svg>
<span class="rtds-sr-only">
Sposta sotto Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><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" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--trash" />
</svg>
<span class="rtds-sr-only">
Elimina Nome Procedimento
</span>
</button>
</div>
</div>
<ul role="list" id="accordionSubSection-1-1" aria-labelledby="accordionSubSection1-1id" class="rtds-accordion__pane rtds-transition-all rtds-pb-4 rtds-pl-6 sm:rtds-pl-8 md:rtds-pl-10 rtds-pr-3 rtds-space-y-4">
<li>
<article class="rtds-card
rtds-card--smart-trascinabile rtds-background-03 !rtds-cursor-grab
is-card-fullclickable rtds-group/card">
<div class="rtds-grid md:rtds-flex rtds-w-full md:rtds-items-center md:rtds-justify-between rtds-gap-2 rtds-p-2">
<div class="rtds-flex rtds-items-center rtds-gap-2">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 rtds-flex-shrink-0 rtds-transition-opacity rtds-opacity-0 group-hover/card:rtds-opacity-100 group-focus-within/card:rtds-opacity-100" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#grab-handle" />
</svg>
<p class="rtds-text-sm md:rtds-text-base rtds-font-medium">Nome procedimento</p>
</div>
<div class="rtds-flex rtds-items-center rtds-justify-end rtds-gap-2">
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><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" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-up" />
</svg>
<span class="rtds-sr-only">
Sposta sopra Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><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" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-down" />
</svg>
<span class="rtds-sr-only">
Sposta sotto Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><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" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--trash" />
</svg>
<span class="rtds-sr-only">
Elimina Nome Procedimento
</span>
</button>
</div>
</div>
</article>
</li>
<li>
<article class="rtds-card
rtds-card--smart-trascinabile rtds-background-03 !rtds-cursor-grab
is-card-fullclickable rtds-group/card">
<div class="rtds-grid md:rtds-flex rtds-w-full md:rtds-items-center md:rtds-justify-between rtds-gap-2 rtds-p-2">
<div class="rtds-flex rtds-items-center rtds-gap-2">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 rtds-flex-shrink-0 rtds-transition-opacity rtds-opacity-0 group-hover/card:rtds-opacity-100 group-focus-within/card:rtds-opacity-100" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#grab-handle" />
</svg>
<p class="rtds-text-sm md:rtds-text-base rtds-font-medium">Nome procedimento</p>
</div>
<div class="rtds-flex rtds-items-center rtds-justify-end rtds-gap-2">
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><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" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-up" />
</svg>
<span class="rtds-sr-only">
Sposta sopra Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><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" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-down" />
</svg>
<span class="rtds-sr-only">
Sposta sotto Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><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" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--trash" />
</svg>
<span class="rtds-sr-only">
Elimina Nome Procedimento
</span>
</button>
</div>
</div>
</article>
</li>
<li>
<article class="rtds-card
rtds-card--smart-trascinabile rtds-background-03 !rtds-cursor-grab
is-card-fullclickable rtds-group/card">
<div class="rtds-grid md:rtds-flex rtds-w-full md:rtds-items-center md:rtds-justify-between rtds-gap-2 rtds-p-2">
<div class="rtds-flex rtds-items-center rtds-gap-2">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 rtds-flex-shrink-0 rtds-transition-opacity rtds-opacity-0 group-hover/card:rtds-opacity-100 group-focus-within/card:rtds-opacity-100" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#grab-handle" />
</svg>
<p class="rtds-text-sm md:rtds-text-base rtds-font-medium">Nome procedimento</p>
</div>
<div class="rtds-flex rtds-items-center rtds-justify-end rtds-gap-2">
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><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" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-up" />
</svg>
<span class="rtds-sr-only">
Sposta sopra Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><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" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-down" />
</svg>
<span class="rtds-sr-only">
Sposta sotto Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><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" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--trash" />
</svg>
<span class="rtds-sr-only">
Elimina Nome Procedimento
</span>
</button>
</div>
</div>
</article>
</li>
</ul>
</li>
<li class="rtds-accordion__item rtds-grid rtds-pl-5 rtds-pr-3 rtds-py-3">
<div class="rtds-trascinamento-oggetti">
<div class="rtds-trascinamento-oggetti__button-area rtds-flex rtds-flex-col rtds-py-6 rtds-px-8 rtds-items-center rtds-justify-center rtds-gap-4 md:rtds-gap-6 rtds-border-dashed rtds-border-2 rtds-rounded-md">
<div class="rtds-trascinamento-oggetti__description">
<p class="rtds-trascinamento-oggetti__help rtds-text-sm md:rtds-text-base">Clicca il pulsante qui sotto per aprire il catalogo oppure trascina qui un oggetto.</p>
</div>
<button type="button" class="rtds-btn
rtds-btn--icon-left rtds-group/button rtds-trascinamento-oggetti__button rtds-btn rtds-btn--outlined rtds-border-gray-03 rtds-cursor-pointer rtds-gap-2">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--book-open" />
</svg>
Apri il catalogo
</button>
</div>
</div>
</li>
<li class="rtds-accordion__item rtds-grid rtds-pl-5 rtds-pr-3 rtds-py-3">
<button type="button" class="rtds-btn
rtds-btn--icon-left rtds-group/button rtds-btn--inverted 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--plus-circle" />
</svg>
Aggiungi categoria
</button>
</li>
</ul>
</li>
<li class="rtds-hierarchy__item rtds-accordion__item rtds-grid rtds-pr-3 rtds-py-3 rtds-pl-8 rtds-space-y-4 rtds-background-01 rtds-rounded-lg rtds-shadow-sm rtds-cursor-grab">
<div class="rtds-flex rtds-items-center rtds-justify-between rtds-group/item">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 -rtds-ml-4 md:-rtds-ml-5 rtds-flex-shrink-0 rtds-transition-opacity rtds-opacity-0 group-hover/item:rtds-opacity-100 group-focus-within/item:rtds-opacity-100" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#grab-handle" />
</svg>
<div class="rtds-flex rtds-items-center rtds-gap-2 rtds-flex-1">
<h3 class="rtds-accordion__title rtds-flex rtds-font-bold rtds-content-01">
<button type="button" aria-expanded="true" class="rtds-accordion__trigger rtds-group rtds-flex rtds-items-center rtds-text-left rtds-flex-1 rtds-transition-all rtds-p-1 rtds-content-primary" aria-controls="accordionSection-2-1" id="accordion2-1id">
<span class="rtds-accordion__icon rtds-flex rtds-p-2 rtds-ml-auto rtds-h-auto rtds-transition-all">
<svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6 rtds-transition-all is-expand-arrow group-aria-expanded:rtds-rotate-180" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-up" />
</svg>
</span>
<span class="rtds-accordion__trigger-label rtds-content-01 rtds-flex rtds-items-center rtds-flex-1 rtds-min-w-0 rtds-text-sm md:rtds-text-base lg:rtds-text-lg">
Titolo panel
</span>
</button>
</h3>
</div>
<div class="rtds-flex rtds-items-center rtds-gap-2">
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><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" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-up" />
</svg>
<span class="rtds-sr-only">
Sposta sopra Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><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" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-down" />
</svg>
<span class="rtds-sr-only">
Sposta sotto Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><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" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--trash" />
</svg>
<span class="rtds-sr-only">
Elimina Nome Procedimento
</span>
</button>
</div>
</div>
<ul role="list" id="accordionSection-2-1" aria-labelledby="accordion2-1id" class="rtds-accordion__pane rtds-transition-all rtds-pb-4 rtds-pl-0.5 sm:rtds-pl-4 md:rtds-pl-6 lg:rtds-pl-10 rtds-pr-3 rtds-space-y-4">
<li class="rtds-accordion__item rtds-grid rtds-py-3 rtds-pr-3 rtds-pl-5 rtds-cursor-grab">
<div class="rtds-flex rtds-items-center rtds-justify-between rtds-group/item">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 -rtds-ml-4 md:-rtds-ml-5 rtds-flex-shrink-0 rtds-transition-opacity rtds-opacity-0 group-hover/item:rtds-opacity-100 group-focus-within/item:rtds-opacity-100" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#grab-handle" />
</svg>
<div class="rtds-flex rtds-items-center rtds-gap-2 rtds-flex-1">
<h3 class="rtds-accordion__title rtds-flex rtds-font-bold rtds-content-01">
<button type="button" aria-expanded="true" class="rtds-accordion__trigger rtds-group rtds-flex rtds-items-center rtds-text-left rtds-flex-1 rtds-transition-all rtds-p-1 rtds-content-primary" aria-controls="accordionSubSection-2-1" id="accordionSubSection2-1id">
<span class="rtds-accordion__icon rtds-flex rtds-p-2 rtds-ml-auto rtds-h-auto rtds-transition-all">
<svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6 rtds-transition-all is-expand-arrow group-aria-expanded:rtds-rotate-180" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-up" />
</svg>
</span>
<span class="rtds-accordion__trigger-label rtds-content-01 rtds-flex rtds-items-center rtds-flex-1 rtds-min-w-0 rtds-text-sm md:rtds-text-base lg:rtds-text-lg">
Titolo panel
</span>
</button>
</h3>
</div>
<div class="rtds-flex rtds-items-center rtds-gap-2">
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><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" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-up" />
</svg>
<span class="rtds-sr-only">
Sposta sopra Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><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" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-down" />
</svg>
<span class="rtds-sr-only">
Sposta sotto Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><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" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--trash" />
</svg>
<span class="rtds-sr-only">
Elimina Nome Procedimento
</span>
</button>
</div>
</div>
<fieldset>
<legend class="rtds-sr-only">
Seleziona procedimento
</legend>
<ul role="list" id="accordionSubSection-2-1" aria-labelledby="accordionSubSection2-1id" class="rtds-accordion__pane rtds-transition-all rtds-pb-4 rtds-pl-6 sm:rtds-pl-8 md:rtds-pl-10 rtds-pr-3 rtds-space-y-4">
<li>
<article class="rtds-card
rtds-card--smart-trascinabile rtds-background-03 !rtds-cursor-grab
rtds-background-03 !rtds-cursor-grab
is-card-fullclickable rtds-group/card">
<div class="rtds-grid md:rtds-flex rtds-w-full md:rtds-items-center md:rtds-justify-between rtds-gap-2 rtds-p-2">
<div class="rtds-input rtds-input-field rtds-input-checkbox rtds-flex-1">
<div class="rtds-flex rtds-gap-2 rtds-items-center">
<input id="radio-1" name="radio-1" class=" " type="checkbox">
<label class="rtds-input-checkbox__label rtds-flex-1 rtds-text-sm md:rtds-text-base" for="radio-1">
Nome procedimento
</label>
</div>
</div>
<div class="rtds-flex rtds-items-center rtds-justify-end rtds-gap-2">
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><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" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-up" />
</svg>
<span class="rtds-sr-only">
Sposta sopra Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><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" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-down" />
</svg>
<span class="rtds-sr-only">
Sposta sotto Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><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" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--trash" />
</svg>
<span class="rtds-sr-only">
Elimina Nome Procedimento
</span>
</button>
</div>
</div>
</article>
</li>
<li>
<article class="rtds-card
rtds-card--smart-trascinabile rtds-background-03 !rtds-cursor-grab
rtds-background-03 !rtds-cursor-grab
is-card-fullclickable rtds-group/card">
<div class="rtds-grid md:rtds-flex rtds-w-full md:rtds-items-center md:rtds-justify-between rtds-gap-2 rtds-p-2">
<div class="rtds-input rtds-input-field rtds-input-radio rtds-flex-1">
<div class="rtds-flex rtds-gap-2 rtds-items-center">
<input id="radio-1" name="radio-1" class=" " type="radio">
<label class="rtds-input-radio__label rtds-flex-1 rtds-text-sm md:rtds-text-base" for="radio-1">
Nome procedimento
</label>
</div>
</div>
<div class="rtds-flex rtds-items-center rtds-justify-end rtds-gap-2">
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><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" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-up" />
</svg>
<span class="rtds-sr-only">
Sposta sopra Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><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" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-down" />
</svg>
<span class="rtds-sr-only">
Sposta sotto Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><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" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--trash" />
</svg>
<span class="rtds-sr-only">
Elimina Nome Procedimento
</span>
</button>
</div>
</div>
</article>
</li>
<li>
<article class="rtds-card
rtds-card--smart-trascinabile rtds-background-03 !rtds-cursor-grab
rtds-background-03 !rtds-cursor-grab
rtds-background-03 !rtds-cursor-grab is-selected
is-card-fullclickable rtds-group/card">
<div class="rtds-grid md:rtds-flex rtds-w-full md:rtds-items-center md:rtds-justify-between rtds-gap-2 rtds-p-2">
<div class="rtds-input rtds-input-field rtds-input-checkbox rtds-flex-1">
<div class="rtds-flex rtds-gap-2 rtds-items-center">
<input id="radio-1" name="radio-1" class=" " type="checkbox" checked>
<label class="rtds-input-checkbox__label rtds-flex-1 rtds-text-sm md:rtds-text-base" for="radio-1">
Nome procedimento
</label>
</div>
</div>
<div class="rtds-flex rtds-items-center rtds-justify-end rtds-gap-2">
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><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" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-up" />
</svg>
<span class="rtds-sr-only">
Sposta sopra Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><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" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-down" />
</svg>
<span class="rtds-sr-only">
Sposta sotto Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><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" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--trash" />
</svg>
<span class="rtds-sr-only">
Elimina Nome Procedimento
</span>
</button>
</div>
</div>
</article>
</li>
</ul>
</fieldset>
</li>
<li class="rtds-accordion__item rtds-grid rtds-pl-5 rtds-pr-3 rtds-py-3">
<div class="rtds-trascinamento-oggetti">
<div class="rtds-trascinamento-oggetti__button-area rtds-flex rtds-flex-col rtds-py-6 rtds-px-8 rtds-items-center rtds-justify-center rtds-gap-4 md:rtds-gap-6 rtds-border-dashed rtds-border-2 rtds-rounded-md">
<div class="rtds-trascinamento-oggetti__description">
<p class="rtds-trascinamento-oggetti__help rtds-text-sm md:rtds-text-base">Clicca il pulsante qui sotto per aprire il catalogo oppure trascina qui un oggetto.</p>
</div>
<button type="button" class="rtds-btn
rtds-btn--icon-left rtds-group/button rtds-trascinamento-oggetti__button rtds-btn rtds-btn--outlined rtds-border-gray-03 rtds-cursor-pointer rtds-gap-2">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--book-open" />
</svg>
Apri il catalogo
</button>
</div>
</div>
</li>
<li class="rtds-accordion__item rtds-grid rtds-pl-5 rtds-pr-3 rtds-py-3">
<button type="button" class="rtds-btn
rtds-btn--icon-left rtds-group/button rtds-btn--inverted 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--plus-circle" />
</svg>
Aggiungi categoria
</button>
</li>
</ul>
</li>
<li class="rtds-hierarchy__item rtds-accordion__item rtds-grid rtds-pr-3 rtds-py-3 rtds-pl-8 rtds-space-y-4 rtds-background-01 rtds-rounded-lg rtds-shadow-sm rtds-cursor-grab">
<div class="rtds-flex rtds-items-center rtds-justify-between rtds-group/item">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 -rtds-ml-4 md:-rtds-ml-5 rtds-flex-shrink-0 rtds-transition-opacity rtds-opacity-0 group-hover/item:rtds-opacity-100 group-focus-within/item:rtds-opacity-100" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#grab-handle" />
</svg>
<div class="rtds-flex rtds-items-center rtds-gap-2 rtds-flex-1">
<h3 class="rtds-accordion__title rtds-flex rtds-font-bold rtds-content-01">
<button type="button" aria-expanded="false" class="rtds-accordion__trigger rtds-group rtds-flex rtds-items-center rtds-text-left rtds-flex-1 rtds-transition-all rtds-p-1 rtds-content-primary" aria-controls="accordionSection-1-2" id="accordion1-2id">
<span class="rtds-accordion__icon rtds-flex rtds-p-2 rtds-ml-auto rtds-h-auto rtds-transition-all">
<svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6 rtds-transition-all is-expand-arrow group-aria-expanded:rtds-rotate-180" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-up" />
</svg>
</span>
<span class="rtds-accordion__trigger-label rtds-content-01 rtds-flex rtds-items-center rtds-flex-1 rtds-min-w-0 rtds-text-sm md:rtds-text-base lg:rtds-text-lg">
Titolo panel
</span>
</button>
</h3>
</div>
<div class="rtds-flex rtds-items-center rtds-gap-2">
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><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" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-up" />
</svg>
<span class="rtds-sr-only">
Sposta sopra Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><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" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-down" />
</svg>
<span class="rtds-sr-only">
Sposta sotto Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><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" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--trash" />
</svg>
<span class="rtds-sr-only">
Elimina Nome Procedimento
</span>
</button>
</div>
</div>
<ul role="list" id="accordionSection-1-2" aria-labelledby="accordion1-2id" class="rtds-accordion__pane rtds-transition-all rtds-pb-4 rtds-pl-0.5 sm:rtds-pl-4 md:rtds-pl-6 lg:rtds-pl-10 rtds-pr-3 rtds-space-y-4" hidden>
<li class="rtds-accordion__item rtds-grid rtds-py-3 rtds-pr-3 rtds-pl-5 rtds-cursor-grab">
<div class="rtds-flex rtds-items-center rtds-justify-between rtds-group/item">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 -rtds-ml-4 md:-rtds-ml-5 rtds-flex-shrink-0 rtds-transition-opacity rtds-opacity-0 group-hover/item:rtds-opacity-100 group-focus-within/item:rtds-opacity-100" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#grab-handle" />
</svg>
<div class="rtds-flex rtds-items-center rtds-gap-2 rtds-flex-1">
<h3 class="rtds-accordion__title rtds-flex rtds-font-bold rtds-content-01">
<button type="button" aria-expanded="true" class="rtds-accordion__trigger rtds-group rtds-flex rtds-items-center rtds-text-left rtds-flex-1 rtds-transition-all rtds-p-1 rtds-content-primary" aria-controls="accordionSubSection-1-2" id="accordionSubSection1-2id">
<span class="rtds-accordion__icon rtds-flex rtds-p-2 rtds-ml-auto rtds-h-auto rtds-transition-all">
<svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6 rtds-transition-all is-expand-arrow group-aria-expanded:rtds-rotate-180" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-up" />
</svg>
</span>
<span class="rtds-accordion__trigger-label rtds-content-01 rtds-flex rtds-items-center rtds-flex-1 rtds-min-w-0 rtds-text-sm md:rtds-text-base lg:rtds-text-lg">
Titolo panel
</span>
</button>
</h3>
</div>
<div class="rtds-flex rtds-items-center rtds-gap-2">
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><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" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-up" />
</svg>
<span class="rtds-sr-only">
Sposta sopra Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><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" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-down" />
</svg>
<span class="rtds-sr-only">
Sposta sotto Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><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" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--trash" />
</svg>
<span class="rtds-sr-only">
Elimina Nome Procedimento
</span>
</button>
</div>
</div>
<ul role="list" id="accordionSubSection-1-2" aria-labelledby="accordionSubSection1-2id" class="rtds-accordion__pane rtds-transition-all rtds-pb-4 rtds-pl-6 sm:rtds-pl-8 md:rtds-pl-10 rtds-pr-3 rtds-space-y-4">
<li>
<article class="rtds-card
rtds-card--smart-trascinabile rtds-background-03 !rtds-cursor-grab
is-card-fullclickable rtds-group/card">
<div class="rtds-grid md:rtds-flex rtds-w-full md:rtds-items-center md:rtds-justify-between rtds-gap-2 rtds-p-2">
<div class="rtds-flex rtds-items-center rtds-gap-2">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 rtds-flex-shrink-0 rtds-transition-opacity rtds-opacity-0 group-hover/card:rtds-opacity-100 group-focus-within/card:rtds-opacity-100" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#grab-handle" />
</svg>
<p class="rtds-text-sm md:rtds-text-base rtds-font-medium">Nome procedimento</p>
</div>
<div class="rtds-flex rtds-items-center rtds-justify-end rtds-gap-2">
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><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" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-up" />
</svg>
<span class="rtds-sr-only">
Sposta sopra Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><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" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-down" />
</svg>
<span class="rtds-sr-only">
Sposta sotto Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><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" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--trash" />
</svg>
<span class="rtds-sr-only">
Elimina Nome Procedimento
</span>
</button>
</div>
</div>
</article>
</li>
<li>
<article class="rtds-card
rtds-card--smart-trascinabile rtds-background-03 !rtds-cursor-grab
is-card-fullclickable rtds-group/card">
<div class="rtds-grid md:rtds-flex rtds-w-full md:rtds-items-center md:rtds-justify-between rtds-gap-2 rtds-p-2">
<div class="rtds-flex rtds-items-center rtds-gap-2">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 rtds-flex-shrink-0 rtds-transition-opacity rtds-opacity-0 group-hover/card:rtds-opacity-100 group-focus-within/card:rtds-opacity-100" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#grab-handle" />
</svg>
<p class="rtds-text-sm md:rtds-text-base rtds-font-medium">Nome procedimento</p>
</div>
<div class="rtds-flex rtds-items-center rtds-justify-end rtds-gap-2">
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><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" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-up" />
</svg>
<span class="rtds-sr-only">
Sposta sopra Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><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" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-down" />
</svg>
<span class="rtds-sr-only">
Sposta sotto Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><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" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--trash" />
</svg>
<span class="rtds-sr-only">
Elimina Nome Procedimento
</span>
</button>
</div>
</div>
</article>
</li>
<li>
<article class="rtds-card
rtds-card--smart-trascinabile rtds-background-03 !rtds-cursor-grab
is-card-fullclickable rtds-group/card">
<div class="rtds-grid md:rtds-flex rtds-w-full md:rtds-items-center md:rtds-justify-between rtds-gap-2 rtds-p-2">
<div class="rtds-flex rtds-items-center rtds-gap-2">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 rtds-flex-shrink-0 rtds-transition-opacity rtds-opacity-0 group-hover/card:rtds-opacity-100 group-focus-within/card:rtds-opacity-100" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#grab-handle" />
</svg>
<p class="rtds-text-sm md:rtds-text-base rtds-font-medium">Nome procedimento</p>
</div>
<div class="rtds-flex rtds-items-center rtds-justify-end rtds-gap-2">
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><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" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-up" />
</svg>
<span class="rtds-sr-only">
Sposta sopra Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><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" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-down" />
</svg>
<span class="rtds-sr-only">
Sposta sotto Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><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" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--trash" />
</svg>
<span class="rtds-sr-only">
Elimina Nome Procedimento
</span>
</button>
</div>
</div>
</article>
</li>
</ul>
</li>
<li class="rtds-accordion__item rtds-grid rtds-pl-5 rtds-pr-3 rtds-py-3">
<div class="rtds-trascinamento-oggetti">
<div class="rtds-trascinamento-oggetti__button-area rtds-flex rtds-flex-col rtds-py-6 rtds-px-8 rtds-items-center rtds-justify-center rtds-gap-4 md:rtds-gap-6 rtds-border-dashed rtds-border-2 rtds-rounded-md">
<div class="rtds-trascinamento-oggetti__description">
<p class="rtds-trascinamento-oggetti__help rtds-text-sm md:rtds-text-base">Clicca il pulsante qui sotto per aprire il catalogo oppure trascina qui un oggetto.</p>
</div>
<button type="button" class="rtds-btn
rtds-btn--icon-left rtds-group/button rtds-trascinamento-oggetti__button rtds-btn rtds-btn--outlined rtds-border-gray-03 rtds-cursor-pointer rtds-gap-2">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--book-open" />
</svg>
Apri il catalogo
</button>
</div>
</div>
</li>
<li class="rtds-accordion__item rtds-grid rtds-pl-5 rtds-pr-3 rtds-py-3">
<button type="button" class="rtds-btn
rtds-btn--icon-left rtds-group/button rtds-btn--inverted 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--plus-circle" />
</svg>
Aggiungi categoria
</button>
</li>
</ul>
</li>
<li class="rtds-hierarchy__item rtds-accordion__item rtds-grid rtds-pr-3 rtds-py-3 rtds-pl-8 rtds-space-y-4 rtds-background-01 rtds-rounded-lg rtds-shadow-sm rtds-cursor-grab">
<div class="rtds-flex rtds-items-center rtds-justify-between rtds-group/item">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 -rtds-ml-4 md:-rtds-ml-5 rtds-flex-shrink-0 rtds-transition-opacity rtds-opacity-0 group-hover/item:rtds-opacity-100 group-focus-within/item:rtds-opacity-100" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#grab-handle" />
</svg>
<div class="rtds-flex rtds-items-center rtds-gap-2 rtds-flex-1">
<h3 class="rtds-accordion__title rtds-flex rtds-font-bold rtds-content-01">
<button type="button" aria-expanded="false" class="rtds-accordion__trigger rtds-group rtds-flex rtds-items-center rtds-text-left rtds-flex-1 rtds-transition-all rtds-p-1 rtds-content-primary" aria-controls="accordionSection-2-2" id="accordion2-2id">
<span class="rtds-accordion__icon rtds-flex rtds-p-2 rtds-ml-auto rtds-h-auto rtds-transition-all">
<svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6 rtds-transition-all is-expand-arrow group-aria-expanded:rtds-rotate-180" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-up" />
</svg>
</span>
<span class="rtds-accordion__trigger-label rtds-content-01 rtds-flex rtds-items-center rtds-flex-1 rtds-min-w-0 rtds-text-sm md:rtds-text-base lg:rtds-text-lg">
Titolo panel
</span>
</button>
</h3>
</div>
<div class="rtds-flex rtds-items-center rtds-gap-2">
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><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" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-up" />
</svg>
<span class="rtds-sr-only">
Sposta sopra Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><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" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-down" />
</svg>
<span class="rtds-sr-only">
Sposta sotto Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><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" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--trash" />
</svg>
<span class="rtds-sr-only">
Elimina Nome Procedimento
</span>
</button>
</div>
</div>
<ul role="list" id="accordionSection-2-2" aria-labelledby="accordion2-2id" class="rtds-accordion__pane rtds-transition-all rtds-pb-4 rtds-pl-0.5 sm:rtds-pl-4 md:rtds-pl-6 lg:rtds-pl-10 rtds-pr-3 rtds-space-y-4" hidden>
<li class="rtds-accordion__item rtds-grid rtds-py-3 rtds-pr-3 rtds-pl-5 rtds-cursor-grab">
<div class="rtds-flex rtds-items-center rtds-justify-between rtds-group/item">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 -rtds-ml-4 md:-rtds-ml-5 rtds-flex-shrink-0 rtds-transition-opacity rtds-opacity-0 group-hover/item:rtds-opacity-100 group-focus-within/item:rtds-opacity-100" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#grab-handle" />
</svg>
<div class="rtds-flex rtds-items-center rtds-gap-2 rtds-flex-1">
<h3 class="rtds-accordion__title rtds-flex rtds-font-bold rtds-content-01">
<button type="button" aria-expanded="true" class="rtds-accordion__trigger rtds-group rtds-flex rtds-items-center rtds-text-left rtds-flex-1 rtds-transition-all rtds-p-1 rtds-content-primary" aria-controls="accordionSubSection-2-2" id="accordionSubSection2-2id">
<span class="rtds-accordion__icon rtds-flex rtds-p-2 rtds-ml-auto rtds-h-auto rtds-transition-all">
<svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6 rtds-transition-all is-expand-arrow group-aria-expanded:rtds-rotate-180" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-up" />
</svg>
</span>
<span class="rtds-accordion__trigger-label rtds-content-01 rtds-flex rtds-items-center rtds-flex-1 rtds-min-w-0 rtds-text-sm md:rtds-text-base lg:rtds-text-lg">
Titolo panel
</span>
</button>
</h3>
</div>
<div class="rtds-flex rtds-items-center rtds-gap-2">
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><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" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-up" />
</svg>
<span class="rtds-sr-only">
Sposta sopra Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><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" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-down" />
</svg>
<span class="rtds-sr-only">
Sposta sotto Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><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" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--trash" />
</svg>
<span class="rtds-sr-only">
Elimina Nome Procedimento
</span>
</button>
</div>
</div>
<fieldset>
<legend class="rtds-sr-only">
Seleziona procedimento
</legend>
<ul role="list" id="accordionSubSection-2-2" aria-labelledby="accordionSubSection2-2id" class="rtds-accordion__pane rtds-transition-all rtds-pb-4 rtds-pl-6 sm:rtds-pl-8 md:rtds-pl-10 rtds-pr-3 rtds-space-y-4">
<li>
<article class="rtds-card
rtds-card--smart-trascinabile rtds-background-03 !rtds-cursor-grab
rtds-background-03 !rtds-cursor-grab
is-card-fullclickable rtds-group/card">
<div class="rtds-grid md:rtds-flex rtds-w-full md:rtds-items-center md:rtds-justify-between rtds-gap-2 rtds-p-2">
<div class="rtds-input rtds-input-field rtds-input-checkbox rtds-flex-1">
<div class="rtds-flex rtds-gap-2 rtds-items-center">
<input id="radio-1" name="radio-1" class=" " type="checkbox">
<label class="rtds-input-checkbox__label rtds-flex-1 rtds-text-sm md:rtds-text-base" for="radio-1">
Nome procedimento
</label>
</div>
</div>
<div class="rtds-flex rtds-items-center rtds-justify-end rtds-gap-2">
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><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" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-up" />
</svg>
<span class="rtds-sr-only">
Sposta sopra Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><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" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-down" />
</svg>
<span class="rtds-sr-only">
Sposta sotto Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><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" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--trash" />
</svg>
<span class="rtds-sr-only">
Elimina Nome Procedimento
</span>
</button>
</div>
</div>
</article>
</li>
<li>
<article class="rtds-card
rtds-card--smart-trascinabile rtds-background-03 !rtds-cursor-grab
rtds-background-03 !rtds-cursor-grab
is-card-fullclickable rtds-group/card">
<div class="rtds-grid md:rtds-flex rtds-w-full md:rtds-items-center md:rtds-justify-between rtds-gap-2 rtds-p-2">
<div class="rtds-input rtds-input-field rtds-input-radio rtds-flex-1">
<div class="rtds-flex rtds-gap-2 rtds-items-center">
<input id="radio-1" name="radio-1" class=" " type="radio">
<label class="rtds-input-radio__label rtds-flex-1 rtds-text-sm md:rtds-text-base" for="radio-1">
Nome procedimento
</label>
</div>
</div>
<div class="rtds-flex rtds-items-center rtds-justify-end rtds-gap-2">
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><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" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-up" />
</svg>
<span class="rtds-sr-only">
Sposta sopra Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><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" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-down" />
</svg>
<span class="rtds-sr-only">
Sposta sotto Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><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" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--trash" />
</svg>
<span class="rtds-sr-only">
Elimina Nome Procedimento
</span>
</button>
</div>
</div>
</article>
</li>
<li>
<article class="rtds-card
rtds-card--smart-trascinabile rtds-background-03 !rtds-cursor-grab
rtds-background-03 !rtds-cursor-grab
rtds-background-03 !rtds-cursor-grab is-selected
is-card-fullclickable rtds-group/card">
<div class="rtds-grid md:rtds-flex rtds-w-full md:rtds-items-center md:rtds-justify-between rtds-gap-2 rtds-p-2">
<div class="rtds-input rtds-input-field rtds-input-checkbox rtds-flex-1">
<div class="rtds-flex rtds-gap-2 rtds-items-center">
<input id="radio-1" name="radio-1" class=" " type="checkbox" checked>
<label class="rtds-input-checkbox__label rtds-flex-1 rtds-text-sm md:rtds-text-base" for="radio-1">
Nome procedimento
</label>
</div>
</div>
<div class="rtds-flex rtds-items-center rtds-justify-end rtds-gap-2">
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><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" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-up" />
</svg>
<span class="rtds-sr-only">
Sposta sopra Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><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" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-down" />
</svg>
<span class="rtds-sr-only">
Sposta sotto Nome Procedimento
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><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" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--trash" />
</svg>
<span class="rtds-sr-only">
Elimina Nome Procedimento
</span>
</button>
</div>
</div>
</article>
</li>
</ul>
</fieldset>
</li>
<li class="rtds-accordion__item rtds-grid rtds-pl-5 rtds-pr-3 rtds-py-3">
<div class="rtds-trascinamento-oggetti">
<div class="rtds-trascinamento-oggetti__button-area rtds-flex rtds-flex-col rtds-py-6 rtds-px-8 rtds-items-center rtds-justify-center rtds-gap-4 md:rtds-gap-6 rtds-border-dashed rtds-border-2 rtds-rounded-md">
<div class="rtds-trascinamento-oggetti__description">
<p class="rtds-trascinamento-oggetti__help rtds-text-sm md:rtds-text-base">Clicca il pulsante qui sotto per aprire il catalogo oppure trascina qui un oggetto.</p>
</div>
<button type="button" class="rtds-btn
rtds-btn--icon-left rtds-group/button rtds-trascinamento-oggetti__button rtds-btn rtds-btn--outlined rtds-border-gray-03 rtds-cursor-pointer rtds-gap-2">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--book-open" />
</svg>
Apri il catalogo
</button>
</div>
</div>
</li>
<li class="rtds-accordion__item rtds-grid rtds-pl-5 rtds-pr-3 rtds-py-3">
<button type="button" class="rtds-btn
rtds-btn--icon-left rtds-group/button rtds-btn--inverted 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--plus-circle" />
</svg>
Aggiungi categoria
</button>
</li>
</ul>
</li>
</ul>
<h3 class="rtds-text-base rtds-font-semibold rtds-content-02 rtds-mb-3">
Trascinamento Oggetti
</h3>
<div class="rtds-grid rtds-gap-4 md:rtds-grid-cols-2">
<div>
<p class="rtds-text-xs rtds-content-02 rtds-mb-2">Default (vuoto)</p>
<div class="rtds-trascinamento-oggetti">
<div class="rtds-trascinamento-oggetti__button-area rtds-flex rtds-flex-col rtds-py-6 rtds-px-8 rtds-items-center rtds-justify-center rtds-gap-4 md:rtds-gap-6 rtds-border-dashed rtds-border-2 rtds-rounded-md">
<div class="rtds-trascinamento-oggetti__description">
<p class="rtds-trascinamento-oggetti__help rtds-text-sm md:rtds-text-base">Clicca il pulsante qui sotto per aprire il catalogo oppure trascina qui un oggetto.</p>
</div>
<button type="button" class="rtds-btn
rtds-btn--icon-left rtds-group/button rtds-trascinamento-oggetti__button rtds-btn rtds-btn--outlined rtds-border-gray-03 rtds-cursor-pointer rtds-gap-2">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--book-open" />
</svg>
Apri il catalogo
</button>
</div>
</div>
</div>
<div>
<p class="rtds-text-xs rtds-content-02 rtds-mb-2">Con contenuto trascinato</p>
<div class="rtds-trascinamento-oggetti has-dragged-content">
<div class="rtds-trascinamento-oggetti__button-area rtds-flex rtds-flex-col rtds-py-6 rtds-px-8 rtds-items-center rtds-justify-center rtds-gap-4 md:rtds-gap-6 rtds-border-dashed rtds-border-2 rtds-rounded-md">
<div class="rtds-trascinamento-oggetti__description">
<p class="rtds-trascinamento-oggetti__help rtds-text-sm md:rtds-text-base">Clicca il pulsante qui sotto per aprire il catalogo oppure trascina qui un oggetto.</p>
</div>
<button type="button" class="rtds-btn
rtds-btn--icon-left rtds-group/button rtds-trascinamento-oggetti__button rtds-btn rtds-btn--outlined rtds-border-gray-03 rtds-cursor-pointer rtds-gap-2">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--book-open" />
</svg>
Apri il catalogo
</button>
</div>
</div>
</div>
</div>
<h3 class="rtds-text-base rtds-font-semibold rtds-content-02 rtds-mb-3">
File — tutti gli stati
</h3>
<div class="rtds-max-w-md rtds-space-y-3">
<div class="rtds-file is-loading" id="file-1">
<!-- Icona del file -->
<svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6 md:rtds-w-8 md:rtds-h-8 rtds-file__icon rtds-flex-shrink-0" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--document-text" />
</svg>
<div class="rtds-file__info">
<!-- Informazioni del file -->
<p class="rtds-file__name rtds-text-sm rtds-font-bold rtds-mb-1">documento-caricamento.pdf</p>
<!-- Barra di progresso (per stati loading) -->
<div class="rtds-file__progress">
<div class="rtds-file__progress-bar" role="progressbar" style="--file-progress-bar-width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
</div>
</div>
<p class="rtds-file__status" aria-live="polite">
<span class="rtds-sr-only">
Caricamento file in corso: documento-caricamento.pdf -
</span>
<span class="rtds-file__weight rtds-text-xs rtds-font-medium">1.2MB</span>
</p>
</div>
<!-- Azioni in base allo stato -->
<!-- Loading: solo pulsante cancella -->
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-flex-shrink-0 rtds-content-01"><svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--x-circle" />
</svg>
<span class="rtds-sr-only">
Annulla caricamento file documento-caricamento.pdf
</span>
</button>
</div>
<div class="rtds-file is-loading-error" id="file-2">
<!-- Icona del file -->
<svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6 md:rtds-w-8 md:rtds-h-8 rtds-file__icon rtds-flex-shrink-0" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--document-text" />
</svg>
<div class="rtds-file__info">
<!-- Informazioni del file -->
<p class="rtds-file__name rtds-text-sm rtds-font-bold rtds-mb-1">documento-errore.pdf</p>
<!-- Barra di progresso (per stati loading) -->
<div class="rtds-file__progress">
<div class="rtds-file__progress-bar" role="progressbar" style="--file-progress-bar-width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">
</div>
</div>
<p class="rtds-file__status" aria-live="polite">
<span class="rtds-sr-only">
Errore caricamento file: documento-errore.pdf -
</span>
<span class="rtds-file__weight rtds-text-xs rtds-font-medium">0.8MB</span>
<!-- Messaggio di errore -->
<span class="rtds-file__error rtds-text-xs rtds-font-bold rtds-content-error">
File troppo grande. Dimensione massima: 10MB
</span>
</p>
</div>
<!-- Azioni in base allo stato -->
<!-- Loading Error: icona errore + pulsante cancella -->
<div class="rtds-flex rtds-items-center rtds-gap-2">
<svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6 rtds-text-error" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--exclamation-circle" />
</svg>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-flex-shrink-0 rtds-content-01"><svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--x-circle" />
</svg>
<span class="rtds-sr-only">
Annulla caricamento file documento-errore.pdf
</span>
</button>
</div>
</div>
<div class="rtds-file is-loading-completed" id="file-3">
<!-- Icona del file -->
<svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6 md:rtds-w-8 md:rtds-h-8 rtds-file__icon rtds-flex-shrink-0" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--document-text" />
</svg>
<div class="rtds-file__info">
<!-- Informazioni del file -->
<p class="rtds-file__name rtds-text-sm rtds-font-bold rtds-mb-1">documento-ok.pdf</p>
<!-- Barra di progresso (per stati loading) -->
<div class="rtds-file__progress">
<div class="rtds-file__progress-bar" role="progressbar" style="--file-progress-bar-width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
</div>
</div>
<p class="rtds-file__status" aria-live="polite">
<span class="rtds-sr-only">
Caricamento file completato: documento-ok.pdf -
</span>
<span class="rtds-file__weight rtds-text-xs rtds-font-medium">2.4MB</span>
</p>
</div>
<!-- Azioni in base allo stato -->
<!-- Loading Completed: icona check + pulsante cancella -->
<div class="rtds-flex rtds-items-center rtds-gap-2">
<svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6 rtds-text-success" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--check-circle" />
</svg>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-flex-shrink-0 rtds-content-01"><svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--x-circle" />
</svg>
<span class="rtds-sr-only">
Annulla caricamento file documento-ok.pdf
</span>
</button>
</div>
</div>
<div class="rtds-file is-download" id="file-4">
<!-- Icona del file -->
<svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6 md:rtds-w-8 md:rtds-h-8 rtds-file__icon rtds-flex-shrink-0" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--document-text" />
</svg>
<div class="rtds-file__info">
<!-- Informazioni del file -->
<p class="rtds-file__name rtds-text-sm rtds-font-bold rtds-mb-1">documento-scarica.pdf</p>
<!-- Barra di progresso (per stati loading) -->
<p class="rtds-file__status" aria-live="polite">
<span class="rtds-sr-only">
</span>
<span class="rtds-file__weight rtds-text-xs rtds-font-medium">3.1MB</span>
</p>
</div>
<!-- Azioni in base allo stato -->
<!-- Download: pulsante scarica + pulsante elimina -->
<div class="rtds-flex rtds-items-center rtds-gap-2">
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-flex-shrink-0 rtds-content-01"><svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--arrow-down-tray" />
</svg>
<span class="rtds-sr-only">
Scarica il file documento-scarica.pdf
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-flex-shrink-0 rtds-content-01"><svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--trash" />
</svg>
<span class="rtds-sr-only">
Elimina il file documento-scarica.pdf
</span>
</button>
</div>
</div>
</div>
<h3 class="rtds-text-base rtds-font-semibold rtds-content-02 rtds-mb-3">
Upload — vuoto e con file caricati <span class="rtds-text-xs rtds-font-normal">(usa @icon e @button da core)</span>
</h3>
<div class="rtds-grid rtds-gap-8 md:rtds-grid-cols-2">
<div>
<p class="rtds-text-xs rtds-content-02 rtds-mb-2">Vuoto</p>
<div class="rtds-upload rtds-w-full rtds-space-y-5 md:rtds-space-y-6">
<!-- Pulsante principale per il caricamento -->
<div class="rtds-upload__button-area rtds-flex rtds-flex-col rtds-p-4 rtds-items-center rtds-justify-center rtds-gap-4 md:rtds-gap-6 rtds-background-01 rtds-border-dashed rtds-border-gray-03 rtds-border-2 rtds-rounded-md">
<div class="rtds-upload__description rtds-space-y-1.5">
<!--
note per accessibilità: il seguente paragrafo NON fornisce informazioni aggiuntive chi usa tecnologie assistive
così come è formulato è riferito all'esperienza utente che usa un mouse ecc (non tastiera o screen reader).
Inoltre fornisce indicazioni per la localizzazione del pulsante tramite posizionamento del pulsante stesso ("clicca sul pulsante qui sotto")
violando così il criterio di successo WCAG 1.3.3 -->
<p class="rtds-upload__help">Clicca il pulsante qui sotto per caricare i documenti dal tuo dispositivo.</p>
<!-- note per accessibilità: il seguente paragrafo fornisce informazioni aggiuntive chi usa tecnologie assistive
attraverso l'uso dell'id e dell'attributo aria-describedby="id-del-paragrafo" sull'input file-->
<p id="upload-help-text" class="rtds-upload__help">Formati <strong>PDF, DOCX, JPG, PNG</strong> - Max: <strong>10 MB per file</strong></p>
</div>
<input type="file" id="upload-input-file-upload-default" class="rtds-upload__input rtds-sr-only" aria-describedby="upload-help-text" accept="image/*,.pdf,.doc,.docx">
<label for="upload-input-file-upload-default" class="rtds-upload__button rtds-btn rtds-btn--outlined rtds-content-01 rtds-border-gray-03 rtds-cursor-pointer">
<svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--arrow-up-on-square" />
</svg>
Carica documento
</label>
</div>
<!-- Lista dei file caricati/in caricamento -->
</div>
</div>
<div>
<p class="rtds-text-xs rtds-content-02 rtds-mb-2">Con file caricati</p>
<div class="rtds-upload rtds-w-full rtds-space-y-5 md:rtds-space-y-6">
<!-- Pulsante principale per il caricamento -->
<div class="rtds-upload__button-area rtds-flex rtds-flex-col rtds-p-4 rtds-items-center rtds-justify-center rtds-gap-4 md:rtds-gap-6 rtds-background-01 rtds-border-dashed rtds-border-gray-03 rtds-border-2 rtds-rounded-md">
<div class="rtds-upload__description rtds-space-y-1.5">
<!--
note per accessibilità: il seguente paragrafo NON fornisce informazioni aggiuntive chi usa tecnologie assistive
così come è formulato è riferito all'esperienza utente che usa un mouse ecc (non tastiera o screen reader).
Inoltre fornisce indicazioni per la localizzazione del pulsante tramite posizionamento del pulsante stesso ("clicca sul pulsante qui sotto")
violando così il criterio di successo WCAG 1.3.3 -->
<p class="rtds-upload__help">Clicca il pulsante qui sotto per caricare i documenti dal tuo dispositivo.</p>
<!-- note per accessibilità: il seguente paragrafo fornisce informazioni aggiuntive chi usa tecnologie assistive
attraverso l'uso dell'id e dell'attributo aria-describedby="id-del-paragrafo" sull'input file-->
<p id="upload-help-text" class="rtds-upload__help">Formati <strong>PDF, DOCX, JPG, PNG</strong> - Max: <strong>10 MB per file</strong></p>
</div>
<input type="file" id="upload-input-file-upload-default" class="rtds-upload__input rtds-sr-only" aria-describedby="upload-help-text" multiple accept="image/*,.pdf,.doc,.docx">
<label for="upload-input-file-upload-default" class="rtds-upload__button rtds-btn rtds-btn--outlined rtds-content-01 rtds-border-gray-03 rtds-cursor-pointer">
<svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--arrow-up-on-square" />
</svg>
Carica file
</label>
</div>
<!-- Lista dei file caricati/in caricamento -->
<ul class="rtds-upload__file-list">
<li class="rtds-upload__file">
<div class="rtds-file is-loading" id="file-1">
<!-- Icona del file -->
<svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6 md:rtds-w-8 md:rtds-h-8 rtds-file__icon rtds-flex-shrink-0" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--document-text" />
</svg>
<div class="rtds-file__info">
<!-- Informazioni del file -->
<p class="rtds-file__name rtds-text-sm rtds-font-bold rtds-mb-1">documento-caricamento.pdf</p>
<!-- Barra di progresso (per stati loading) -->
<div class="rtds-file__progress">
<div class="rtds-file__progress-bar" role="progressbar" style="--file-progress-bar-width: 65%" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100">
</div>
</div>
<p class="rtds-file__status" aria-live="polite">
<span class="rtds-sr-only">
Caricamento file in corso: documento-caricamento.pdf -
</span>
<span class="rtds-file__weight rtds-text-xs rtds-font-medium">1MB di 2.1MB</span>
</p>
</div>
<!-- Azioni in base allo stato -->
<!-- Loading: solo pulsante cancella -->
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-flex-shrink-0 rtds-content-01"><svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--x-circle" />
</svg>
<span class="rtds-sr-only">
Annulla caricamento file documento-caricamento.pdf
</span>
</button>
</div>
</li>
<li class="rtds-upload__file">
<div class="rtds-file is-loading-error" id="file-2">
<!-- Icona del file -->
<svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6 md:rtds-w-8 md:rtds-h-8 rtds-file__icon rtds-flex-shrink-0" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--document-text" />
</svg>
<div class="rtds-file__info">
<!-- Informazioni del file -->
<p class="rtds-file__name rtds-text-sm rtds-font-bold rtds-mb-1">documento-errore.docx</p>
<!-- Barra di progresso (per stati loading) -->
<div class="rtds-file__progress">
<div class="rtds-file__progress-bar" role="progressbar" style="--file-progress-bar-width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">
</div>
</div>
<p class="rtds-file__status" aria-live="polite">
<span class="rtds-sr-only">
Errore caricamento file: documento-errore.docx -
</span>
<span class="rtds-file__weight rtds-text-xs rtds-font-medium">15MB</span>
<!-- Messaggio di errore -->
<span class="rtds-file__error rtds-text-xs rtds-font-bold rtds-content-error">
File troppo grande. Dimensione massima: 10MB
</span>
</p>
</div>
<!-- Azioni in base allo stato -->
<!-- Loading Error: icona errore + pulsante cancella -->
<div class="rtds-flex rtds-items-center rtds-gap-2">
<svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6 rtds-text-error" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--exclamation-circle" />
</svg>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-flex-shrink-0 rtds-content-01"><svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--x-circle" />
</svg>
<span class="rtds-sr-only">
Annulla caricamento file documento-errore.docx
</span>
</button>
</div>
</div>
</li>
<li class="rtds-upload__file">
<div class="rtds-file is-loading-completed" id="file-3">
<!-- Icona del file -->
<svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6 md:rtds-w-8 md:rtds-h-8 rtds-file__icon rtds-flex-shrink-0" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--document-text" />
</svg>
<div class="rtds-file__info">
<!-- Informazioni del file -->
<p class="rtds-file__name rtds-text-sm rtds-font-bold rtds-mb-1">documento-completato.jpg</p>
<!-- Barra di progresso (per stati loading) -->
<div class="rtds-file__progress">
<div class="rtds-file__progress-bar" role="progressbar" style="--file-progress-bar-width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
</div>
</div>
<p class="rtds-file__status" aria-live="polite">
<span class="rtds-sr-only">
Caricamento file completato: documento-completato.jpg -
</span>
<span class="rtds-file__weight rtds-text-xs rtds-font-medium">850KB</span>
</p>
</div>
<!-- Azioni in base allo stato -->
<!-- Loading Completed: icona check + pulsante cancella -->
<div class="rtds-flex rtds-items-center rtds-gap-2">
<svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6 rtds-text-success" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--check-circle" />
</svg>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-flex-shrink-0 rtds-content-01"><svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--x-circle" />
</svg>
<span class="rtds-sr-only">
Annulla caricamento file documento-completato.jpg
</span>
</button>
</div>
</div>
</li>
<li class="rtds-upload__file">
<div class="rtds-file is-download" id="file-4">
<!-- Icona del file -->
<svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6 md:rtds-w-8 md:rtds-h-8 rtds-file__icon rtds-flex-shrink-0" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--document-text" />
</svg>
<div class="rtds-file__info">
<!-- Informazioni del file -->
<p class="rtds-file__name rtds-text-sm rtds-font-bold rtds-mb-1">documento-scaricabile.pdf</p>
<!-- Barra di progresso (per stati loading) -->
<p class="rtds-file__status" aria-live="polite">
<span class="rtds-sr-only">
</span>
<span class="rtds-file__weight rtds-text-xs rtds-font-medium">1.8MB</span>
</p>
</div>
<!-- Azioni in base allo stato -->
<!-- Download: pulsante scarica + pulsante elimina -->
<div class="rtds-flex rtds-items-center rtds-gap-2">
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-flex-shrink-0 rtds-content-01"><svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--arrow-down-tray" />
</svg>
<span class="rtds-sr-only">
Scarica il file documento-scaricabile.pdf
</span>
</button>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-flex-shrink-0 rtds-content-01"><svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--trash" />
</svg>
<span class="rtds-sr-only">
Elimina il file documento-scaricabile.pdf
</span>
</button>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<section>
<h2 class="rtds-text-2xl rtds-font-bold rtds-mb-2 rtds-pb-2 rtds-border-b rtds-border-gray-03">F. 08-servizi — Page Header Base Smart</h2>
<div class="rtds-space-y-10">
<h3 class="rtds-text-base rtds-font-semibold rtds-content-02 rtds-mb-3">
Default (con back link)
</h3>
<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>
<h3 class="rtds-text-base rtds-font-semibold rtds-content-02 rtds-mb-3">
Complete (breadcrumb + CTA + actions)
</h3>
<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>
<h3 class="rtds-text-base rtds-font-semibold rtds-content-02 rtds-mb-3">
Nuova Istanza
</h3>
<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>
<h3 class="rtds-text-base rtds-font-semibold rtds-content-02 rtds-mb-3">
No Notifiche
</h3>
<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 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">
Titolo pagina
</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>
Procedimento principale: Codice Procedimento principale
</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 md:rtds-col-span-3">
<!-- 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--icon-left rtds-group/button rtds-btn--s 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-translate-x-1" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--users" />
</svg>
Soggetti coinvolti
</button>
<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>
<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>
</section>
</div>
{#
Test bundle: core.css + servizi.css — tutti i componenti servizi
Questa pagina NON carica main.css — solo core.css + servizi.css
(vedi _preview-core-servizi.njk).
#}
{% macro section(title, note) %}
<h2 class="rtds-text-2xl rtds-font-bold rtds-mb-2 rtds-pb-2 rtds-border-b rtds-border-gray-03">{{ title }}</h2>
{% if note %}<p class="rtds-text-sm rtds-content-02 rtds-mb-6">{{ note }}</p>{% endif %}
{% endmacro %}
{% macro subsection(title, dep) %}
<h3 class="rtds-text-base rtds-font-semibold rtds-content-02 rtds-mb-3">
{{ title }}{% if dep %} <span class="rtds-text-xs rtds-font-normal">({{ dep }})</span>{% endif %}
</h3>
{% endmacro %}
<div class="rtds-container rtds-mx-auto rtds-px-4 rtds-py-8 rtds-space-y-16">
{# Banner contestuale #}
<div class="rtds-p-4 rtds-rounded rtds-border rtds-border-gray-03 rtds-background-01">
<p class="rtds-text-sm rtds-content-02">
<strong>Preview di test.</strong>
Carica esclusivamente <code>core.css</code> + <code>servizi.css</code>
(senza <code>main.css</code>). Verificare che tutti i componenti si rendano
correttamente e che non vi siano stili mancanti o override inattesi.
</p>
</div>
{# ═══════════════════════════════════════════════════════════════
A. CORE — ATOMS
═══════════════════════════════════════════════════════════════ #}
<section>
{{ section("A. Core — Atoms") }}
<div class="rtds-space-y-8">
{{ subsection("Button") }}
<div class="rtds-flex rtds-flex-wrap rtds-gap-3 rtds-items-center">
{% render '@button--primary', { label: 'Primary' }, true %}
{% render '@button--secondary', { label: 'Secondary' }, true %}
{% render '@button--outlined', { label: 'Outlined', icon: 'mini--chevron-right' }, true %}
</div>
{{ subsection("Chip") }}
<div class="rtds-flex rtds-flex-wrap rtds-gap-3 rtds-items-center">
{% render '@chip--default', { label: 'Default', hasBtnClose: true }, true %}
{% render '@chip--category', { label: 'Categoria', srLabel: 'Categoria: ', icon: 'mini--computer-desktop' }, true %}
{% render '@chip--tag', { label: 'Tag', srLabel: 'Tag: ' }, true %}
</div>
{{ subsection("Tipografia") }}
<div class="rtds-space-y-2">
<p class="rtds-text-xl rtds-font-bold">Titolo H1 — rtds-text-xl font-bold</p>
<p class="rtds-text-base">Testo body — Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<p class="rtds-text-sm rtds-content-02">Testo secondario — rtds-text-sm content-02</p>
<a href="#" class="rtds-link">Link di esempio — rtds-link</a>
</div>
</div>
</section>
{# ═══════════════════════════════════════════════════════════════
B. CORE — MOLECULES
═══════════════════════════════════════════════════════════════ #}
<section>
{{ section("B. Core — Molecules") }}
<div class="rtds-space-y-10">
{{ subsection("Card") }}
<div class="rtds-grid rtds-gap-6 md:rtds-grid-cols-2">
{% render '@card--news', {
heading: 'Titolo notizia — test core.css',
excerpt: 'Breve testo della notizia. Verifica che card sia stilizzata da core.css.',
categoryText: 'Notizie', category: true, date: true,
ctaLinkLabel: 'Leggi di più', ctaIcon: 'mini--chevron-right'
}, true %}
{% render '@card--news', {
heading: 'Seconda card — verifica grid',
excerpt: 'Se entrambe sono allineate il grid funziona.',
categoryText: 'Comunicati', category: true, date: true,
ctaLinkLabel: 'Leggi di più', ctaIcon: 'mini--chevron-right'
}, true %}
</div>
{{ subsection("Input field") }}
<div class="rtds-max-w-md">
{% render '@input-field', {
inputId: 'test-input-core', label: 'Campo di testo',
inputDescription: 'Testo di supporto per il campo'
}, true %}
</div>
{{ subsection("Accordion") }}
{% render '@accordion', {}, true %}
</div>
</section>
{# ═══════════════════════════════════════════════════════════════
C. 07-WIDGETS — Componenti atomici
Test chiave: questi componenti usano classi da core (tab, input,
select, button). Se si rendono → dipendenza core→servizi ok.
═══════════════════════════════════════════════════════════════ #}
<section>
{{ section("C. 07-widgets — Componenti", "Usano classi core (@tab, @input-field, @select-field, @button). Verifica la dipendenza tra i due bundle.") }}
<div class="rtds-space-y-10">
{{ subsection("Widget Box") }}
<div class="rtds-max-w-sm">
{% render '@widget-box', {}, true %}
</div>
{{ subsection("Widget Nav", "usa @tab--borderless da core") }}
{% render '@widget-nav', {}, true %}
{{ subsection("Widget Chip Filters") }}
{% render '@widget-chip-filters', {}, true %}
{{ subsection("Widget Composite Field") }}
{% render '@widget-composite-field', {}, true %}
{{ subsection("Widget Field Row") }}
{% render '@widget-field-row', {}, true %}
{{ subsection("Widget Search", "usa @input-field, @select-field, @button da core — test di integrazione più pesante") }}
{% render '@widget-search', {}, true %}
</div>
</section>
{# ═══════════════════════════════════════════════════════════════
D. 08-SERVIZI — Card Smart (tutte le varianti)
═══════════════════════════════════════════════════════════════ #}
<section>
{{ section("D. 08-servizi — Card Smart", "Estende @card da core. Verifica il pattern triple fallback CSS (--_card-smart-bg, --_card-smart-border, --_card-smart-shadow).") }}
<div class="rtds-space-y-10">
{{ subsection("Standard — complete, accordion, agenda, notifiche") }}
<div class="rtds-space-y-4">
{% render '@card-smart--complete', {}, true %}
{% render '@card-smart--accordion', {}, true %}
{% render '@card-smart--agenda', {}, true %}
{% render '@card-smart--notifiche', {}, true %}
</div>
{{ subsection("Standard — shortcut, scadenza") }}
<div class="rtds-grid rtds-gap-4 md:rtds-grid-cols-2">
{% render '@card-smart--shortcut', {}, true %}
{% render '@card-smart--scadenza', {}, true %}
</div>
{{ subsection("Trascinabile (default / selected)", "verifica --_card-smart-bg e --_card-smart-border sullo stato selected") }}
<div class="rtds-space-y-3">
{% render '@card-smart--trascinabile', {}, true %}
{% render '@card-smart--trascinabile-selected', {}, true %}
</div>
{{ subsection("Selezione — radio sm, selected, checkbox sm") }}
<div class="rtds-space-y-3">
{% render '@card-smart--selezione', {}, true %}
{% render '@card-smart--selezione-selected', {}, true %}
{% render '@card-smart--selezione-checkbox', {}, true %}
</div>
{{ subsection("Selezione large — radio, checkbox, selected") }}
<div class="rtds-space-y-3">
{% render '@card-smart--selezione-large', {}, true %}
{% render '@card-smart--selezione-large-checkbox', {}, true %}
{% render '@card-smart--selezione-large-selected', {}, true %}
</div>
{{ subsection("Selezione procedimento — tutte le varianti") }}
<div class="rtds-space-y-3">
{% render '@card-smart--selezione-procedimento', {}, true %}
{% render '@card-smart--selezione-procedimento-radio', {}, true %}
{% render '@card-smart--selezione-procedimento-checkbox', {}, true %}
{% render '@card-smart--selezione-procedimento-checkbox-selected', {}, true %}
</div>
</div>
</section>
{# ═══════════════════════════════════════════════════════════════
E. 08-SERVIZI — Altri componenti
═══════════════════════════════════════════════════════════════ #}
<section>
{{ section("E. 08-servizi — Altri componenti") }}
<div class="rtds-space-y-10">
{{ subsection("Accordion Smart") }}
{% render '@accordion-smart', {}, true %}
{{ subsection("Struttura Gerarchica", "integra accordion-smart + card-smart + trascinamento-oggetti") }}
{% render '@struttura-gerarchica', {}, true %}
{{ subsection("Trascinamento Oggetti") }}
<div class="rtds-grid rtds-gap-4 md:rtds-grid-cols-2">
<div>
<p class="rtds-text-xs rtds-content-02 rtds-mb-2">Default (vuoto)</p>
{% render '@trascinamento-oggetti', { has_dragged_content: false }, true %}
</div>
<div>
<p class="rtds-text-xs rtds-content-02 rtds-mb-2">Con contenuto trascinato</p>
{% render '@trascinamento-oggetti--has-dragged-content', {}, true %}
</div>
</div>
{{ subsection("File — tutti gli stati") }}
<div class="rtds-max-w-md rtds-space-y-3">
{% render '@file', { id: '1', name: 'documento-caricamento.pdf', size: '1.2MB', status: 'is-loading', progress: 60 }, true %}
{% render '@file--loading-error', { id: '2', name: 'documento-errore.pdf', size: '0.8MB' }, true %}
{% render '@file--loading-completed', { id: '3', name: 'documento-ok.pdf', size: '2.4MB' }, true %}
{% render '@file--download', { id: '4', name: 'documento-scarica.pdf', size: '3.1MB' }, true %}
</div>
{{ subsection("Upload — vuoto e con file caricati", "usa @icon e @button da core") }}
<div class="rtds-grid rtds-gap-8 md:rtds-grid-cols-2">
<div>
<p class="rtds-text-xs rtds-content-02 rtds-mb-2">Vuoto</p>
{% render '@upload', { label: 'Carica documento', multiple: false }, true %}
</div>
<div>
<p class="rtds-text-xs rtds-content-02 rtds-mb-2">Con file caricati</p>
{% render '@upload--uploaded-files', {}, true %}
</div>
</div>
</div>
</section>
{# ═══════════════════════════════════════════════════════════════
F. 08-SERVIZI — Page Header Base Smart (tutte le varianti)
Renderizzato per ultimo perché occupa tutta la larghezza.
═══════════════════════════════════════════════════════════════ #}
<section>
{{ section("F. 08-servizi — Page Header Base Smart") }}
<div class="rtds-space-y-10">
{{ subsection("Default (con back link)") }}
{% render '@page-header-base-smart', {}, true %}
{{ subsection("Complete (breadcrumb + CTA + actions)") }}
{% render '@page-header-base-smart--complete', {}, true %}
{{ subsection("Nuova Istanza") }}
{% render '@page-header-base-smart--nuova-istanza', {}, true %}
{{ subsection("No Notifiche") }}
{% render '@page-header-base-smart--no-notifiche', {}, true %}
</div>
</section>
</div>
{
"pageTitle": "Test bundle: core + servizi"
}
No notes defined.