Page Header Base Smart

Intestazione di pagina per le applicazioni dei servizi digitali. Variante “smart” del page-header-base con funzionalità aggiuntive specifiche per i backoffice: menu azioni, notifiche, stato dell’istanza e metadati di autore/data.

Comportamento

<div class="rtds-page-header"> con layout configurabile a colonne. Rispetto al page-header-base informativo, aggiunge:

• Menu azioni (desktop e mobile) tramite @dropdown-menu--actions
• Barra notifiche con contatore e link
• Metadati dell’istanza (stato, autore, date) sotto la descrizione
• CTA multipli configurabili

Il titolo è renderizzato come <h1> di default, o come <p> se isContextBanner: true.

Varianti

• complete: Layout completo con sfondo, breadcrumb, descrizione, CTA multipli e menu azioni
• nuova-istanza: Layout per creazione nuova istanza con CTA “Scarica anteprima”
• no-notifiche: Layout senza barra notifiche
• semplice: Layout a larghezza piena senza colonna destra — chip in alto a destra, titolo e descrizione si espandono a tutta larghezza, metadati (stato/autore/date) e barra inferiore (notifiche + CTA) presenti. Nessun menu azioni dropdown. Da usare come base nei template di pagina.

Quale variante di header usare

I template in 05-templates/ usano di default page-header-base-smart--semplice. È possibile sostituirlo con qualsiasi altra variante in base alle esigenze del servizio.

Dipendenze

• @back-link — link “Torna a: Nome Tema”
• @breadcrumb — breadcrumb di navigazione
• @chip--category — chip categoria
• @dropdown-menu--actions — menu azioni (desktop e mobile)
• @vertical-divider — divisore verticale
• @icon — icone (outline–bell, outline–user, outline–calendar)
• @action-link--has-icon — link azione con icona
• @button — CTA configurabili

Parametri di configurazione

Contesto di sviluppo Fractal/Nunjucks — Questa sezione riguarda esclusivamente i parametri del context .config.yml usati durante lo sviluppo nella libreria. Non descrive attributi HTML da usare nei temi o ambienti di implementazione.

Parametri Base

• title (stringa, obbligatorio): Titolo dell’istanza (supporta HTML, es. <a>)
• titleContext (stringa, opzionale): Contesto del titolo mostrato come sottotitolo <span> prima del titolo principale
• description (stringa, opzionale): Descrizione dell’istanza
• isContextBanner (booleano, opzionale): Renderizza il titolo come <p> invece di <h1>
• hasBg (booleano, opzionale): Aggiunge sfondo e stile page-header--has-bg
• padding (stringa, opzionale): Classi padding aggiuntive
• classes (stringa, opzionale): Classi CSS aggiuntive per il contenitore
• backLink (oggetto/booleano, opzionale): Link di ritorno. Se false, non viene mostrato. Accetta { label, icon, classes }

Parametri di navigazione

• breadcrumb.items (array, opzionale): Voci del breadcrumb con label

Parametri di layout

• contentGridTemplateColumns (stringa, opzionale): Classi griglia (es. rtds-grid-cols-1 md:rtds-grid-cols-12)
• contentLeftColumnSpan (stringa, opzionale): Span colonna sinistra
• contentRightColumnSpan (stringa, opzionale): Span colonna destra
• contentLeftMaxWidth (stringa, opzionale): Larghezza massima colonna sinistra

Parametri azioni

• actions (booleano, opzionale): Se true, mostra l’area azioni nella colonna destra
• cta (oggetto o array, opzionale): CTA da mostrare. Può essere un singolo oggetto o un array. Ogni item accetta:
  • variant (stringa): Variante del button (es. "--primary", "--outlined", "--icon-left-s")
  • label (stringa): Testo del pulsante
  • classes (stringa, opzionale): Classi CSS aggiuntive
  • icon (stringa, opzionale): ID icona
  • iconTransformType (stringa, opzionale): Animazione icona (translate, scale)

Accessibilità

WCAG 2.1

