<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">
<a href="#" class="rtds-user-dropdown__login-trigger"><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>
Accedi
</a>
</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">
<a href="#" class="rtds-user-dropdown__login-trigger"><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>
Accedi
</a>
</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">
Informazioni
</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">
Come funziona la prenotazione
</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>Tutte le informazioni su requisiti, documenti e normativa per prenotare un appuntamento allo sportello.</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">Indice della pagina</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>Indice della pagina</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 is-current">
<a href="#descrizione" class="rtds-side-navigation__link rtds-nav-link is-current">
<span class="rtds-side-navigation__label">
Descrizione
</span>
</a>
</span>
</li>
<li class="rtds-side-navigation__item is-first-level">
<span class="rtds-side-navigation__first-level-label">
<a href="#requisiti" class="rtds-side-navigation__link rtds-nav-link">
<span class="rtds-side-navigation__label">
Requisiti
</span>
</a>
</span>
</li>
<li class="rtds-side-navigation__item is-first-level">
<span class="rtds-side-navigation__first-level-label">
<a href="#documentazione" class="rtds-side-navigation__link rtds-nav-link">
<span class="rtds-side-navigation__label">
Documentazione necessaria
</span>
</a>
</span>
</li>
<li class="rtds-side-navigation__item is-first-level">
<span class="rtds-side-navigation__first-level-label">
<a href="#normativa" class="rtds-side-navigation__link rtds-nav-link">
<span class="rtds-side-navigation__label">
Normativa
</span>
</a>
</span>
</li>
</ul>
</nav>
</aside>
<div class="md:rtds-col-span-9 rtds-space-y-12">
<section id="descrizione" class="rtds-space-y-4">
<h2 class="rtds-heading-2">Descrizione</h2>
<p class="rtds-text-base rtds-content-01">Il servizio di prenotazione sportello consente ai cittadini di fissare un appuntamento presso gli uffici comunali per lo svolgimento di pratiche anagrafiche, rilascio di documenti e altri servizi. La prenotazione è gratuita e può essere effettuata online in qualsiasi momento.</p>
</section>
<section id="requisiti" class="rtds-space-y-4">
<h2 class="rtds-heading-2">Requisiti</h2>
<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">
Residenza o domicilio
</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>
Il richiedente deve essere residente o domiciliato nel comune. È possibile prenotare anche per un familiare convivente.
</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">
Maggiore età
</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>
Il richiedente deve essere maggiorenne. Per i minorenni la prenotazione deve essere effettuata da un genitore o tutore legale.
</div>
</div>
</div>
</section>
<section id="documentazione" class="rtds-space-y-4">
<h2 class="rtds-heading-2">Documentazione necessaria</h2>
<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">
Documento di identità
</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>
Carta d'identità in corso di validità o passaporto. La copia digitale è accettata solo per la prenotazione online; allo sportello è richiesto l'originale.
</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">
Codice fiscale
</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>
Tessera sanitaria o codice fiscale. In mancanza è possibile richiederlo contestualmente all'appuntamento.
</div>
</div>
<div class="rtds-accordion__item rtds-border-b rtds-border-gray-01 rtds-py-3">
<div class="rtds-flex rtds-items-center rtds-justify-between rtds-gap-2 rtds-pr-3">
<div class="rtds-flex rtds-items-center rtds-gap-2 rtds-flex-1">
<h3 class="rtds-accordion__title rtds-flex rtds-font-bold rtds-text-base rtds-content-01">
<button type="button" aria-expanded="false" class="rtds-accordion__trigger rtds-group rtds-flex rtds-items-center rtds-text-left rtds-flex-1 rtds-transition-all rtds-p-1 rtds-content-primary" aria-controls="accordionSection-3" id="accordion3id">
<span class="rtds-accordion__icon rtds-flex rtds-p-2 rtds-ml-auto rtds-h-auto rtds-transition-all">
<svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6 rtds-transition-all is-expand-arrow group-aria-expanded:rtds-rotate-180" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-up" />
</svg>
</span>
<span class="rtds-accordion__trigger-label rtds-content-01 rtds-flex rtds-items-center rtds-flex-1 rtds-min-w-0 rtds-text-base lg:rtds-text-lg">
Documentazione specifica per tipo di pratica
</span>
</button>
</h3>
</div>
</div>
<div id="accordionSection-3" role="region" aria-labelledby="accordion3id" class="rtds-accordion__pane rtds-transition-all rtds-pb-4 rtds-pl-6 sm:rtds-pl-8 md:rtds-pl-10 rtds-pr-4 md:rtds-pr-6" hidden>
A seconda del tipo di pratica potranno essere richiesti ulteriori documenti. Consultare la scheda del servizio specifico.
</div>
</div>
</div>
</section>
<section id="normativa" class="rtds-space-y-4">
<h2 class="rtds-heading-2">Normativa</h2>
<ul role="list" class="rtds-list-none rtds-p-0">
<li class="rtds-border-b rtds-border-gray-03">
<a href="#" class="rtds-text-link rtds-leading-snug">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-flex-shrink-0 rtds-flex-grow-0" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--document-text" />
</svg>
D.Lgs. 82/2005 — Codice dell'Amministrazione Digitale
</a>
</li>
<li class="rtds-border-b rtds-border-gray-03">
<a href="#" class="rtds-text-link rtds-leading-snug">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-flex-shrink-0 rtds-flex-grow-0" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--document-text" />
</svg>
D.P.R. 445/2000 — Testo unico documentazione amministrativa
</a>
</li>
<li class="rtds-border-b rtds-border-gray-03">
<a href="#" class="rtds-text-link rtds-leading-snug">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-flex-shrink-0 rtds-flex-grow-0" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--document-text" />
</svg>
Regolamento comunale servizi anagrafici
</a>
</li>
</ul>
</section>
<div>
<button type="button" class="rtds-btn
rtds-btn--primary
rtds-btn--primary">
Avvia la richiesta
</button>
</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-12">
<section id="descrizione" class="rtds-space-y-4">
<h2 class="rtds-heading-2">Descrizione</h2>
<p class="rtds-text-base rtds-content-01">{{ description }}</p>
</section>
<section id="requisiti" class="rtds-space-y-4">
<h2 class="rtds-heading-2">Requisiti</h2>
{% render '@accordion-smart', requisiti, true %}
</section>
<section id="documentazione" class="rtds-space-y-4">
<h2 class="rtds-heading-2">Documentazione necessaria</h2>
{% render '@accordion-smart', documentazione, true %}
</section>
<section id="normativa" class="rtds-space-y-4">
<h2 class="rtds-heading-2">Normativa</h2>
<ul role="list" class="rtds-list-none rtds-p-0">
{% for item in normativa %}
<li class="rtds-border-b rtds-border-gray-03">
{% render '@text-link', {
label: item.label,
href: item.href | default('#'),
hasIcon: true,
icon: item.icon | default('mini--document-text'),
iconSize: 'rtds-w-4 rtds-h-4 rtds-flex-shrink-0 rtds-flex-grow-0',
classes: 'rtds-leading-snug'
}, true %}
</li>
{% endfor %}
</ul>
</section>
<div>
{% render '@button', {
label: 'Avvia la richiesta',
classes: 'rtds-btn--primary',
buttonType: 'button'
}, true %}
</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": false
},
"pageHeader": {
"title": "Come funziona la prenotazione",
"description": "Tutte le informazioni su requisiti, documenti e normativa per prenotare un appuntamento allo sportello.",
"hasBg": true,
"backLink": false,
"breadcrumb": {
"items": [
{
"label": "Home"
},
{
"label": "Servizi"
},
{
"label": "Prenotazione sportello"
},
{
"label": "Informazioni"
}
]
}
},
"sideNav": {
"label": "Indice della pagina",
"labelId": "sideNavLabel",
"id": "sideNav",
"listId": "sideNavList",
"singlePage": true,
"firstLevels": [
{
"label": "Descrizione",
"href": "#descrizione",
"isCurrentPage": true
},
{
"label": "Requisiti",
"href": "#requisiti"
},
{
"label": "Documentazione necessaria",
"href": "#documentazione"
},
{
"label": "Normativa",
"href": "#normativa"
}
]
},
"description": "Il servizio di prenotazione sportello consente ai cittadini di fissare un appuntamento presso gli uffici comunali per lo svolgimento di pratiche anagrafiche, rilascio di documenti e altri servizi. La prenotazione è gratuita e può essere effettuata online in qualsiasi momento.",
"requisiti": {
"hasActions": false,
"panels": [
{
"label": "Residenza o domicilio",
"text": "Il richiedente deve essere residente o domiciliato nel comune. È possibile prenotare anche per un familiare convivente."
},
{
"label": "Maggiore età",
"text": "Il richiedente deve essere maggiorenne. Per i minorenni la prenotazione deve essere effettuata da un genitore o tutore legale."
}
]
},
"documentazione": {
"hasActions": false,
"panels": [
{
"label": "Documento di identità",
"text": "Carta d'identità in corso di validità o passaporto. La copia digitale è accettata solo per la prenotazione online; allo sportello è richiesto l'originale."
},
{
"label": "Codice fiscale",
"text": "Tessera sanitaria o codice fiscale. In mancanza è possibile richiederlo contestualmente all'appuntamento."
},
{
"label": "Documentazione specifica per tipo di pratica",
"text": "A seconda del tipo di pratica potranno essere richiesti ulteriori documenti. Consultare la scheda del servizio specifico."
}
]
},
"normativa": [
{
"label": "D.Lgs. 82/2005 — Codice dell'Amministrazione Digitale",
"href": "#"
},
{
"label": "D.P.R. 445/2000 — Testo unico documentazione amministrativa",
"href": "#"
},
{
"label": "Regolamento comunale servizi anagrafici",
"href": "#"
}
],
"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 di una pagina informativa/normativa relativa a un servizio digitale, con navigazione laterale ancorata alle sezioni.
Questo template è un modello esemplificativo che mostra una composizione consigliata di componenti RTDS per una pagina informativa. Per la documentazione completa di ciascun componente fare riferimento alla scheda del componente nel Design System.
Template di pagina completo con layout a griglia 3+9 colonne. La colonna sinistra contiene la navigazione ancorata alle sezioni h2; la colonna destra contiene il contenuto strutturato in sezioni.
| Variante | Descrizione |
|---|---|
| Base | Layout con sidebar ancorata (unica variante) |
| 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 |
sideNav |
object | sì | Context per @side-navigation--anchor — i href devono corrispondere agli id delle sezioni h2 |
description |
string | sì | Testo della sezione Descrizione |
requisiti |
object | sì | Context per @accordion-smart — sezione Requisiti |
documentazione |
object | sì | Context per @accordion-smart — sezione Documentazione |
normativa |
array | sì | Lista di { label, href } per la sezione Normativa |
footer |
object | sì | Context per @footer |
Gli href in sideNav.firstLevels devono corrispondere esattamente agli id delle sezioni nel contenuto:
sideNav:
firstLevels:
- label: Descrizione
href: "#descrizione" # corrisponde a <section id="descrizione"><main> per navigazione rapida<aside> contiene @side-navigation--anchor che gestisce autonomamente aria-labelledbyid che corrisponde agli href della side navigation (anchor links)@skip-link, @top-bar, @main-heading--logo-square, @page-header-base-smart--semplice, @side-navigation--anchor, @accordion-smart, @icon--small, @button, @footer