<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="#" aria-current="page">
Prenotazione sportello
</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-8">
<nav class="rtds-steps rtds-steps--numbered" aria-label="Avanzamento prenotazione">
<ol class="rtds-steps__list">
<li class="rtds-steps__item rtds-steps__item--completed">
<a href="#step-1" class="rtds-steps__link">
<span class="rtds-steps__indicator" aria-hidden="true">
1
</span>
<span class="rtds-sr-only">Completato: </span>
<span class="rtds-steps__label">Servizio</span>
</a>
</li>
<li class="rtds-steps__item rtds-steps__item--completed">
<a href="#step-2" class="rtds-steps__link">
<span class="rtds-steps__indicator" aria-hidden="true">
2
</span>
<span class="rtds-sr-only">Completato: </span>
<span class="rtds-steps__label">Data e ora</span>
</a>
</li>
<li class="rtds-steps__item rtds-steps__item--completed">
<a href="#step-3" class="rtds-steps__link">
<span class="rtds-steps__indicator" aria-hidden="true">
3
</span>
<span class="rtds-sr-only">Completato: </span>
<span class="rtds-steps__label">Richiedente</span>
</a>
</li>
<li class="rtds-steps__item rtds-steps__item--active">
<span class="rtds-steps__link" aria-current="step">
<span class="rtds-steps__indicator" aria-hidden="true">
4
</span>
<span class="rtds-sr-only">Corrente: </span>
<span class="rtds-steps__label">Riepilogo</span>
</span>
</li>
</ol>
<span class="rtds-steps__counter" aria-hidden="true">4 / 4</span>
</nav>
<h2 class="rtds-heading-2">Riepilogo</h2>
<section class="rtds-widget-box">
<div class="rtds-widget-box__header">
<h3 class="rtds-widget-box__title">Servizio scelto</h3>
</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]">Servizio</dt>
<dd class="rtds-text-sm rtds-content-01">Prenotazione sportello</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]">Ufficio</dt>
<dd class="rtds-text-sm rtds-content-01">Ufficio Anagrafe — Comune di Firenze</dd>
</div>
</dl>
<div class="rtds-flex rtds-pt-3 rtds-border-t rtds-border-gray-02">
<a href="#step-1" 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-scale-125" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--pencil-square" />
</svg>
Modifica
</a>
</div>
</div>
</section>
<section class="rtds-widget-box">
<div class="rtds-widget-box__header">
<h3 class="rtds-widget-box__title">Data e ora</h3>
</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]">Data appuntamento</dt>
<dd class="rtds-text-sm rtds-content-01">15 luglio 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]">Orario</dt>
<dd class="rtds-text-sm rtds-content-01">10:30</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]">Motivo</dt>
<dd class="rtds-text-sm rtds-content-01">Rinnovo carta d'identità</dd>
</div>
</dl>
<div class="rtds-flex rtds-pt-3 rtds-border-t rtds-border-gray-02">
<a href="#step-2" 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-scale-125" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--pencil-square" />
</svg>
Modifica
</a>
</div>
</div>
</section>
<section class="rtds-widget-box">
<div class="rtds-widget-box__header">
<h3 class="rtds-widget-box__title">Dati richiedente</h3>
</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]">Nome e cognome</dt>
<dd class="rtds-text-sm rtds-content-01">Mario Rossi</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]">Codice fiscale</dt>
<dd class="rtds-text-sm rtds-content-01">RSSMRA80A01H501Y</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]">Email</dt>
<dd class="rtds-text-sm rtds-content-01">mario.rossi@example.com</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]">Telefono</dt>
<dd class="rtds-text-sm rtds-content-01">333 1234567</dd>
</div>
</dl>
<div class="rtds-flex rtds-pt-3 rtds-border-t rtds-border-gray-02">
<a href="#step-3" 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-scale-125" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--pencil-square" />
</svg>
Modifica
</a>
</div>
</div>
</section>
<div class="rtds-alert rtds-alert--info" 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--information-circle" />
</svg>
</div>
<div class="rtds-alert__content">
<h2 class="rtds-alert__heading">Informazione</h2>
<p class="rtds-alert__body">Verifica i dati prima di confermare. Una volta inviata la richiesta non sarà possibile modificarla.</p>
</div>
</div>
<div class="rtds-flex rtds-flex-col md:rtds-flex-row md:rtds-items-center md:rtds-justify-between rtds-gap-3">
<div>
<button type="submit" class="rtds-btn
rtds-btn--primary
rtds-btn--primary rtds-w-full md:rtds-w-auto">
Conferma e invia
</button>
</div>
<div>
<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--chevron-left" />
</svg>
Indietro
</button>
</div>
</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-8">
{% render '@steps--numbered', steps, true %}
<h2 class="rtds-heading-2">Riepilogo</h2>
{% for section in summarySections %}
<section class="rtds-widget-box">
<div class="rtds-widget-box__header">
<h3 class="rtds-widget-box__title">{{ section.title }}</h3>
</div>
<div class="rtds-widget-box__content">
<dl class="rtds-divide-y rtds-divide-neutral-400">
{% for field in section.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-content-01">{{ field.value }}</dd>
</div>
{% endfor %}
</dl>
<div class="rtds-flex rtds-pt-3 rtds-border-t rtds-border-gray-02">
{% render '@button--icon-left-s', {
label: 'Modifica',
classes: 'rtds-btn--secondary',
icon: 'mini--pencil-square',
iconTransformType: 'scale',
href: section.editHref | default('#')
}, true %}
</div>
</div>
</section>
{% endfor %}
{% render '@alert', {
type: 'info',
body: 'Verifica i dati prima di confermare. Una volta inviata la richiesta non sarà possibile modificarla.'
}, true %}
<div class="rtds-flex rtds-flex-col md:rtds-flex-row md:rtds-items-center md:rtds-justify-between rtds-gap-3">
<div>
{% render '@button', {
label: 'Conferma e invia',
classes: 'rtds-btn--primary rtds-w-full md:rtds-w-auto',
buttonType: 'submit'
}, true %}
</div>
<div>
{% render '@button--icon-left', {
label: 'Indietro',
classes: 'rtds-btn--outlined',
icon: 'mini--chevron-left',
buttonType: 'button'
}, true %}
</div>
</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"
}
]
}
},
"steps": {
"ariaLabel": "Avanzamento prenotazione",
"numbered": true,
"steps": [
{
"label": "Servizio",
"completed": true,
"href": "#step-1"
},
{
"label": "Data e ora",
"completed": true,
"href": "#step-2"
},
{
"label": "Richiedente",
"completed": true,
"href": "#step-3"
},
{
"label": "Riepilogo",
"active": true
}
]
},
"summarySections": [
{
"title": "Servizio scelto",
"editHref": "#step-1",
"fields": [
{
"label": "Servizio",
"value": "Prenotazione sportello"
},
{
"label": "Ufficio",
"value": "Ufficio Anagrafe — Comune di Firenze"
}
]
},
{
"title": "Data e ora",
"editHref": "#step-2",
"fields": [
{
"label": "Data appuntamento",
"value": "15 luglio 2026"
},
{
"label": "Orario",
"value": "10:30"
},
{
"label": "Motivo",
"value": "Rinnovo carta d'identità"
}
]
},
{
"title": "Dati richiedente",
"editHref": "#step-3",
"fields": [
{
"label": "Nome e cognome",
"value": "Mario Rossi"
},
{
"label": "Codice fiscale",
"value": "RSSMRA80A01H501Y"
},
{
"label": "Email",
"value": "mario.rossi@example.com"
},
{
"label": "Telefono",
"value": "333 1234567"
}
]
}
],
"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 dell’ultimo step del flusso di compilazione, in cui l’utente verifica i dati inseriti nei passi precedenti prima di confermare l’invio.
Questo template è un modello esemplificativo che mostra una composizione consigliata di componenti RTDS per uno step di riepilogo. Per la documentazione completa di ciascun componente fare riferimento alla scheda del componente nel Design System.
Template di pagina completo. Mostra la barra di avanzamento con tutti gli step completati tranne l’ultimo (attivo), una serie di widget-box con i dati riepilogati, un alert informativo e i CTA di conferma/indietro.
| Variante | Descrizione |
|---|---|
| Base | Layout full-width con riepilogo a widget-box |
| 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 |
steps |
object | sì | Context per @steps--numbered — step finale attivo, precedenti completed: true |
summarySections |
array | sì | Array di sezioni riepilogo (vedi struttura sotto) |
footer |
object | sì | Context per @footer |
summarySections[]summarySections:
- title: "Titolo sezione" # h3 nel widget-box__header
editHref: "#anchor-step" # href del link "Modifica"
fields:
- label: "Etichetta campo"
value: "Valore campo"<section> con heading h3<dl><dt><dd> semanticorole="status" (informativo, non bloccante)@skip-link, @top-bar, @main-heading--logo-square, @page-header-base-smart--semplice, @steps--numbered, widget-box (CSS: rtds-widget-box), @alert, @button, @button--icon-left, @footer