Regione Toscana Design System Design System Servizi

Template — Homepage servizio 

<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="#" 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">
                        Prenotazione sportello
                    </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 per pratiche anagrafiche, rilascio documenti e altri servizi al cittadino.</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">

    <section class="rtds-py-12 md:rtds-py-16" id="chi-e-rivolto">
        <div class="rtds-container rtds-space-y-4">
            <h2 class="rtds-heading-2">A chi è rivolto</h2>
            <div class="rtds-grid rtds-grid-cols-1 md:rtds-grid-cols-2 lg:rtds-grid-cols-3 rtds-gap-4">

                <article class="rtds-card rtds-card--information rtds-card--information-icon
">

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

                    </div>

                    <div class="rtds-card__content">

                        <div class="rtds-card__heading">

                            <h3 class="rtds-card__title">
                                <a class="" href="">

                                    Cittadini maggiorenni

                                </a>
                            </h3>

                        </div>

                        <div class="rtds-card__description ">
                            <p>
                                Residenti o domiciliati nel comune, anche in forma di autocertificazione.
                            </p>
                        </div>

                    </div>

                </article>

                <article class="rtds-card rtds-card--information rtds-card--information-icon
">

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

                    </div>

                    <div class="rtds-card__content">

                        <div class="rtds-card__heading">

                            <h3 class="rtds-card__title">
                                <a class="" href="">

                                    Famiglie

                                </a>
                            </h3>

                        </div>

                        <div class="rtds-card__description ">
                            <p>
                                È possibile prenotare per un familiare convivente.
                            </p>
                        </div>

                    </div>

                </article>

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

    <section class="rtds-py-12 md:rtds-py-16" id="come-funziona">
        <div class="rtds-container rtds-space-y-4">
            <h2 class="rtds-heading-2">Come funziona</h2>
            <ol class="rtds-space-y-4 rtds-list-none rtds-p-0 rtds-m-0">

                <li class="rtds-flex rtds-items-start rtds-gap-4">
                    <span class="rtds-flex-none rtds-inline-flex rtds-items-center rtds-justify-center rtds-w-8 rtds-h-8 rtds-rounded-full rtds-bg-primary-500 rtds-text-white rtds-font-semibold rtds-text-sm" aria-hidden="true">1</span>
                    <div class="rtds-space-y-1">
                        <p class="rtds-font-semibold rtds-text-base rtds-content-01">Scegli il servizio</p>
                        <p class="rtds-text-sm">Seleziona il tipo di appuntamento tra quelli disponibili allo sportello.</p>
                    </div>
                </li>

                <li class="rtds-flex rtds-items-start rtds-gap-4">
                    <span class="rtds-flex-none rtds-inline-flex rtds-items-center rtds-justify-center rtds-w-8 rtds-h-8 rtds-rounded-full rtds-bg-primary-500 rtds-text-white rtds-font-semibold rtds-text-sm" aria-hidden="true">2</span>
                    <div class="rtds-space-y-1">
                        <p class="rtds-font-semibold rtds-text-base rtds-content-01">Seleziona data e ora</p>
                        <p class="rtds-text-sm">Scegli il giorno e la fascia oraria più comoda tra quelle libere.</p>
                    </div>
                </li>

                <li class="rtds-flex rtds-items-start rtds-gap-4">
                    <span class="rtds-flex-none rtds-inline-flex rtds-items-center rtds-justify-center rtds-w-8 rtds-h-8 rtds-rounded-full rtds-bg-primary-500 rtds-text-white rtds-font-semibold rtds-text-sm" aria-hidden="true">3</span>
                    <div class="rtds-space-y-1">
                        <p class="rtds-font-semibold rtds-text-base rtds-content-01">Inserisci i tuoi dati</p>
                        <p class="rtds-text-sm">Carta d&#39;identità o dati anagrafici del familiare convivente.</p>
                    </div>
                </li>

                <li class="rtds-flex rtds-items-start rtds-gap-4">
                    <span class="rtds-flex-none rtds-inline-flex rtds-items-center rtds-justify-center rtds-w-8 rtds-h-8 rtds-rounded-full rtds-bg-primary-500 rtds-text-white rtds-font-semibold rtds-text-sm" aria-hidden="true">4</span>
                    <div class="rtds-space-y-1">
                        <p class="rtds-font-semibold rtds-text-base rtds-content-01">Ricevi la conferma</p>
                        <p class="rtds-text-sm">Riceverai una email con i dettagli dell&#39;appuntamento e il codice di riferimento.</p>
                    </div>
                </li>

            </ol>
        </div>
    </section>

    <section class="rtds-py-12 md:rtds-py-16" id="cosa-ti-serve">
        <div class="rtds-container rtds-space-y-4">
            <h2 class="rtds-heading-2">Cosa ti serve</h2>

            <p class="rtds-text-base">Assicurati di avere a portata di mano questi documenti prima di avviare la richiesta.</p>

            <div class="rtds-accordion rtds-accordion--smart rtds-gap-0">

                <div class="rtds-accordion__item rtds-border-b rtds-border-gray-01 rtds-py-3">
                    <div class="rtds-flex rtds-items-center rtds-justify-between rtds-gap-2 rtds-pr-3">
                        <div class="rtds-flex rtds-items-center rtds-gap-2 rtds-flex-1">
                            <h3 class="rtds-accordion__title rtds-flex rtds-font-bold rtds-text-base rtds-content-01">
                                <button type="button" aria-expanded="false" class="rtds-accordion__trigger rtds-group rtds-flex rtds-items-center rtds-text-left rtds-flex-1 rtds-transition-all rtds-p-1 rtds-content-primary" aria-controls="accordionSection-1" id="accordion1id">
                                    <span class="rtds-accordion__icon rtds-flex rtds-p-2 rtds-ml-auto rtds-h-auto rtds-transition-all">
                                        <svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6 rtds-transition-all is-expand-arrow group-aria-expanded:rtds-rotate-180" aria-hidden="true" focusable="false" role="img">
                                            <use href="../../icons.svg#mini--chevron-up" />
                                        </svg>

                                    </span>
                                    <span class="rtds-accordion__trigger-label rtds-content-01 rtds-flex rtds-items-center rtds-flex-1 rtds-min-w-0 rtds-text-base lg:rtds-text-lg">
                                        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.
                    </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 formato cartaceo o digitale.
                    </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">
                                        Modulo di richiesta
                                    </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>
                        Il modulo viene generato automaticamente durante la prenotazione. Non è necessario portarlo compilato.
                    </div>
                </div>

            </div>

        </div>
    </section>

    <section class="rtds-py-12 md:rtds-py-16">
        <div class="rtds-container">
            <section class="rtds-cta-banner rtds-background-03 rtds-cta-banner--bg-icon-right" style="background-image: url(../../images/banner-bg-icon.svg);">
                <div class="rtds-grid rtds-grid-cols-1 lg:rtds-grid-cols-12">

                    <div class="rtds-cta-banner__content rtds-grid rtds-p-5 rtds-gap-4 md:rtds-gap-6 rtds-col-span-12">
                        <div class="rtds-space-y-2 rtds-pr-16 ">
                            <h2 class="rtds-heading-4">
                                Pronto a presentare la tua richiesta?
                            </h2>

                            <div class="rtds-text-sm lg:rtds-text-base">
                                <p>
                                    Occorrono circa 10 minuti. Puoi salvare la bozza e riprendere più tardi.
                                </p>
                            </div>

                        </div>

                        <div class="rtds-cta-banner__cta  rtds-mt-auto rtds-grid sm:rtds-flex sm:rtds-flex-wrap rtds-gap-2">

                            <a href="#" class="rtds-btn 
    rtds-btn--icon-right rtds-group/button rtds-btn--primary rtds-btn--s">

                                Avvia la richiesta

                                <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--arrow-right" />
                                </svg>

                            </a>

                        </div>

                    </div>

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