Livello AA — criteri pertinenti:

• 4.1.2 Nome, ruolo, valore — i menu azioni espongono aria-expanded e aria-controls; il titolo usa aria-labelledby quando è presente titleContext
• 1.3.1 Informazioni e correlazioni — il titolo è un <h1> (o <p> con isContextBanner) con gerarchia corretta; il titleContext è uno <span> che introduce il titolo principale
• 2.4.1 Salto di blocchi — il componente include navigazione breadcrumb e back-link per aiutare la navigazione

Struttura e semantica

• Il componente è renderizzato come <div class="rtds-page-header"> — contenitore non semantico; la gerarchia è affidata all’<h1> interno
• Il titolo è un <h1> di default — usare isContextBanner: true per renderizzarlo come <p> quando il componente è usato come banner di contesto (non heading principale)
• Quando titleContext è presente, sia il contesto che il titolo hanno ID espliciti collegati tramite aria-labelledby="pageHeaderTitleContext pageHeaderTitle" sull’<h1>

Attributi ARIA

Per gli attributi ARIA di @dropdown-menu--actions (es. aria-haspopup, aria-expanded, aria-controls) e @back-link, consultare la documentazione dei rispettivi componenti.

Navigazione da tastiera

Gestione del focus

• Focus visibile: lo stile :focus-visible è sempre visibile e non viene rimosso via CSS
• I menu azioni hanno versioni separate mobile e desktop (rtds-hidden md:rtds-flex / md:rtds-hidden): entrambe le versioni sono nel DOM simultaneamente — l’implementazione dei menu deve garantire ID univoci per evitare conflitti ARIA

Screen reader

• Quando titleContext è presente, lo screen reader legge il contesto e il titolo come un’unica etichetta attraverso aria-labelledby
• I menu azioni duplicati (mobile/desktop) hanno ID distinti (actionsMenuMobile01, actionsMenuDesktop01) per evitare collisioni; prestare attenzione che entrambi siano navigabili ma non creino contenuto ridondante
• La barra notifiche contiene testo descrittivo (“Ci sono 2 notifiche per questa istanza”) leggibile dagli screen reader

Stili CSS

• .rtds-page-header: Contenitore principale
• .rtds-page-header--has-bg: Variante con sfondo
• .rtds-page-header--base: Classe modificatrice base
• .rtds-page-header__content: Wrapper griglia principale
• .rtds-page-header__title: Wrapper titolo
• .rtds-page-header__description: Wrapper descrizione e metadati
• .rtds-page-header__bar: Barra inferiore con notifiche e CTA
  • Bordo superiore border-gray-03
  • Layout grid su mobile, flex su lg

Esempi di utilizzo

<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="#"aria-current="page">
          Pagina corrente
          
        </a>
    </li>
    
  </ol>
</nav>

    
    <div class="rtds-page-header__content">
        <div class="rtds-grid rtds-gap-5">
            <div class="rtds-flex rtds-items-start rtds-gap-3">
                <div class="rtds-page-header__title rtds-space-y-4 rtds-flex-1">
                    
                    <h1 class="rtds-heading-1">
                        Titolo del servizio
                    </h1>
                </div>
                <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>
            </div>

            
                <div class="rtds-page-header__description rtds-text-base lg:rtds-text-lg">
                    <p>Descrizione del servizio.</p>

                    <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 class="rtds-page-header__bar rtds-grid lg:rtds-flex rtds-pt-4 rtds-gap-5 md:rtds-gap-6 rtds-border-t rtds-border-gray-03">
                <div class="rtds-grid md:rtds-flex rtds-items-center rtds-gap-3 md:rtds-gap-4">
                    <div class="rtds-content-02 rtds-flex rtds-items-center rtds-gap-2 md:rtds-gap-3">
                        <div class="rtds-flex rtds-items-center rtds-rounded-full rtds-w-6 rtds-h-6 md:rtds-w-8 md:rtds-h-8 rtds-border-2 rtds-border-secondary">
                            <svg
  class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-6 md:rtds-h-6 rtds-flex-1"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#outline--bell" />
