<div class="rtds-skip-link">
<a href="#mainContent" class="rtds-skip-link__link rtds-sr-only focus:rtds-not-sr-only focus:rtds-py-2 focus:rtds-px-4">
Vai al contenuto principale
</a>
</div>
<header class="rtds-header" id="siteHeader" aria-label="Header del servizio">
<div class="rtds-top-bar rtds-py-1 md:rtds-py-2 rtds-px-4 rtds-hidden lg:rtds-flex">
<div class="rtds-top-bar__container rtds-container">
<div class="rtds-top-bar__utilities-area rtds-flex rtds-ml-auto">
<nav class="rtds-user-dropdown" aria-label="Utente" id="userDropdown">
<div class="rtds-dropdown-menu rtds-user-dropdown__menu has-dropdown-menu rtds-flex-1">
<button class="rtds-dropdown-menu__trigger rtds-dropdown-trigger rtds-group hover:rtds-underline hover:rtds-content-primary aria-expanded:rtds-bg-white aria-expanded:rtds-content-primary aria-expanded:rtds-relative" aria-expanded="false" aria-controls="userDropdown">
<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--user" />
</svg>
Username Surname<svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5 rtds-ml-auto rtds-transition-all rtds-dropdown-menu__trigger-icon group-aria-expanded:-rtds-rotate-180" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-down" />
</svg>
</button>
<ul class="rtds-dropdown-menu__list rtds-user-dropdown__menu-list rtds-hidden rtds-border rtds-w-full lg:rtds-rounded lg:rtds-shadow-md lg:rtds-absolute" id="userDropdown">
<li class="rtds-dropdown-menu__item rtds-user-dropdown__menu-item">
<div class="rtds-user-dropdown__menu-label rtds-items-center">
Item label 1
</div>
<ul class="rtds-user-dropdown__menu-sublist">
<li class="rtds-user-dropdown__menu-label">
<a class="rtds-user-dropdown__menu-link" href="">
Item label 1
</a>
</li>
<li class="rtds-user-dropdown__menu-label">
<a class="rtds-user-dropdown__menu-link" href="">
Item label 1
</a>
</li>
</ul>
</li>
<li class="rtds-dropdown-menu__item rtds-user-dropdown__menu-item">
<div class="rtds-user-dropdown__menu-label rtds-items-center">
Item label 1
</div>
<ul class="rtds-user-dropdown__menu-sublist">
<li class="rtds-user-dropdown__menu-label">
<a class="rtds-user-dropdown__menu-link" href="">
Item label 1
</a>
</li>
<li class="rtds-user-dropdown__menu-label">
<a class="rtds-user-dropdown__menu-link" href="">
Item label 1
</a>
</li>
</ul>
</li>
<li class="rtds-dropdown-menu__item rtds-user-dropdown__menu-item">
<a class="rtds-user-dropdown__menu-logout rtds-user-dropdown__menu-link is-logout" href="#">
Esci<svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5 rtds-ml-auto rtds-transition-all rtds-dropdown-menu__trigger-icon group-aria-expanded:-rtds-rotate-180" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#solid--arrow-right-start-on-rectangle" />
</svg>
</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div><!-- /END TOPBAR -->
<div class="rtds-main-heading">
<div class="rtds-main-heading__container rtds-container rtds-mx-auto rtds-flex rtds-items-center rtds-flex-1">
<div class="rtds-site-branding rtds-branding rtds-gap-4" style="--branding-max-width: 326px; --branding-max-width-xl: 326px;">
<a class="rtds-site-logo xs:rtds-flex-none rtds-logo--main rtds-w-[35px] rtds-h-[35px] md:rtds-w-[75px] md:rtds-h-[75px]" href="#">
<img class="rtds-w-full rtds-h-full rtds-object-contain rtds-object-left-top" src="../../images/logo-regione-square@2x.png" srcset="../../images/logo-regione-square@2x.png 1x, ../../images/logo-regione-square@2x@2x.png 2x" alt="Regione Toscana - home page" width="75" height="75" />
</a>
<div class="rtds-site-branding__secondary">
<a class="rtds-site-logo rtds-logo--secondary rtds-logo--secondary rtds-h-[35px] md:rtds-h-[75px]" href="#">
<img class="rtds-w-full rtds-h-full rtds-object-contain rtds-object-left-top" src="../../images/logo-regione-square@2x.png" alt="Nome Servizio - home page" width="265" height="75" />
</a>
<span class="rtds-site-branding__secondary-text">
Sportello Digitale
</span>
</div>
</div>
<div class="rtds-main-headings__center rtds-flex-1 lg:rtds-ml-auto lg:rtds-justify-end">
<div class="rtds-flex rtds-gap-3 rtds-justify-end rtds-items-center">
<div class="lg:rtds-hidden rtds-relative">
<nav class="rtds-user-dropdown" aria-label="Utente" id="userDropdown">
<div class="rtds-dropdown-menu rtds-user-dropdown__menu has-dropdown-menu rtds-flex-1">
<button class="rtds-dropdown-menu__trigger rtds-dropdown-trigger rtds-group hover:rtds-underline hover:rtds-content-primary aria-expanded:rtds-bg-white aria-expanded:rtds-content-primary aria-expanded:rtds-relative" aria-expanded="false" aria-controls="userDropdownMobile">
<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--user" />
</svg>
Username Surname<svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5 rtds-ml-auto rtds-transition-all rtds-dropdown-menu__trigger-icon group-aria-expanded:-rtds-rotate-180" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-down" />
</svg>
</button>
<ul class="rtds-dropdown-menu__list rtds-user-dropdown__menu-list rtds-hidden rtds-border rtds-w-full lg:rtds-rounded lg:rtds-shadow-md lg:rtds-absolute rtds-absolute" id="userDropdownMobile">
<li class="rtds-dropdown-menu__item rtds-user-dropdown__menu-item">
<div class="rtds-user-dropdown__menu-label rtds-items-center">
Item label 1
</div>
<ul class="rtds-user-dropdown__menu-sublist">
<li class="rtds-user-dropdown__menu-label">
<a class="rtds-user-dropdown__menu-link" href="">
Item label 1
</a>
</li>
<li class="rtds-user-dropdown__menu-label">
<a class="rtds-user-dropdown__menu-link" href="">
Item label 1
</a>
</li>
</ul>
</li>
<li class="rtds-dropdown-menu__item rtds-user-dropdown__menu-item">
<div class="rtds-user-dropdown__menu-label rtds-items-center">
Item label 1
</div>
<ul class="rtds-user-dropdown__menu-sublist">
<li class="rtds-user-dropdown__menu-label">
<a class="rtds-user-dropdown__menu-link" href="">
Item label 1
</a>
</li>
<li class="rtds-user-dropdown__menu-label">
<a class="rtds-user-dropdown__menu-link" href="">
Item label 1
</a>
</li>
</ul>
</li>
<li class="rtds-dropdown-menu__item rtds-user-dropdown__menu-item">
<a class="rtds-user-dropdown__menu-logout rtds-user-dropdown__menu-link is-logout" href="#">
Esci<svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5 rtds-ml-auto rtds-transition-all rtds-dropdown-menu__trigger-icon group-aria-expanded:-rtds-rotate-180" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#solid--arrow-right-start-on-rectangle" />
</svg>
</a>
</li>
</ul>
</div>
</nav>
</div>
<nav class="rtds-primary-navigation lg:rtds-justify-end" aria-label="Principale" id="siteNavWrapper">
<button type="button" class="rtds-btn rtds-btn--only-text rtds-rounded-0 lg:rtds-hidden rtds-ml-auto rtds-btn--icon rtds-group" aria-expanded="false" aria-controls="mainNavPanel" aria-haspopup="dialog" id="mobileNavToggle">
<svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6 rtds-m-0 rtds-p-0
rtds-transition-all rtds-duration-200 rtds-ease-out rtds-transform
group-hover:rtds-translate-none is-show-menu
group-aria-expanded:rtds-hidden" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--bars-3" />
</svg>
<svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6 rtds-m-0 rtds-p-0 rtds-transition-all
rtds-duration-200 rtds-ease-out rtds-transform
group-hover:rtds-translate-none is-close-menu rtds-hidden
group-aria-expanded:rtds-inline-block" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--x-mark" />
</svg>
<span class="rtds-sr-only is-show-menu">
Menu
</span>
</button>
<!-- Mobile panel -->
<div class="rtds-primary-navigation__panel" id="mainNavPanel" role="dialog" aria-modal="true" aria-label="Menu di navigazione">
<!-- Main nav -->
<div class="rtds-primary-navigation__module is-main lg:rtds-border-b-0">
<ul class="rtds-primary-navigation__list ">
<li class="rtds-primary-navigation__item">
<a href="" class="rtds-primary-navigation__first-level rtds-primary-navigation__link rtds-group rtds-text-base xl:rtds-text-lg">
Item
</a>
</li>
<li class="rtds-primary-navigation__item">
<a href="" class="rtds-primary-navigation__first-level rtds-primary-navigation__link rtds-group rtds-text-base xl:rtds-text-lg is-current" aria-current="page">
Current page
</a>
</li>
<li class="rtds-dropdown-menu has-dropdown-menu rtds-primary-navigation__item">
<button class="rtds-dropdown-menu__trigger rtds-dropdown-trigger rtds-group rtds-w-full rtds-flex rtds-items-center hover:rtds-content-primary aria-expanded:rtds-bg-white lg:aria-expanded:rtds-bg-transparent aria-expanded:rtds-content-primary aria-expanded:rtds-relative rtds-p-3 rtds-gap-2 rtds-text-base xl:rtds-text-lg rtds-primary-navigation__first-level rtds-primary-navigation__link" aria-expanded="false" aria-controls="submenumenu-3">
Dropdown
<svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5 rtds-ml-auto rtds-transition-all rtds-dropdown-menu__trigger-icon group-aria-expanded:-rtds-rotate-180" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-down" />
</svg>
</button>
<ul class="rtds-dropdown-menu__list rtds-hidden rtds-border rtds-border-t-0 lg:rtds-w-52 lg:rtds-border-t lg:rtds-rounded lg:rtds-shadow-md lg:rtds-absolute rtds-border-r-0 rtds-border-l-0 lg:rtds-border-r lg:rtds-border-l" id="submenumenu-3">
<li class="rtds-dropdown-menu__item rtds-group/menu-item">
<a class="rtds-dropdown-menu__link rtds-block rtds-transition rtds-text-base xl:rtds-text-lg group-first/menu-item:rtds-rounded-t group-last/menu-item:rtds-rounded-b" href="">
<div class="rtds-flex rtds-gap-2 rtds-items-center">
<span class="rtds-grow">List item</span>
</div>
</a>
</li>
<li class="rtds-dropdown-menu__item rtds-group/menu-item">
<a class="rtds-dropdown-menu__link rtds-block rtds-transition rtds-text-base xl:rtds-text-lg group-first/menu-item:rtds-rounded-t group-last/menu-item:rtds-rounded-b" href="">
<div class="rtds-flex rtds-gap-2 rtds-items-center">
<span class="rtds-grow">List item</span>
</div>
</a>
</li>
<li class="rtds-dropdown-menu__item rtds-group/menu-item">
<a class="rtds-dropdown-menu__link rtds-block rtds-transition rtds-text-base xl:rtds-text-lg group-first/menu-item:rtds-rounded-t group-last/menu-item:rtds-rounded-b" href="">
<div class="rtds-flex rtds-gap-2 rtds-items-center">
<span class="rtds-grow">List item</span>
</div>
</a>
</li>
<li class="rtds-dropdown-menu__item rtds-group/menu-item">
<a class="rtds-dropdown-menu__link rtds-block rtds-transition rtds-text-base xl:rtds-text-lg group-first/menu-item:rtds-rounded-t group-last/menu-item:rtds-rounded-b" href="">
<div class="rtds-flex rtds-gap-2 rtds-items-center">
<span class="rtds-grow">List item</span>
</div>
</a>
</li>
</ul>
</li>
</ul>
</div>
<!-- Mobile search in panel -->
<div class="rtds-primary-navigation__module is-main lg:rtds-hidden is-last-element">
<form role="search" class="rtds-flex rtds-items-end rtds-p-3 rtds-gap-1">
<div class="rtds-input-field rtds-gap-1 rtds-flex-1 ">
<label for="inputSearchMobile" class="rtds-input-field__label">
Cerca
servizi, informazioni, aiuti...
</label>
<div class="rtds-input">
<input id="inputSearchMobile" class="rtds-rounded-l-lg rtds-rounded-r-none rtds-text-sm rtds-input-placeholder" type="search" placeholder="Cerca">
</div>
</div>
<button type="button" class="rtds-btn rtds-btn--secondary rtds-btn--icon rtds-w-11 rtds-h-11 rtds-rounded-lg">
<span class="rtds-sr-only">Cerca</span>
<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--magnifying-glass" />
</svg>
</button>
</form>
</div>
</div>
<div class="rtds-primary-navigation__backdrop rtds-bg-black/25 rtds-top-[--header-height] lg:rtds-hidden"></div>
</nav>
</div>
</div>
</div>
</div>
</header>
<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="#">
Home
<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="#">
Servizi
<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="#">
Prenotazione sportello
<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">
Conferma
</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">
Prenota un appuntamento
</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>Prenota un appuntamento allo sportello. Scegli data, orario e inserisci i tuoi dati.</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>
<main id="mainContent">
<div class="rtds-container rtds-py-12 md:rtds-py-16 rtds-space-y-10">
<div class="rtds-alert rtds-alert--success" role="status">
<div class="rtds-alert__icon" aria-hidden="true">
<svg class="rtds-icon rtds-fill-current rtds-w-7 rtds-h-7" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--check-circle" />
</svg>
</div>
<div class="rtds-alert__content">
<h2 class="rtds-alert__heading">Richiesta inviata</h2>
<p class="rtds-alert__body">La tua richiesta è stata inviata con successo. Conserva il numero di protocollo per eventuali comunicazioni.</p>
</div>
</div>
<section class="rtds-widget-box">
<div class="rtds-widget-box__header">
<h2 class="rtds-widget-box__title">Riepilogo invio</h2>
</div>
<div class="rtds-widget-box__content">
<dl class="rtds-divide-y rtds-divide-neutral-400">
<div class="rtds-flex rtds-flex-col sm:rtds-flex-row rtds-gap-1 sm:rtds-gap-4 rtds-py-3">
<dt class="rtds-text-sm rtds-font-medium rtds-content-02 sm:rtds-min-w-[180px]">Numero protocollo</dt>
<dd class="rtds-text-sm rtds-font-semibold rtds-content-01">RT-2026-004521</dd>
</div>
<div class="rtds-flex rtds-flex-col sm:rtds-flex-row rtds-gap-1 sm:rtds-gap-4 rtds-py-3">
<dt class="rtds-text-sm rtds-font-medium rtds-content-02 sm:rtds-min-w-[180px]">Data invio</dt>
<dd class="rtds-text-sm rtds-font-semibold rtds-content-01">11 giugno 2026</dd>
</div>
<div class="rtds-flex rtds-flex-col sm:rtds-flex-row rtds-gap-1 sm:rtds-gap-4 rtds-py-3">
<dt class="rtds-text-sm rtds-font-medium rtds-content-02 sm:rtds-min-w-[180px]">Servizio</dt>
<dd class="rtds-text-sm rtds-font-semibold rtds-content-01">Prenotazione sportello — Ufficio Anagrafe</dd>
</div>
<div class="rtds-flex rtds-flex-col sm:rtds-flex-row rtds-gap-1 sm:rtds-gap-4 rtds-py-3">
<dt class="rtds-text-sm rtds-font-medium rtds-content-02 sm:rtds-min-w-[180px]">Appuntamento</dt>
<dd class="rtds-text-sm rtds-font-semibold rtds-content-01">15 luglio 2026, ore 10:30</dd>
</div>
</dl>
</div>
</section>
<section class="rtds-space-y-4">
<h2 class="rtds-heading-2">Cosa succede adesso</h2>
<p class="rtds-text-base rtds-content-01">Riceverai una email di conferma all'indirizzo indicato in fase di registrazione. L'appuntamento è confermato e potrai gestirlo dalla tua area personale.</p>
<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">
Non ho ricevuto l'email di conferma
</span>
</button>
</h3>
</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>
Controlla la cartella spam. Se non ricevi l'email entro 30 minuti, contatta il nostro supporto al numero 055 0000000.
</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">
Posso annullare o spostare l'appuntamento?
</span>
</button>
</h3>
</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>
Sì, puoi annullare o spostare l'appuntamento fino a 24 ore prima accedendo alla tua area personale con le stesse credenziali usate per la prenotazione.
</div>
</div>
</div>
</section>
<div class="rtds-flex rtds-flex-col md:rtds-flex-row rtds-gap-3">
<button type="button" class="rtds-btn
rtds-btn--primary
rtds-btn--primary">
Torna alla homepage del servizio
</button>
<button type="button" class="rtds-btn
rtds-btn--icon-left rtds-group/button rtds-btn--outlined">
<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 group-hover/button:-rtds-translate-x-1" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-down-tray" />
</svg>
Scarica la ricevuta
</button>
</div>
</div>
</main>
<footer class="rtds-footer rtds-border-t rtds-border-gray-01" id="siteFooter">
<div class="rtds-logos-area">
<div class="rtds-container rtds-py-6 md:rtds-py-8 rtds-space-y-6">
<h2 class="rtds-content-02 rtds-text-base md:rtds-text-lg rtds-font-bold">Titolo sezione footer</h2>
<div class="rtds-grid md:rtds-flex rtds-gap-4 md:rtds-items-center">
<div class="rtds-flex rtds-flex-wrap rtds-gap-4 md:rtds-gap-6 rtds-items-center lg:rtds-gap-12">
<a class="rtds-site-logo rtds-h-12 md:rtds-h-16 md:rtds-flex-1" href="#">
<img class="rtds-w-full rtds-h-full rtds-object-contain rtds-object-left-top" src="../../images/logo.png" alt="Img alt" width="247" height="80" />
</a>
<a class="rtds-site-logo rtds-h-12 md:rtds-h-16 md:rtds-flex-1" href="#">
<img class="rtds-w-full rtds-h-full rtds-object-contain rtds-object-left-top" src="../../images/logo.png" alt="Img alt" width="247" height="80" />
</a>
</div>
</div>
</div>
</div>
<div class="rtds-footer__navigation-row rtds-container rtds-grid rtds-gap-x-10 rtds-gap-y-4 md:rtds-flex">
<!-- Right block -->
<div class="rtds-grid rtds-gap-6 md:rtds-gap-3 md:rtds-flex-1">
<!-- Menu footer -->
<nav class="rtds-pb-4 -rtds-ml-4" aria-label="Contatti e utilità">
<ul class="rtds-grid md:rtds-flex rtds-gap-y-3 md:rtds-gap-y-4 rtds-flex-wrap">
<li class="rtds-group md:rtds-border-r md:rtds-border-gray-01 md:last:rtds-border-r-0">
<a href="" class="rtds-link rtds-px-4 rtds-py-2 rtds-text-sm rtds-content-02 rtds-font-bold rtds-uppercase">UFFICI</a>
</li>
<li class="rtds-group md:rtds-border-r md:rtds-border-gray-01 md:last:rtds-border-r-0">
<a href="" class="rtds-link rtds-px-4 rtds-py-2 rtds-text-sm rtds-content-02 rtds-font-bold rtds-uppercase">URP</a>
</li>
<li class="rtds-group md:rtds-border-r md:rtds-border-gray-01 md:last:rtds-border-r-0">
<a href="" class="rtds-link rtds-px-4 rtds-py-2 rtds-text-sm rtds-content-02 rtds-font-bold rtds-uppercase">PEC</a>
</li>
<li class="rtds-group md:rtds-border-r md:rtds-border-gray-01 md:last:rtds-border-r-0">
<a href="" class="rtds-link rtds-px-4 rtds-py-2 rtds-text-sm rtds-content-02 rtds-font-bold rtds-uppercase">MAPPA DEL SITO</a>
</li>
<li class="rtds-group md:rtds-border-r md:rtds-border-gray-01 md:last:rtds-border-r-0">
<a href="" class="rtds-link rtds-px-4 rtds-py-2 rtds-text-sm rtds-content-02 rtds-font-bold rtds-uppercase">INTRANET</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="rtds-border-t rtds-border-gray-01">
<div class="rtds-container">
<!-- Menu footer -->
<nav class="-rtds-ml-4 rtds-py-4 md:rtds-py-6" aria-label="Altre informazioni">
<ul class="rtds-grid md:rtds-flex rtds-gap-y-3 md:rtds-gap-y-4 rtds-flex-wrap">
<li class="rtds-group">
<a href="" class="rtds-link rtds-px-4 rtds-py-2 rtds-text-sm rtds-content-03 rtds-font-bold">Gestione cookies</a>
</li>
<li class="rtds-group">
<a href="" class="rtds-link rtds-px-4 rtds-py-2 rtds-text-sm rtds-content-03 rtds-font-bold">Note legali e copyright</a>
</li>
<li class="rtds-group">
<a href="" class="rtds-link rtds-px-4 rtds-py-2 rtds-text-sm rtds-content-03 rtds-font-bold">Privacy e cookie</a>
</li>
<li class="rtds-group">
<a href="" class="rtds-link rtds-px-4 rtds-py-2 rtds-text-sm rtds-content-03 rtds-font-bold">Dichiarazione di accessibilità</a>
</li>
</ul>
</nav>
</div>
</div>
<!-- Footer bottom bar -->
<div class="rtds-footer__bottom-bar">
<div class="rtds-container rtds-grid rtds-gap-6 md:rtds-flex rtds-items-center rtds-justify-between">
<div class="rtds-footer__bottom-bar-left">
<!-- Utilities and other -->
<nav class="-rtds-ml-4" aria-label="Informazioni legali, privacy e cookie">
<ul class="rtds-flex rtds-gap-y-3 rtds-gap-x-5 md:rtds-gap-y-1 rtds-flex-wrap">
<li>
<a href="" class="rtds-link rtds-py-1 rtds-px-3 md:rtds-py-4 rtds-content-01 rtds-text-sm rtds-font-bold">Voce 1</a>
</li>
<li>
<a href="" class="rtds-link rtds-py-1 rtds-px-3 md:rtds-py-4 rtds-content-01 rtds-text-sm rtds-font-bold">Voce 2</a>
</li>
<li>
<a href="" class="rtds-link rtds-py-1 rtds-px-3 md:rtds-py-4 rtds-content-01 rtds-text-sm rtds-font-bold">Voce 3</a>
</li>
</ul>
</nav>
</div>
<div class="rtds-footer__bottom-bar-right rtds-px-2 md:rtds-px-0">
<!-- Logos -->
<div class="rtds-site-logo rtds-w-40 rtds-h-auto md:rtds-w-44 lg:rtds-w-auto">
<img class="rtds-w-full rtds-h-full rtds-object-contain rtds-object-left-top" src="../../images/logo.png" alt="Img alt" width="223" height="76" />
</div>
</div>
</div>
</div>
</footer>
{% render '@skip-link' %}
{% render '@header-servizio', {
hasUserDropdown: true,
userDropdown: userDropdown,
secondLogoPath: secondLogoPath,
secondLogoAlt: secondLogoAlt,
secondaryLogoText: secondaryLogoText
}, true %}
{% render '@page-header-base-smart--semplice', pageHeader, true %}
<main id="mainContent">
<div class="rtds-container rtds-py-12 md:rtds-py-16 rtds-space-y-10">
{% render '@alert', {
type: 'success',
heading: 'Richiesta inviata',
body: 'La tua richiesta è stata inviata con successo. Conserva il numero di protocollo per eventuali comunicazioni.'
}, true %}
<section class="rtds-widget-box">
<div class="rtds-widget-box__header">
<h2 class="rtds-widget-box__title">Riepilogo invio</h2>
</div>
<div class="rtds-widget-box__content">
<dl class="rtds-divide-y rtds-divide-neutral-400">
{% for field in receipt.fields %}
<div class="rtds-flex rtds-flex-col sm:rtds-flex-row rtds-gap-1 sm:rtds-gap-4 rtds-py-3">
<dt class="rtds-text-sm rtds-font-medium rtds-content-02 sm:rtds-min-w-[180px]">{{ field.label }}</dt>
<dd class="rtds-text-sm rtds-font-semibold rtds-content-01">{{ field.value }}</dd>
</div>
{% endfor %}
</dl>
</div>
</section>
<section class="rtds-space-y-4">
<h2 class="rtds-heading-2">Cosa succede adesso</h2>
<p class="rtds-text-base rtds-content-01">{{ nextSteps.description }}</p>
{% if nextSteps.faq %}
{% render '@accordion-smart', nextSteps.faq, true %}
{% endif %}
</section>
<div class="rtds-flex rtds-flex-col md:rtds-flex-row rtds-gap-3">
{% render '@button', {
label: 'Torna alla homepage del servizio',
classes: 'rtds-btn--primary',
buttonType: 'button'
}, true %}
{% if showDownload %}
{% render '@button--icon-left', {
label: 'Scarica la ricevuta',
classes: 'rtds-btn--outlined',
icon: 'mini--arrow-down-tray',
buttonType: 'button'
}, true %}
{% endif %}
</div>
</div>
</main>
{% render '@footer', footer, true %}
{
"secondLogoPath": "/images/logo-regione-square@2x.png",
"secondLogoAlt": "Nome Servizio - home page",
"secondaryLogoText": "Sportello Digitale",
"userDropdown": {
"isUserLoggedIn": true
},
"pageHeader": {
"title": "Prenota un appuntamento",
"description": "Prenota un appuntamento allo sportello. Scegli data, orario e inserisci i tuoi dati.",
"hasBg": true,
"backLink": false,
"breadcrumb": {
"items": [
{
"label": "Home"
},
{
"label": "Servizi"
},
{
"label": "Prenotazione sportello"
},
{
"label": "Conferma"
}
]
}
},
"receipt": {
"fields": [
{
"label": "Numero protocollo",
"value": "RT-2026-004521"
},
{
"label": "Data invio",
"value": "11 giugno 2026"
},
{
"label": "Servizio",
"value": "Prenotazione sportello — Ufficio Anagrafe"
},
{
"label": "Appuntamento",
"value": "15 luglio 2026, ore 10:30"
}
]
},
"nextSteps": {
"description": "Riceverai una email di conferma all'indirizzo indicato in fase di registrazione. L'appuntamento è confermato e potrai gestirlo dalla tua area personale.",
"faq": {
"hasActions": false,
"panels": [
{
"label": "Non ho ricevuto l'email di conferma",
"text": "Controlla la cartella spam. Se non ricevi l'email entro 30 minuti, contatta il nostro supporto al numero 055 0000000."
},
{
"label": "Posso annullare o spostare l'appuntamento?",
"text": "Sì, puoi annullare o spostare l'appuntamento fino a 24 ore prima accedendo alla tua area personale con le stesse credenziali usate per la prenotazione."
}
]
}
},
"showDownload": true,
"footer": {
"navigationRow": "minimal",
"hasLogoArea": true,
"hasInfoRow": true,
"hasBottomBar": true,
"navInfoItems": [
{
"label": "Gestione cookies"
},
{
"label": "Note legali e copyright"
},
{
"label": "Privacy e cookie"
},
{
"label": "Dichiarazione di accessibilità"
}
]
}
}
Modello esemplificativo della pagina di conferma post-invio di una richiesta di servizio digitale.
Questo template è un modello esemplificativo che mostra una composizione consigliata di componenti RTDS per una pagina di conferma. Per la documentazione completa di ciascun componente fare riferimento alla scheda del componente nel Design System.
Template di pagina completo. Mostra la conferma dell’invio con alert di successo, un widget-box con i dati di riferimento della pratica, una sezione informativa sui passi successivi e i CTA per tornare alla homepage o scaricare la ricevuta.
| Variante | Descrizione |
|---|---|
| Base | Layout full-width con alert successo e riepilogo pratica |
| Parametro | Tipo | Obbligatorio | Descrizione |
|---|---|---|---|
secondLogoPath |
string | sì | Path del secondo logo |
secondLogoAlt |
string | sì | Alt text del secondo logo |
secondaryLogoText |
string | no | Nome del servizio |
userDropdown |
object | no | Context per il dropdown utente |
pageHeader |
object | sì | Context per @page-header-base-smart--semplice |
receipt |
object | sì | Dati di riepilogo della pratica (vedi struttura sotto) |
nextSteps.description |
string | sì | Paragrafo descrittivo sui passi successivi |
nextSteps.faq |
object | no | Context per @accordion-smart con FAQ post-invio |
showDownload |
boolean | no | Se true mostra il bottone “Scarica la ricevuta” (default: false) |
footer |
object | sì | Context per @footer |
receiptreceipt:
fields:
- label: "Numero protocollo"
value: "RT-2026-004521"
- label: "Data invio"
value: "11 giugno 2026"--success usa role="status" (annuncio non bloccante agli screen reader)<h2> per il riepilogo pratica<h2> e contenuto accordion opzionale@skip-link, @top-bar, @main-heading--logo-square, @page-header-base-smart--semplice, @alert, widget-box (CSS: rtds-widget-box), @accordion-smart, @button, @button--icon-left, @footer