</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">

  <section class="rtds-py-12 md:rtds-py-16" id="chi-e-rivolto">
    <div class="rtds-container rtds-space-y-4">
      <h2 class="rtds-heading-2">A chi è rivolto</h2>
      <div class="rtds-grid rtds-grid-cols-1 md:rtds-grid-cols-2 lg:rtds-grid-cols-3 rtds-gap-4">
        {% for audience in whoIsItFor %}
        {% set audienceExcerpt = audience.description if audience.description else 'is-empty' %}
        {% set audienceIcon = audience.icon if audience.icon else 'mini--user' %}
        {% render '@card--information-icon', {
          h2: false,
          heading: audience.label,
          excerpt: audienceExcerpt,
          icon: audienceIcon,
          svgSize: 'rtds-w-6 rtds-h-6',
          fullClick: false,
          tags: false
        }, true %}
        {% endfor %}
      </div>
    </div>
  </section>

  <section class="rtds-py-12 md:rtds-py-16" id="come-funziona">
    <div class="rtds-container rtds-space-y-4">
      <h2 class="rtds-heading-2">Come funziona</h2>
      <ol class="rtds-space-y-4 rtds-list-none rtds-p-0 rtds-m-0">
        {% for step in howItWorks %}
        <li class="rtds-flex rtds-items-start rtds-gap-4">
          <span class="rtds-flex-none rtds-inline-flex rtds-items-center rtds-justify-center rtds-w-8 rtds-h-8 rtds-rounded-full rtds-bg-primary-500 rtds-text-white rtds-font-semibold rtds-text-sm" aria-hidden="true">{{ loop.index }}</span>
          <div class="rtds-space-y-1">
            <p class="rtds-font-semibold rtds-text-base rtds-content-01">{{ step.label }}</p>
            {% if step.description %}<p class="rtds-text-sm">{{ step.description }}</p>{% endif %}
          </div>
        </li>
        {% endfor %}
      </ol>
    </div>
  </section>

  <section class="rtds-py-12 md:rtds-py-16" id="cosa-ti-serve">
    <div class="rtds-container rtds-space-y-4">
      <h2 class="rtds-heading-2">Cosa ti serve</h2>
      {% if requirementsIntro %}
      <p class="rtds-text-base">{{ requirementsIntro }}</p>
      {% endif %}
      {% render '@accordion-smart', requirements, true %}
    </div>
  </section>

  <section class="rtds-py-12 md:rtds-py-16">
    <div class="rtds-container">
      {% render '@cta-banner--has-icon-right', ctaBanner, true %}
    </div>
  </section>