</svg>

                        </div>
                        <p class="rtds-text-xs md:rtds-text-sm rtds-font-bold">
                            Ci sono 2 notifiche per questa istanza.
                        </p>
                    </div>
                    <div class="rtds-vertical-divider rtds-w-4 md:rtds-w-6 rtds-hidden md:rtds-block">
    <img class="rtds-w-full rtds-h-auto" src="../../images/vertical-divider.svg" alt="">
</div>

                    <a href="" class="rtds-action-link
     rtds-action-link--sm rtds-action-link--has-icon
">
            Link text
        
         
            <svg
  class="rtds-icon rtds-fill-current"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#mini--chevron-right" />
</svg>

        
        </a>
                </div>
                <div class="rtds-grid rtds-gap-3 md:rtds-gap-4 md:rtds-flex md:rtds-flex-wrap md:rtds-items-center lg:rtds-ml-auto lg:rtds-justify-end">
                    
                        
                            <button type="button"
    class="rtds-btn 
    rtds-btn--primary
     rtds-btn--s"







>
        
        Button
        
        
</button>

                        
                            <button type="button"
    class="rtds-btn 
    rtds-btn--outlined rtds-btn--s"







>
        
        Button
        
        
</button>

                        
                            <button type="button"
    class="rtds-btn 
    rtds-btn--icon-left rtds-group/button rtds-btn--secondary rtds-btn--s"







>
    
    
    <svg
  class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-transition-all rtds-duration-200 rtds-ease-out rtds-transform group-hover/button:-rtds-translate-x-1"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#mini--chevron-left" />
</svg>

        
        Button icon
        
        
</button>

                        
                            <button type="button"
    class="rtds-btn 
    rtds-btn--icon-left rtds-group/button rtds-btn--outlined rtds-btn--s"







>
    
    
    <svg
  class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-transition-all rtds-duration-200 rtds-ease-out rtds-transform group-hover/button:rtds-scale-125"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#outline--arrow-down-tray" />
</svg>

        
        Button icon
        
        
</button>

                        
                    
                    <a href="" class="rtds-action-link
     rtds-action-link--sm rtds-action-link--has-icon
">
            Link text
        
         
            <svg
  class="rtds-icon rtds-fill-current"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#mini--arrow-small-right" />
</svg>

        
        </a>
                </div>
            </div>
        </div>
    </div>
</div>




<div class="rtds-page-header rtds-container rtds-space-y-2 rtds-page-header--has-bg rtds-page-header--base">
    
    
    
        <nav class="rtds-breadcrumb" aria-label="Breadcrumb">
  <ol class="rtds-breadcrumb__list">
    
    <li class="rtds-breadcrumb__item">
        <a class="rtds-breadcrumb__link" href="#">
          Livello 1
          
            <svg
  class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-ml-2"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#mini--chevron-right" />
</svg>

          
        </a>
    </li>
    
    <li class="rtds-breadcrumb__item">
        <a class="rtds-breadcrumb__link" href="#">
          Livello 2
          
            <svg
  class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-ml-2"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#mini--chevron-right" />
</svg>

          
        </a>
    </li>
    
    <li class="rtds-breadcrumb__item">
        <a class="rtds-breadcrumb__link" href="#"aria-current="page">
          Pagina corrente
          
        </a>
    </li>
    
  </ol>
</nav>

    
    <div class="rtds-page-header__content rtds-grid rtds-gap-5 md:rtds-gap-12 rtds-grid-cols-1 md:rtds-grid-cols-12">
        
            <div class="rtds-grid rtds-gap-5 rtds-col-span-12 md:rtds-col-span-10">
                <div class="rtds-flex rtds-gap-3">
                    <div class="rtds-page-header__title rtds-space-y-4 rtds-flex-1">
                        
                        <h1 class="rtds-heading-1">
                            Titolo pagina <a href='#'>con link</a>
                        </h1>

                    </div>
                    <div class="rtds-flex rtds-justify-end rtds-gap-3">
                         <div><span class="rtds-chip rtds-chip--category">
        <svg
  class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-mr-1.5"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#mini--computer-desktop" />
