<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">
<div class="rtds-grid rtds-gap-8 md:rtds-grid-cols-12">
<aside class="md:rtds-col-span-3">
<nav class="rtds-side-navigation rtds-side-navigation--anchor is-anchor-navigation" aria-labelledby="sideNavLabel" id="sideNav" tabindex="-1">
<span id="sideNavLabel" class="rtds-side-navigation__title rtds-sr-only md:rtds-not-sr-only md:rtds-pb-4 md:rtds-border-b md:rtds-border-gray-01">
<span class="rtds-block rtds-font-medium">Sezioni del servizio</span>
</span>
<!-- Mobile toggle button -->
<button class="rtds-side-navigation__list-toggle rtds-nav-list-toggle md:rtds-hidden rtds-btn rtds-btn--icon-right rtds-btn--only-text rtds-btn--small rtds-group" aria-expanded="false" aria-controls="sideNavList">
<span class="rtds-grid rtds-gap-2 rtds-text-left">
<span>Sezioni del servizio</span>
</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--chevron-up" />
</svg>
</button>
<!-- Navigation list -->
<ul class="rtds-nav-list rtds-side-navigation__list has-nav-dropdown" id="sideNavList">
<li class="rtds-side-navigation__item is-first-level">
<span class="rtds-side-navigation__first-level-label">
<a href="#informazioni" class="rtds-side-navigation__link rtds-nav-link">
<span class="rtds-side-navigation__label">
Informazioni
</span>
</a>
</span>
</li>
<li class="rtds-side-navigation__item is-first-level">
<span class="rtds-side-navigation__first-level-label is-current">
<a href="#prenotazione" class="rtds-side-navigation__link rtds-nav-link is-current">
<span class="rtds-side-navigation__label">
Prenotazione
</span>
</a>
</span>
</li>
<li class="rtds-side-navigation__item is-first-level">
<span class="rtds-side-navigation__first-level-label">
<a href="#le-mie-prenotazioni" class="rtds-side-navigation__link rtds-nav-link">
<span class="rtds-side-navigation__label">
Le mie prenotazioni
</span>
</a>
</span>
</li>
</ul>
</nav>
</aside>
<div class="md:rtds-col-span-9 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--active">
<span class="rtds-steps__link" aria-current="step">
<span class="rtds-steps__indicator" aria-hidden="true">
2
</span>
<span class="rtds-sr-only">Corrente: </span>
<span class="rtds-steps__label">Data e ora</span>
</span>
</li>
<li class="rtds-steps__item">
<span class="rtds-steps__link">
<span class="rtds-steps__indicator" aria-hidden="true">
3
</span>
<span class="rtds-steps__label">Richiedente</span>
</span>
</li>
<li class="rtds-steps__item">
<span class="rtds-steps__link">
<span class="rtds-steps__indicator" aria-hidden="true">
4
</span>
<span class="rtds-steps__label">Riepilogo</span>
</span>
</li>
</ol>
<span class="rtds-steps__counter" aria-hidden="true">2 / 4</span>
</nav>
<div class="rtds-space-y-8">
<h2 class="rtds-heading-2">Data e ora</h2>
<section class="rtds-space-y-6">
<h3 class="rtds-heading-3">Scegli la data e l'orario</h3>
<div class="rtds-field-row">
<div class="rtds-input-field rtds-gap-1 ">
<label for="input-data-sb" class="rtds-input-field__label">
Data appuntamento
<abbr class="rtds-font-bold rtds-no-underline" title="obbligatorio">*</abbr>
</label>
<div class="rtds-input">
<input id="input-data-sb" class="rtds-text-sm rtds-input-placeholder" type="date" aria-required="true" aria-describedBy="input-data-sbError input-data-sb-desc">
</div>
<span class="rtds-input-field__hint">
<span class="rtds-input-field__error" id="input-data-sbError" aria-live="assertive">
</span>
<span class="rtds-input-field__description" id="input-data-sb-desc">
Inserisci la data nel formato GG/MM/AAAA
</span>
</span>
</div>
<div class="rtds-input-field rtds-select-field">
<label for="select-orario-sb" class="rtds-input-field__label">
Orario disponibile
<abbr class="rtds-font-bold rtds-no-underline" title="obbligatorio">*</abbr>
</label>
<div class="rtds-select">
<select id="select-orario-sb" class="" aria-required="true" aria-describedBy="select-orario-sbError select-orario-sb-desc">
<option value="1">Text</option>
<option value="2">Option 1</option>
<option value="3">Option 2</option>
<option value="4">Option 3</option>
<option value="5">Option 4</option>
<option value="6">Option 5</option>
</select>
</div>
<span class="rtds-input-field__hint">
<span class="rtds-input-field__error" id="select-orario-sbError" aria-live="assertive">
</span>
<span class="rtds-input-field__description" id="select-orario-sb-desc">
Seleziona uno degli orari disponibili
</span>
</span>
</div>
</div>
</section>
<section class="rtds-space-y-6">
<h3 class="rtds-heading-3">Disponibilità alternativa</h3>
<div class="rtds-field-row">
<fieldset class="rtds-input-field rtds-input-fieldset">
<legend class="rtds-input-field__label">Periodo preferito <abbr class="rtds-font-bold rtds-no-underline" title="obbligatorio">*</abbr></legend>
<div class="rtds-grid sm:rtds-flex rtds-gap-4 sm:rtds-gap-6 sm:rtds-items-start">
<div class="rtds-input-field rtds-gap-1 sm:rtds-flex-1 ">
<label for="data-inizio-sb" class="rtds-input-field__label rtds-sr-only">
Data inizio
<abbr class="rtds-font-bold rtds-no-underline" title="obbligatorio">*</abbr>
</label>
<div class="rtds-input">
<input id="data-inizio-sb" class="rtds-text-sm rtds-input-placeholder" type="date" aria-required="true" aria-describedBy="data-inizio-sbError data-inizio-sb-desc">
</div>
<span class="rtds-input-field__hint">
<span class="rtds-input-field__error" id="data-inizio-sbError" aria-live="assertive">
</span>
<span class="rtds-input-field__description" id="data-inizio-sb-desc">
Data inizio — formato GG/MM/AAAA
</span>
</span>
</div>
<div class="rtds-input-field rtds-gap-1 sm:rtds-flex-1 ">
<label for="data-fine-sb" class="rtds-input-field__label rtds-sr-only">
Data fine
<abbr class="rtds-font-bold rtds-no-underline" title="obbligatorio">*</abbr>
</label>
<div class="rtds-input">
<input id="data-fine-sb" class="rtds-text-sm rtds-input-placeholder" type="date" aria-required="true" aria-describedBy="data-fine-sbError data-fine-sb-desc">
</div>
<span class="rtds-input-field__hint">
<span class="rtds-input-field__error" id="data-fine-sbError" aria-live="assertive">
</span>
<span class="rtds-input-field__description" id="data-fine-sb-desc">
Data fine — formato GG/MM/AAAA
</span>
</span>
</div>
</div>
</fieldset>
<fieldset class="rtds-input-field rtds-input-fieldset">
<legend class="rtds-input-field__label">Fascia oraria <abbr class="rtds-font-bold rtds-no-underline" title="obbligatorio">*</abbr></legend>
<div class="rtds-grid sm:rtds-flex rtds-gap-4 sm:rtds-gap-6 sm:rtds-items-start">
<div class="rtds-input-field rtds-gap-1 sm:rtds-flex-1 ">
<label for="ora-inizio-sb" class="rtds-input-field__label rtds-sr-only">
Ora inizio
<abbr class="rtds-font-bold rtds-no-underline" title="obbligatorio">*</abbr>
</label>
<div class="rtds-input">
<input id="ora-inizio-sb" class="rtds-text-sm rtds-input-placeholder" type="time" aria-required="true" aria-describedBy="ora-inizio-sbError ora-inizio-sb-desc">
</div>
<span class="rtds-input-field__hint">
<span class="rtds-input-field__error" id="ora-inizio-sbError" aria-live="assertive">
</span>
<span class="rtds-input-field__description" id="ora-inizio-sb-desc">
Ora di inizio — formato HH:MM
</span>
</span>
</div>
<div class="rtds-input-field rtds-gap-1 sm:rtds-flex-1 ">
<label for="ora-fine-sb" class="rtds-input-field__label rtds-sr-only">
Ora fine
<abbr class="rtds-font-bold rtds-no-underline" title="obbligatorio">*</abbr>
</label>
<div class="rtds-input">
<input id="ora-fine-sb" class="rtds-text-sm rtds-input-placeholder" type="time" aria-required="true" aria-describedBy="ora-fine-sbError ora-fine-sb-desc">
</div>
<span class="rtds-input-field__hint">
<span class="rtds-input-field__error" id="ora-fine-sbError" aria-live="assertive">
</span>
<span class="rtds-input-field__description" id="ora-fine-sb-desc">
Ora di fine — formato HH:MM
</span>
</span>
</div>
</div>
</fieldset>
</div>
</section>
<section class="rtds-space-y-6">
<h3 class="rtds-heading-3">Dettagli</h3>
<div class="rtds-field-row">
<div class="rtds-input-field rtds-select-field">
<label for="select-motivo-sb" class="rtds-input-field__label">
Motivo appuntamento
<abbr class="rtds-font-bold rtds-no-underline" title="obbligatorio">*</abbr>
</label>
<div class="rtds-select">
<select id="select-motivo-sb" class="" aria-required="true" aria-describedBy="select-motivo-sbError select-motivo-sb-desc">
<option value="1">Text</option>
<option value="2">Option 1</option>
<option value="3">Option 2</option>
<option value="4">Option 3</option>
<option value="5">Option 4</option>
<option value="6">Option 5</option>
</select>
</div>
<span class="rtds-input-field__hint">
<span class="rtds-input-field__error" id="select-motivo-sbError" aria-live="assertive">
</span>
<span class="rtds-input-field__description" id="select-motivo-sb-desc">
Indica il motivo per cui richiedi l'appuntamento
</span>
</span>
</div>
<div class="rtds-input-field rtds-select-field">
<label for="select-tipo-sb" class="rtds-input-field__label">
Tipo servizio
<abbr class="rtds-font-bold rtds-no-underline" title="obbligatorio">*</abbr>
</label>
<div class="rtds-select">
<select id="select-tipo-sb" class="" aria-required="true" aria-describedBy="select-tipo-sbError select-tipo-sb-desc">
<option value="1">Text</option>
<option value="2">Option 1</option>
<option value="3">Option 2</option>
<option value="4">Option 3</option>
<option value="5">Option 4</option>
<option value="6">Option 5</option>
</select>
</div>
<span class="rtds-input-field__hint">
<span class="rtds-input-field__error" id="select-tipo-sbError" aria-live="assertive">
</span>
<span class="rtds-input-field__description" id="select-tipo-sb-desc">
Seleziona la tipologia di servizio richiesta
</span>
</span>
</div>
</div>
<div class="rtds-input-field rtds-gap-1 lg:rtds-max-w-1/2 ">
<label for="textarea-note-sb" class="rtds-input-field__label">
Note aggiuntive
</label>
<div class="rtds-input rtds-textarea">
<textarea id="textarea-note-sb" class=" rtds-text-sm rtds-input-placeholder" rows="4" aria-describedBy="textarea-note-sb-desc"></textarea>
</div>
<span class="rtds-input-field__hint">
<span class="rtds-input-field__description" id="textarea-note-sb-desc">
Facoltativo. Massimo 500 caratteri. Aggiungi eventuali informazioni utili per gestire la richiesta.
</span>
</span>
</div>
</section>
<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
</button>
</div>
<div class="rtds-flex rtds-justify-between md:rtds-justify-start rtds-gap-3">
<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>
<button type="button" class="rtds-btn
rtds-btn--icon-right rtds-group/button rtds-btn--outlined">
Avanti
<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-right" />
</svg>
</button>
</div>
</div>
</div>
</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">
<div class="rtds-grid rtds-gap-8 md:rtds-grid-cols-12">
<aside class="md:rtds-col-span-3">
{% render '@side-navigation--anchor', sideNav, true %}
</aside>
<div class="md:rtds-col-span-9 rtds-space-y-8">
{% render '@steps--numbered', steps, true %}
<div class="rtds-space-y-8">
<h2 class="rtds-heading-2">{{ currentStep.title }}</h2>
<section class="rtds-space-y-6">
<h3 class="rtds-heading-3">Scegli la data e l'orario</h3>
<div class="rtds-field-row">
{% render '@input-field', {
label: 'Data appuntamento',
inputId: 'input-data-sb',
inputType: 'date',
inputRequired: true,
inputAriaDescribedBy: 'input-data-sb-desc',
inputDescription: 'Inserisci la data nel formato GG/MM/AAAA'
}, true %}
{% render '@select-field', {
label: 'Orario disponibile',
selectId: 'select-orario-sb',
selectRequired: true,
selectAriaDescribedBy: 'select-orario-sb-desc',
selectDescription: 'Seleziona uno degli orari disponibili'
}, true %}
</div>
</section>
<section class="rtds-space-y-6">
<h3 class="rtds-heading-3">Disponibilità alternativa</h3>
<div class="rtds-field-row">
<fieldset class="rtds-input-field rtds-input-fieldset">
<legend class="rtds-input-field__label">Periodo preferito <abbr class="rtds-font-bold rtds-no-underline" title="obbligatorio">*</abbr></legend>
<div class="rtds-grid sm:rtds-flex rtds-gap-4 sm:rtds-gap-6 sm:rtds-items-start">
{% render '@input-field', {
inputId: 'data-inizio-sb',
inputType: 'date',
label: 'Data inizio',
hiddenLabel: true,
inputRequired: true,
inputAriaDescribedBy: 'data-inizio-sb-desc',
inputDescription: 'Data inizio — formato GG/MM/AAAA',
classes: 'sm:rtds-flex-1'
}, true %}
{% render '@input-field', {
inputId: 'data-fine-sb',
inputType: 'date',
label: 'Data fine',
hiddenLabel: true,
inputRequired: true,
inputAriaDescribedBy: 'data-fine-sb-desc',
inputDescription: 'Data fine — formato GG/MM/AAAA',
classes: 'sm:rtds-flex-1'
}, true %}
</div>
</fieldset>
<fieldset class="rtds-input-field rtds-input-fieldset">
<legend class="rtds-input-field__label">Fascia oraria <abbr class="rtds-font-bold rtds-no-underline" title="obbligatorio">*</abbr></legend>
<div class="rtds-grid sm:rtds-flex rtds-gap-4 sm:rtds-gap-6 sm:rtds-items-start">
{% render '@input-field', {
inputId: 'ora-inizio-sb',
inputType: 'time',
label: 'Ora inizio',
hiddenLabel: true,
inputRequired: true,
inputAriaDescribedBy: 'ora-inizio-sb-desc',
inputDescription: 'Ora di inizio — formato HH:MM',
classes: 'sm:rtds-flex-1'
}, true %}
{% render '@input-field', {
inputId: 'ora-fine-sb',
inputType: 'time',
label: 'Ora fine',
hiddenLabel: true,
inputRequired: true,
inputAriaDescribedBy: 'ora-fine-sb-desc',
inputDescription: 'Ora di fine — formato HH:MM',
classes: 'sm:rtds-flex-1'
}, true %}
</div>
</fieldset>
</div>
</section>
<section class="rtds-space-y-6">
<h3 class="rtds-heading-3">Dettagli</h3>
<div class="rtds-field-row">
{% render '@select-field', {
label: 'Motivo appuntamento',
selectId: 'select-motivo-sb',
selectRequired: true,
selectAriaDescribedBy: 'select-motivo-sb-desc',
selectDescription: 'Indica il motivo per cui richiedi l\'appuntamento'
}, true %}
{% render '@select-field', {
label: 'Tipo servizio',
selectId: 'select-tipo-sb',
selectRequired: true,
selectAriaDescribedBy: 'select-tipo-sb-desc',
selectDescription: 'Seleziona la tipologia di servizio richiesta'
}, true %}
</div>
{% render '@input-textarea', {
label: 'Note aggiuntive',
textareaId: 'textarea-note-sb',
textareaRows: 4,
classes: 'lg:rtds-max-w-1/2',
textareaAriaDescribedBy: 'textarea-note-sb-desc',
textareaDescription: 'Facoltativo. Massimo 500 caratteri. Aggiungi eventuali informazioni utili per gestire la richiesta.'
}, true %}
</section>
<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',
classes: 'rtds-btn--primary rtds-w-full md:rtds-w-auto',
buttonType: 'submit'
}, true %}
</div>
<div class="rtds-flex rtds-justify-between md:rtds-justify-start rtds-gap-3">
{% render '@button--icon-left', {
label: 'Indietro',
classes: 'rtds-btn--outlined',
icon: 'mini--chevron-left',
buttonType: 'button'
}, true %}
{% render '@button--icon-right', {
label: 'Avanti',
classes: 'rtds-btn--outlined',
icon: 'mini--chevron-right',
iconTransformType: 'translate',
buttonType: 'button'
}, true %}
</div>
</div>
</div>
</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",
"active": true
},
{
"label": "Richiedente"
},
{
"label": "Riepilogo"
}
]
},
"currentStep": {
"title": "Data e ora"
},
"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à"
}
]
},
"sideNav": {
"label": "Sezioni del servizio",
"labelId": "sideNavLabel",
"id": "sideNav",
"listId": "sideNavList",
"singlePage": true,
"firstLevels": [
{
"label": "Informazioni",
"href": "#informazioni"
},
{
"label": "Prenotazione",
"href": "#prenotazione",
"isCurrentPage": true
},
{
"label": "Le mie prenotazioni",
"href": "#le-mie-prenotazioni"
}
]
}
}
Modello esemplificativo di uno step intermedio del flusso di compilazione di un servizio digitale.
Questo template è un modello esemplificativo che mostra una composizione consigliata di componenti RTDS per uno step di form in un servizio. Per la documentazione completa di ciascun componente (header, page-header, steps, footer, ecc.) fare riferimento alla scheda del componente nel Design System.
Template di pagina completo (header + main + footer). Renderizza un form con navigazione a step. Il contenuto della form è esemplificativo e va sostituito con i campi del servizio reale.
| Variante | Container | Campi form |
|---|---|---|
| Base | rtds-container (1536px) |
rtds-field-row + composite fields |
| Con sidebar | rtds-container (1536px) |
rtds-field-row + composite fields, layout 3+9 colonne |
| Container stretto | rtds-container-xs (1024px) |
Colonna singola + composite fields |
rtds-field-row — wrapper <div class="rtds-field-row"> che su lg affianca i figli in flex con max-w-1/2 ciascuno. Usato per 2 campi correlati (es. data + orario) o per 2 composite fields.rtds-input-fieldset — <fieldset class="rtds-input-field rtds-input-fieldset"> con <legend> visibile e campi interni in sm:rtds-flex. I campi interni usano hiddenLabel: true e classes: 'sm:rtds-flex-1'. Usato per range (data inizio/fine, ora inizio/fine).rtds-field-row: si usa rtds-container-xs al posto di rtds-container per limitare la larghezza dei campi senza markup aggiuntivo. Non annidare classi container.| Parametro | Tipo | Obbligatorio | Descrizione |
|---|---|---|---|
secondLogoPath |
string | sì | Path del secondo logo nell’header |
secondLogoAlt |
string | sì | Alt text del secondo logo |
secondaryLogoText |
string | no | Nome del servizio accanto al logo |
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 |
currentStep.title |
string | sì | Titolo dello step corrente (h2) |
footer |
object | sì | Context per @footer |
sideNav |
object | sì (con-sidebar) | Context per @side-navigation--anchor |
@skip-link<header> con aria-label<main> con id="mainContent" (destinazione skip link)@steps--numbered@side-navigation--anchor gestisce aria-labelledby e navigazione da tastiera@skip-link, @top-bar, @main-heading--logo-square, @page-header-base-smart--semplice, @steps--numbered, @side-navigation--anchor (variante con-sidebar), @input-field, @select-field, @input-textarea, @button, @button--icon-left, @button--icon-right, @footer