</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": "Prenotazione sportello",
    "description": "Prenota un appuntamento allo sportello per pratiche anagrafiche, rilascio documenti e altri servizi al cittadino.",
    "hasBg": true,
    "backLink": false,
    "breadcrumb": {
      "items": [
        {
          "label": "Home"
        },
        {
          "label": "Servizi"
        },
        {
          "label": "Prenotazione sportello"
        }
      ]
    }
  },
  "whoIsItFor": [
    {
      "label": "Cittadini maggiorenni",
      "description": "Residenti o domiciliati nel comune, anche in forma di autocertificazione.",
      "icon": "mini--user"
    },
    {
      "label": "Famiglie",
      "description": "È possibile prenotare per un familiare convivente.",
      "icon": "mini--home"
    }
  ],
  "howItWorks": [
    {
      "label": "Scegli il servizio",
      "description": "Seleziona il tipo di appuntamento tra quelli disponibili allo sportello."
    },
    {
      "label": "Seleziona data e ora",
      "description": "Scegli il giorno e la fascia oraria più comoda tra quelle libere."
    },
    {
      "label": "Inserisci i tuoi dati",
      "description": "Carta d'identità o dati anagrafici del familiare convivente."
    },
    {
      "label": "Ricevi la conferma",
      "description": "Riceverai una email con i dettagli dell'appuntamento e il codice di riferimento."
    }
  ],
  "requirementsIntro": "Assicurati di avere a portata di mano questi documenti prima di avviare la richiesta.",
  "requirements": {
    "hasActions": false,
    "panels": [
      {
        "label": "Documento di identità",
        "text": "Carta d'identità in corso di validità o passaporto."
      },
      {
        "label": "Codice fiscale",
        "text": "Tessera sanitaria o codice fiscale in formato cartaceo o digitale."
      },
      {
        "label": "Modulo di richiesta",
        "text": "Il modulo viene generato automaticamente durante la prenotazione. Non è necessario portarlo compilato."
      }
    ]
  },
  "ctaBanner": {
    "title": "Pronto a presentare la tua richiesta?",
    "description": "Occorrono circa 10 minuti. Puoi salvare la bozza e riprendere più tardi.",
    "cta": [
      {
        "variant": "--icon-right-s",
        "context": {
          "classes": "rtds-btn--primary",
          "href": "#",
          "label": "Avvia la richiesta",
          "icon": "mini--arrow-right",
          "iconTransformType": "translate"
        }
      }
    ]
  },
  "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à"
      }
    ]
  }
}