</svg>

    
            <span class="rtds-sr-only">Categoria: </span>
        
        categoria</span></div>
                        <!-- Actions menu mobile -->
                        <!-- I menu di editing/azione sono realizzati in due versioni, mobile e desktop -->
                        <div class="rtds-flex rtds-justify-end rtds-gap-3 md:rtds-hidden">
                        
                                <div class="rtds-dropdown-menu rtds-dropdown-menu is-dropdown-menu--actions rtds-relative">
    <button class="rtds-dropdown-menu__trigger rtds-dropdown-trigger rtds-group rtds-w-full rtds-flex rtds-items-center  rtds-p-0 rtds-justify-center" aria-expanded="false" aria-controls="actionsMenuMobile01">
        
    <span class="rtds-sr-only">
        Titolo pagina - 
        Opzioni
    </span>

        <svg
  class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6 rtds-dropdown-menu__trigger-icon"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#outline--cog-6-tooth" />
</svg>

    </button>
    
    <ul class="rtds-dropdown-menu__list rtds-hidden rtds-w-[25ch] rtds-absolute rtds-right-0 rtds-top-10 rtds-bg-white rtds-shadow-lg rtds-z-10 rtds-rounded rtds-border rtds-border-gray-01">

        
        <li class="rtds-dropdown-menu__item rtds-group/menu-item">
            <a class="rtds-dropdown-menu__link rtds-block rtds-transition" href="">
                <div class="rtds-flex rtds-gap-2 rtds-items-center">
                    
                        <svg
  class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6 rtds-mr-2"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#outline--magnifying-glass-circle" />
</svg>

                    
                    <span class="rtds-grow">Visualizza profilo</span>
                    
                </div>
                
            </a>
        </li>
        
        <li class="rtds-dropdown-menu__item rtds-group/menu-item">
            <a class="rtds-dropdown-menu__link rtds-block rtds-transition" href="">
                <div class="rtds-flex rtds-gap-2 rtds-items-center">
                    
                        <svg
  class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6 rtds-mr-2"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#outline--pencil" />
</svg>

                    
                    <span class="rtds-grow">Modifica</span>
                    
                </div>
                
            </a>
        </li>
        
        <li class="rtds-dropdown-menu__item rtds-group/menu-item">
            <a class="rtds-dropdown-menu__link rtds-block rtds-transition" href="">
                <div class="rtds-flex rtds-gap-2 rtds-items-center">
                    
                        <svg
  class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6 rtds-mr-2"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#outline--trash" />
</svg>

                    
                    <span class="rtds-grow">Cancella</span>
                    
                </div>
                
            </a>
        </li>
        
    
    </ul>

</div>


                                <div class="rtds-dropdown-menu rtds-dropdown-menu is-dropdown-menu--actions rtds-relative">
    <button class="rtds-dropdown-menu__trigger rtds-dropdown-trigger rtds-group rtds-w-full rtds-flex rtds-items-center  rtds-p-0 rtds-justify-center" aria-expanded="false" aria-controls="actionsMenuMobile02">
        
    <span class="rtds-sr-only">
        Titolo pagina - 
        Opzioni
    </span>

        <svg
  class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6 rtds-dropdown-menu__trigger-icon"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#mini--ellipsis-vertical" />
</svg>

    </button>
    
    <ul class="rtds-dropdown-menu__list rtds-hidden rtds-w-[25ch] rtds-absolute rtds-right-0 rtds-top-10 rtds-bg-white rtds-shadow-lg rtds-z-10 rtds-rounded rtds-border rtds-border-gray-01">

        
        <li class="rtds-dropdown-menu__item rtds-group/menu-item">
            <a class="rtds-dropdown-menu__link rtds-block rtds-transition" href="">
                <div class="rtds-flex rtds-gap-2 rtds-items-center">
                    
                        <svg
  class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6 rtds-mr-2"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#outline--magnifying-glass-circle" />
</svg>

                    
                    <span class="rtds-grow">Visualizza profilo</span>
                    
                </div>
                
            </a>
        </li>
        
        <li class="rtds-dropdown-menu__item rtds-group/menu-item">
            <a class="rtds-dropdown-menu__link rtds-block rtds-transition" href="">
                <div class="rtds-flex rtds-gap-2 rtds-items-center">
                    
                        <svg
  class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6 rtds-mr-2"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#outline--pencil" />
</svg>

                    
                    <span class="rtds-grow">Modifica</span>
                    
                </div>
                
            </a>
        </li>
        
        <li class="rtds-dropdown-menu__item rtds-group/menu-item">
            <a class="rtds-dropdown-menu__link rtds-block rtds-transition" href="">
                <div class="rtds-flex rtds-gap-2 rtds-items-center">
                    
                        <svg
  class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6 rtds-mr-2"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#outline--trash" />
</svg>

                    
                    <span class="rtds-grow">Cancella</span>
                    
                </div>
                
            </a>
        </li>
        
    
    </ul>

</div>

                        </div>
                    </div>
                </div>
                
                    <div class="rtds-page-header__description rtds-text-base lg:rtds-text-lg">
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
                        </p>

                        <!-- stato e altri metadati -->
                        <div class="rtds-flex rtds-flex-wrap rtds-items-center rtds-gap-4 rtds-pt-3">
                            <span class="rtds-text-xs rtds-font-bold rtds-content-primary">STATO</span>
                              <div class="rtds-vertical-divider rtds-w-2 md:rtds-w-4 rtds-hidden md:rtds-block">
    <img class="rtds-w-full rtds-h-auto" src="../../images/vertical-divider.svg" alt="">
</div>

                            <ul class="rtds-flex rtds-flex-wrap rtds-items-center rtds-gap-4 rtds-list-none rtds-p-0 rtds-m-0">
                                <li class="rtds-flex rtds-items-center rtds-gap-2">
                                    <svg
  class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-content-primary"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#outline--user" />
</svg>

                                    <span class="rtds-text-sm rtds-text-gray-600">Autore</span>
                                </li>
                                  <div class="rtds-vertical-divider rtds-w-2 md:rtds-w-4 rtds-hidden md:rtds-block">
    <img class="rtds-w-full rtds-h-auto" src="../../images/vertical-divider.svg" alt="">
</div>

                                <li class="rtds-flex rtds-items-center rtds-gap-2">
                                    <svg
  class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-content-primary"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#outline--calendar" />
</svg>

                                    <span class="rtds-text-sm rtds-text-gray-600">28.12.2025 alle 15:00</span>
                                </li>
                                  <div class="rtds-vertical-divider rtds-w-2 md:rtds-w-4 rtds-hidden md:rtds-block">
    <img class="rtds-w-full rtds-h-auto" src="../../images/vertical-divider.svg" alt="">
</div>

                                <li class="rtds-flex rtds-items-center rtds-gap-2">
                                    <svg
  class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-content-primary"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#outline--calendar" />
</svg>

                                    <span class="rtds-text-sm rtds-text-gray-600">28.12.2025 alle 15:00</span>
                                </li>
                                  <div class="rtds-vertical-divider rtds-w-2 md:rtds-w-4 rtds-hidden md:rtds-block">
    <img class="rtds-w-full rtds-h-auto" src="../../images/vertical-divider.svg" alt="">
</div>

                                <li class="rtds-flex rtds-items-center rtds-gap-2">
                                    <svg
  class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-content-primary"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#outline--calendar" />