Template — Homepage servizio

Modello esemplificativo della landing page di un singolo servizio digitale.

Questo template è un modello esemplificativo che mostra una composizione consigliata di componenti RTDS per la homepage di un servizio. Per la documentazione completa di ciascun componente fare riferimento alla scheda del componente nel Design System.

Comportamento

Template di pagina completo (header + main + footer). Mostra il servizio con le informazioni necessarie all’utente per decidere se avviare la richiesta.

Varianti

Variante Descrizione
Base Servizio accessibile senza autenticazione — CTA singola “Avvia la richiesta”
Con autenticazione richiesta Alert informativo in cima + CTA doppia (avvia / accedi)

Parametri di configurazione

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
whoIsItFor array sì Categorie destinatarie — ogni item: { label, description?, icon? }
howItWorks array sì Passi del servizio — ogni item: { label, description? }
requirementsIntro string no Testo introduttivo prima dell’accordion “Cosa ti serve”
requirements object sì Context per @accordion-smart (documenti/requisiti)
ctaBanner object sì Context per @cta-banner--has-icon-right (titolo, descrizione, cta[])
footer object sì Context per @footer

Struttura whoIsItFor

whoIsItFor:
  - label: Cittadini maggiorenni
    description: Residenti o domiciliati nel comune.  # opzionale
    icon: mini--user                                  # opzionale, default mini--user

Struttura howItWorks

howItWorks:
  - label: Scegli il servizio
    description: Seleziona il tipo di appuntamento.  # opzionale
  - label: Seleziona data e ora

Struttura ctaBanner

ctaBanner:
  title: "Pronto a presentare la tua richiesta?"
  description: "Occorrono circa 10 minuti."
  cta:
    - variant: '--icon-right-s'
      context:
        classes: 'rtds-btn--primary'
        href: '#'
        label: 'Avvia la richiesta'
        icon: 'mini--arrow-right'
        iconTransformType: 'translate'

Accessibilità

  • Skip link, landmark header/main con label appropriati
  • Alert nella variante con-autenticazione usa role="status" (informativo, non bloccante)
  • Sezione “Come funziona”: <ol> semantico — lista ordinata per contenuto sequenziale; i numeri decorativi hanno aria-hidden="true"
  • Sezione “A chi è rivolto”: card @card--information-icon senza link attivo — presentazione informativa

Componenti utilizzati

@skip-link, @top-bar, @main-heading--logo-square, @page-header-base-smart--semplice, @alert (con-autenticazione), @card--information-icon, @accordion-smart, @cta-banner--has-icon-right, @footer