</svg>

                                    <span class="rtds-text-sm rtds-text-gray-600">28.12.2025 alle 15:00</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                
                
                
                
            </div>

            
                
                
                    <div class="rtds-grid rtds-gap-3 md:rtds-gap-4 md:rtds-items-end rtds-pt-6 md:rtds-pt-0 md:rtds-pl-6 rtds-border-t md:rtds-border-t-0 md:rtds-border-l rtds-border-gray-03 rtds-col-span-12 md:rtds-col-span-2">
                    <!-- Actions menu desktop -->
                    <!-- I menu di editing/azione sono realizzati in due versioni, mobile e desktop -->
                    <div class="rtds-hidden md:rtds-flex md:rtds-justify-end md:rtds-gap-3">
                        <div class="rtds-dropdown-menu rtds-dropdown-menu is-dropdown-menu--actions rtds-relative">
    <button class="rtds-dropdown-menu__trigger rtds-dropdown-trigger rtds-group rtds-w-full rtds-flex rtds-items-center  rtds-p-0 rtds-justify-center" aria-expanded="false" aria-controls="actionsMenuDesktop01">
        
    <span class="rtds-sr-only">
        Titolo pagina - 
        Configurazioni
    </span>

        <svg
  class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6 rtds-dropdown-menu__trigger-icon"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#outline--cog-6-tooth" />
</svg>

    </button>
    
    <ul class="rtds-dropdown-menu__list rtds-hidden rtds-w-[25ch] rtds-absolute rtds-right-0 rtds-top-10 rtds-bg-white rtds-shadow-lg rtds-z-10 rtds-rounded rtds-border rtds-border-gray-01">

        
        <li class="rtds-dropdown-menu__item rtds-group/menu-item">
            <a class="rtds-dropdown-menu__link rtds-block rtds-transition" href="">
                <div class="rtds-flex rtds-gap-2 rtds-items-center">
                    
                        <svg
  class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6 rtds-mr-2"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#outline--magnifying-glass-circle" />
</svg>

                    
                    <span class="rtds-grow">Visualizza profilo</span>
                    
                </div>
                
            </a>
        </li>
        
        <li class="rtds-dropdown-menu__item rtds-group/menu-item">
            <a class="rtds-dropdown-menu__link rtds-block rtds-transition" href="">
                <div class="rtds-flex rtds-gap-2 rtds-items-center">
                    
                        <svg
  class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6 rtds-mr-2"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#outline--pencil" />
</svg>

                    
                    <span class="rtds-grow">Modifica</span>
                    
                </div>
                
            </a>
        </li>
        
        <li class="rtds-dropdown-menu__item rtds-group/menu-item">
            <a class="rtds-dropdown-menu__link rtds-block rtds-transition" href="">
                <div class="rtds-flex rtds-gap-2 rtds-items-center">
                    
                        <svg
  class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6 rtds-mr-2"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#outline--trash" />
</svg>

                    
                    <span class="rtds-grow">Cancella</span>
                    
                </div>
                
            </a>
        </li>
        
    
    </ul>

</div>


                    <div class="rtds-dropdown-menu rtds-dropdown-menu is-dropdown-menu--actions rtds-relative">
    <button class="rtds-dropdown-menu__trigger rtds-dropdown-trigger rtds-group rtds-w-full rtds-flex rtds-items-center  rtds-p-0 rtds-justify-center" aria-expanded="false" aria-controls="actionsMenuDesktop02">
        
    <span class="rtds-sr-only">
        Titolo pagina - 
        Opzioni
    </span>

        <svg
  class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6 rtds-dropdown-menu__trigger-icon"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#mini--ellipsis-vertical" />
</svg>

    </button>
    
    <ul class="rtds-dropdown-menu__list rtds-hidden rtds-w-[25ch] rtds-absolute rtds-right-0 rtds-top-10 rtds-bg-white rtds-shadow-lg rtds-z-10 rtds-rounded rtds-border rtds-border-gray-01">

        
        <li class="rtds-dropdown-menu__item rtds-group/menu-item">
            <a class="rtds-dropdown-menu__link rtds-block rtds-transition" href="">
                <div class="rtds-flex rtds-gap-2 rtds-items-center">
                    
                        <svg
  class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6 rtds-mr-2"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#outline--magnifying-glass-circle" />
</svg>

                    
                    <span class="rtds-grow">Visualizza profilo</span>
                    
                </div>
                
            </a>
        </li>
        
        <li class="rtds-dropdown-menu__item rtds-group/menu-item">
            <a class="rtds-dropdown-menu__link rtds-block rtds-transition" href="">
                <div class="rtds-flex rtds-gap-2 rtds-items-center">
                    
                        <svg
  class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6 rtds-mr-2"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#outline--pencil" />
</svg>

                    
                    <span class="rtds-grow">Modifica</span>
                    
                </div>
                
            </a>
        </li>
        
        <li class="rtds-dropdown-menu__item rtds-group/menu-item">
            <a class="rtds-dropdown-menu__link rtds-block rtds-transition" href="">
                <div class="rtds-flex rtds-gap-2 rtds-items-center">
                    
                        <svg
  class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6 rtds-mr-2"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#outline--trash" />
</svg>

                    
                    <span class="rtds-grow">Cancella</span>
                    
                </div>
                
            </a>
        </li>
        
    
    </ul>

</div>

                    </div>
                        
                            
                                <button type="button"
    class="rtds-btn 
    rtds-btn--primary
     rtds-btn--s"







>
        
        Button
        
        
</button>

                            
                                <button type="button"
    class="rtds-btn 
    rtds-btn--outlined rtds-btn--s"







>
        
        Button
        
        
</button>

                            
                                <button type="button"
    class="rtds-btn 
    rtds-btn--icon-left rtds-group/button rtds-btn--secondary rtds-btn--s"







>
    
    
    <svg
  class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-transition-all rtds-duration-200 rtds-ease-out rtds-transform group-hover/button:-rtds-translate-x-1"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#mini--chevron-left" />
</svg>

        
        Button icon
        
        
</button>

                            
                                <button type="button"
    class="rtds-btn 
    rtds-btn--icon-left rtds-group/button rtds-btn--outlined rtds-btn--s"







>
    
    
    <svg
  class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-transition-all rtds-duration-200 rtds-ease-out rtds-transform group-hover/button:rtds-scale-125"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#outline--arrow-down-tray" />
</svg>

        
        Button icon
        
        
</button>

                            
                        

                        <a href="" class="rtds-action-link
     rtds-action-link--sm rtds-action-link--has-icon
">
            Link text
        
         
            <svg
  class="rtds-icon rtds-fill-current"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#mini--arrow-small-right" />
</svg>

        
        </a>
                    </div>
                
            

            <div class="rtds-page-header__bar rtds-grid lg:rtds-flex rtds-pt-4 rtds-gap-5 md:rtds-gap-6 rtds-col-span-12 rtds-border-t rtds-border-gray-03">
                <div class="rtds-grid md:rtds-flex rtds-items-center rtds-gap-3 md:rtds-gap-4">
                    <div class="rtds-content-02 rtds-flex rtds-items-center rtds-gap-2 md:rtds-gap-3">
                        <div class="rtds-flex rtds-items-center rtds-rounded-full rtds-w-6 rtds-h-6 md:rtds-w-8 md:rtds-h-8 rtds-border-2 rtds-border-secondary">
                            <svg
  class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-6 md:rtds-h-6 rtds-flex-1"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#outline--bell" />
</svg>


                        </div>
       
                        <p class=" rtds-text-xs md:rtds-text-sm rtds-font-bold">
                            Ci sono 2 notifiche per questa istanza.
                        </p>
                    </div>

                    <div class="rtds-vertical-divider rtds-w-4 md:rtds-w-6 rtds-hidden md:rtds-block">
    <img class="rtds-w-full rtds-h-auto" src="../../images/vertical-divider.svg" alt="">
</div>


                    <a href="" class="rtds-action-link
     rtds-action-link--sm rtds-action-link--has-icon
">
            Link text
        
         
            <svg
  class="rtds-icon rtds-fill-current"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#mini--chevron-right" />
</svg>

        
        </a>
                </div>
                <div class="rtds-grid rtds-gap-3 md:rtds-gap-4 md:rtds-flex md:rtds-flex-wrap md:rtds-items-center lg:rtds-ml-auto lg:rtds-justify-end">
                        
                            
                                <button type="button"
    class="rtds-btn 
    rtds-btn--primary
     rtds-btn--s"







>
        
        Button
        
        
</button>

                            
                                <button type="button"
    class="rtds-btn 
    rtds-btn--outlined rtds-btn--s"







>
        
        Button
        
        
</button>

                            
                                <button type="button"
    class="rtds-btn 
    rtds-btn--icon-left rtds-group/button rtds-btn--secondary rtds-btn--s"







>
    
    
    <svg
  class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-transition-all rtds-duration-200 rtds-ease-out rtds-transform group-hover/button:-rtds-translate-x-1"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#mini--chevron-left" />
</svg>

        
        Button icon
        
        
</button>

                            
                                <button type="button"
    class="rtds-btn 
    rtds-btn--icon-left rtds-group/button rtds-btn--outlined rtds-btn--s"







>
    
    
    <svg
  class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-transition-all rtds-duration-200 rtds-ease-out rtds-transform group-hover/button:rtds-scale-125"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#outline--arrow-down-tray" />
</svg>

        
        Button icon
        
        
</button>

                            
                        

                        <a href="" class="rtds-action-link
     rtds-action-link--sm rtds-action-link--has-icon
">
            Link text
        
         
            <svg
  class="rtds-icon rtds-fill-current"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#mini--arrow-small-right" />
</svg>

        
        </a>
                    </div>
            </div>
        
    </div>
    
</div>




<div class="rtds-page-header rtds-container rtds-space-y-2 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">
                            Domanda contributo energia rinnovabile
                        </h1>
                    </div>
                </div>
                
                
                    <div class="rtds-page-header__description rtds-text-base lg:rtds-text-lg">
                        <p>
                            Procedimento principale: ENE-2025-001
                        </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">&lt;CONTESTO&gt;</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">&lt;AMMINISTRAZIONE&gt;</li>
                                <div class="rtds-vertical-divider rtds-w-2 md:rtds-w-4 rtds-hidden md:rtds-block">
    <img class="rtds-w-full rtds-h-auto" src="../../images/vertical-divider.svg" alt="">
</div>

                                <li class="rtds-flex rtds-items-center rtds-gap-2">
                                    <svg
  class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-content-primary"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#outline--calendar" />
</svg>

                                    <span class="rtds-text-sm rtds-text-gray-600">28.12.2025 alle 15:00</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                
                
                
                
            </div>

            
            <div class="rtds-grid rtds-gap-2 md:rtds-gap-0 md:rtds-items-center  md:rtds-col-span-3">
                <div class="rtds-flex rtds-items-center rtds-gap-3">
                    <div class="rtds-text-sm rtds-text-gray-600">
                        Soggetti coinvolti: <strong>3</strong>
                    </div>
                    <button type="button"
    class="rtds-btn 
    rtds-btn--outlined rtds-btn--s rtds-border-gray-03 rtds-flex-1 rtds-text-black hover:rtds-border-gray-03 hover:rtds-text-black hover:rtds-background-04 focus:rtds-border-gray-03 focus:rtds-text-black focus:rtds-background-04"







>
        
        Gestisci
        
        
</button>

                </div>
                
                    <div class="rtds-grid rtds-gap-2 md:rtds-gap-0 md:rtds-items-center">
                        
                            <button type="button"
    class="rtds-btn 
    rtds-btn--icon-left rtds-group/button rtds-btn--s rtds-btn--secondary rtds-btn--s"







>
    
    
    <svg
  class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-transition-all rtds-duration-200 rtds-ease-out rtds-transform group-hover/button:-rtds-translate-x-1"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#outline--arrow-down-tray" />
</svg>

        
        Scarica anteprima
        
        
</button>

                        
                    </div>
                
            </div>
            
        
    </div>
    
</div>



<div class="rtds-page-header rtds-container rtds-space-y-2 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>