<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 rtds-shadow-md" id="siteHeader" aria-label="Header del sito">
<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__navigation rtds-grid lg:rtds-flex rtds-items-center rtds-gap-2 lg:rtds-gap-8">
<!-- Secondary nav/menu component -->
<nav class="rtds-secondary-navigation" aria-label="Secondaria">
<ul class="rtds-secondary-navigation__list rtds-gap-2">
<li class="">
<a href="" class="rtds-link rtds-p-2 rtds-text-xs xl:rtds-text-sm rtds-content-01">
Uffici
</a>
</li>
<li class="">
<a href="" class="rtds-link rtds-p-2 rtds-text-xs xl:rtds-text-sm rtds-content-01">
URP
</a>
</li>
<li class="">
<a href="" class="rtds-link rtds-p-2 rtds-text-xs xl:rtds-text-sm rtds-content-01">
PEC
</a>
</li>
<li class="">
<a href="" class="rtds-link rtds-p-2 rtds-text-xs xl:rtds-text-sm rtds-content-01">
Mappa del sito
</a>
</li>
<li class="">
<a href="" class="rtds-link rtds-p-2 rtds-text-xs xl:rtds-text-sm rtds-content-01">
Amministrazione trasparente
</a>
</li>
<li class="">
<a href="" class="rtds-link rtds-p-2 rtds-text-xs xl:rtds-text-sm rtds-content-01">
Intranet
</a>
</li>
</ul>
</nav>
</div>
<div class="rtds-top-bar__utilities-area rtds-flex lg:rtds-gap-4 xl:rtds-gap-6 rtds-ml-auto">
<!-- Social links component -->
<div class="rtds-social-links rtds-grid rtds-gap-1 md:rtds-flex md:rtds-gap-6 ">
<ul id="headerSocial" class="rtds-flex rtds-items-center rtds-gap-4 lg:rtds-gap-2 xl:rtds-gap-4 rtds-flex-wrap rtds-p-2 lg:rtds-p-0">
<li class="rtds-flex rtds-items-center">
<a href="" class="rtds-link rtds-text-2xl rtds-content-05 rtds-p-2 xl:rtds-p-1 undefined rtds-link--lg">
<span class="rtds-sr-only">Vai al profilo Facebook di Regione Toscana</span>
<svg class="rtds-icon rtds-fill-current rtds-w-8 rtds-h-8 lg:rtds-w-5 lg:rtds-h-5 xl:rtds-w-6 xl:rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#solid--facebook" />
</svg>
</a>
</li>
<li class="rtds-flex rtds-items-center">
<a href="" class="rtds-link rtds-text-2xl rtds-content-05 rtds-p-2 xl:rtds-p-1 undefined rtds-link--lg">
<span class="rtds-sr-only">Vai al profilo X di Regione Toscana</span>
<svg class="rtds-icon rtds-fill-current rtds-w-8 rtds-h-8 lg:rtds-w-5 lg:rtds-h-5 xl:rtds-w-6 xl:rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#solid--x" />
</svg>
</a>
</li>
<li class="rtds-flex rtds-items-center">
<a href="" class="rtds-link rtds-text-2xl rtds-content-05 rtds-p-2 xl:rtds-p-1 undefined rtds-link--lg">
<span class="rtds-sr-only">Vai al canale Telegram di Regione Toscana</span>
<svg class="rtds-icon rtds-fill-current rtds-w-8 rtds-h-8 lg:rtds-w-5 lg:rtds-h-5 xl:rtds-w-6 xl:rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#solid--telegram" />
</svg>
</a>
</li>
<li class="rtds-flex rtds-items-center">
<a href="" class="rtds-link rtds-text-2xl rtds-content-05 rtds-p-2 xl:rtds-p-1 undefined rtds-link--lg">
<span class="rtds-sr-only">Vai al canale Youtube di Regione Toscana</span>
<svg class="rtds-icon rtds-fill-current rtds-w-8 rtds-h-8 lg:rtds-w-5 lg:rtds-h-5 xl:rtds-w-6 xl:rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#solid--youtube" />
</svg>
</a>
</li>
<li class="rtds-flex rtds-items-center">
<a href="" class="rtds-link rtds-text-2xl rtds-content-05 rtds-p-2 xl:rtds-p-1 undefined rtds-link--lg">
<span class="rtds-sr-only">Vai al canale Instagram di Regione Toscana</span>
<svg class="rtds-icon rtds-fill-current rtds-w-8 rtds-h-8 lg:rtds-w-5 lg:rtds-h-5 xl:rtds-w-6 xl:rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#solid--instagram" />
</svg>
</a>
</li>
<li class="rtds-flex rtds-items-center">
<a href="" class="rtds-link rtds-text-2xl rtds-content-05 rtds-p-2 xl:rtds-p-1 undefined rtds-link--lg">
<span class="rtds-sr-only">Vai al profilo Flickr di Regione Toscana</span>
<svg class="rtds-icon rtds-fill-current rtds-w-8 rtds-h-8 lg:rtds-w-5 lg:rtds-h-5 xl:rtds-w-6 xl:rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#solid--flickr" />
</svg>
</a>
</li>
</ul>
</div>
<div class="rtds-vertical-divider rtds-w-1e rtds-flex">
<img class="rtds-w-full rtds-h-auto" src="../../images/vertical-divider.svg" alt="">
</div>
<div class="rtds-flex rtds-gap-4 rtds-items-center">
<a href="#" class="rtds-link">
<img src="../../images/toscana-notizie.png" alt="Toscana Notizie" width="147" height="28" srcset="../../images/toscana-notizie.png 1x, ../../images/toscana-notizie@2x.png 2x">
</a>
</div>
<!-- Search Modal Desktop -->
<!-- Desktop Search Modal -->
<div class="rtds-search-modal-desktop__wrapper rtds-hidden lg:rtds-block">
<button type="button" aria-haspopup="dialog" aria-controls="searchModal" aria-expanded="false" id="searchModalTrigger" class="rtds-btn rtds-btn--outline rtds-btn--icon rtds-w-6 rtds-h-6 md:rtds-w-10 md:rtds-h-10 rtds-border-gray-03 hover:rtds-button-primary-hover focus:rtds-button-primary-hover active:rtds-button-primary-hover hover:rtds-text-white focus:rtds-text-white active:rtds-text-white">
<span class="rtds-sr-only">Cerca nel sito - apri la modale</span>
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--magnifying-glass" />
</svg>
</button>
<!-- Search Modal -->
<div id="searchModal" class="rtds-search-modal-desktop rtds-fixed rtds-items-center rtds-content-center rtds-inset-0 rtds-bg-black rtds-bg-opacity-50 rtds-overflow-y-auto rtds-h-full rtds-w-full" style="display:none;" aria-hidden="true" role="dialog" aria-modal="true" aria-labelledby="modalTitle" data-trigger-id="searchModalTrigger" data-close-button-id="closeModal">
<div class="rtds-relative rtds-h-full lg:rtds-h-full lg:rtds-w-full rtds-mx-auto rtds-p-6 lg:rtds-p-16 rtds-shadow-lg rtds-bg-white">
<div class="rtds-modal-content rtds-container rtds-px-16 rtds-grid rtds-gap-14">
<div class="rtds-flex rtds-justify-between rtds-items-center">
<h2 id="modalTitle" class="rtds-text-3xl md:rtds-text-5xl lg:rtds-text-6xl">Cerca nel sito</h2>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--icon-square rtds-btn--icon rtds-border-0 hover:rtds-background-primary hover:rtds-text-white" id="closeModal"><svg class="rtds-icon rtds-fill-current rtds-w-8 rtds-h-8" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--x-mark" />
</svg>
<span class="rtds-sr-only">
Chiudi
</span>
</button>
</div>
<form role="search" class="rtds-flex rtds-gap-2">
<div class="rtds-input-field rtds-gap-1 rtds-flex-1 rtds-search-modal-desktop__input ">
<label for="inputSearch" class="rtds-input-field__label">
Cerca servizi, informazioni, aiuti...
</label>
<div class="rtds-input has-icon">
<svg class="rtds-icon rtds-fill-current rtds-input__icon" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--magnifying-glass" />
</svg>
<input id="inputSearch" class="rtds-text-sm rtds-input-placeholder" type="search" placeholder="Cerca">
</div>
</div>
<button type="button" class="rtds-btn
rtds-btn--icon-right rtds-group/button rtds-btn--primary rtds-self-end">
Cerca nel sito
<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>
</form>
</div><!-- /END MODAL CONTENT -->
</div>
</div>
</div>
</div>
<!--/ END TOP BAR UTILITIES -->
</div>
</div><!-- /END TOPBAR -->
<!-- Main heading -->
<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" style="--branding-max-width: 217px; --branding-max-width-xl: 326px;">
<a class="rtds-site-logo rtds-logo--main rtds-logo--main rtds-w-auto" href="#">
<img class="rtds-w-full rtds-h-full rtds-object-contain rtds-object-left-top" src="../../images/logo-regione.png" srcset="../../images/logo-regione.png 1x, ../../images/logo-regione@2x.png 2x" alt="Regione Toscana - home page" width="326" height="95" />
</a>
</div>
<div class="rtds-main-headings__center rtds-flex-1 lg:rtds-ml-auto lg:rtds-justify-end">
<nav class="rtds-primary-navigation
lg:rtds-justify-end rtds-primary-navigation--megamenu has-megamenu
" 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">
Temi e servizi
</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">
Bandi e opportunitÃ
</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">
Regione
</a>
</li>
<li class="rtds-dropdown-menu has-dropdown-menu rtds-primary-navigation__item has-megamenu">
<button class="rtds-dropdown-menu__trigger rtds-dropdown-trigger rtds-group rtds-w-full rtds-flex rtds-items-center aria-expanded:rtds-sticky aria-expanded:rtds-z-30 aria-expanded:rtds-top-0 aria-expanded:rtds-bg-white aria-expanded:rtds-content-primary aria-expanded:rtds-border-b-4 aria-expanded:rtds-border-gray-02 lg:aria-expanded:rtds-border-b-0 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-01">
Dropdown item
<svg class="rtds-icon rtds-fill-current rtds-w-8 rtds-h-8 lg:rtds-hidden 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-right" />
</svg>
<svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5 rtds-hidden lg:rtds-inline-flex 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>
<div class="rtds-dropdown-menu__megamenu lg:rtds-top-[--header-offset] rtds-w-full lg:rtds-absolute lg:rtds-shadow-md lg:rtds-p-8" id="submenumenu-01">
<ul class="rtds-dropdown-menu__list lg:rtds-container">
<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" 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" 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" 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" 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" 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" 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" 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" 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" 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" href="">
<div class="rtds-flex rtds-gap-2 rtds-items-center">
<span class="rtds-grow">List item</span>
</div>
</a>
</li>
</ul>
</div>
</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>
</header>
<main id="mainContent">
<div class="rtds-space-y-5 md:rtds-space-y-8">
<div class="rtds-page-header rtds-container rtds-space-y-2 rtds-page-header--has-bg rtds-page-header--base">
<div class="rtds-flex">
<a href="#" class="rtds-text-link rtds-content-03 rtds-text-link--s">
<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#solid--arrow-left" />
</svg>
Torna a: Nome Tema
</a>
</div>
<div class="rtds-page-header__content rtds-grid rtds-gap-5 md:rtds-gap-12 rtds-grid-cols-1 md:rtds-grid-cols-12">
<div class="rtds-grid rtds-gap-5 md:rtds-col-span-9">
<div class="rtds-page-header__title rtds-space-y-4">
<h1 class="rtds-heading-1">
Titolo pagina
</h1>
</div>
<div class="rtds-page-header__description rtds-text-base lg:rtds-text-lg">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
</p>
</div>
</div>
</div>
</div>
<div class="rtds-container rtds-pt-6 md:rtds-pt-12 rtds-pb-6 md:rtds-pb-12">
<div class="rtds-grid md:rtds-grid-cols-12 rtds-gap-6 md:rtds-gap-8 lg:rtds-gap-12 xl:rtds-gap-16">
<div class="md:rtds-col-span-7">
<div class="rtds-space-y-6 md:rtds-space-y-12">
<div class="rtds-space-y-6">
<h2 class="rtds-heading-2">Ambiente e territorio</h2>
<p class="rtds-body">Regione Toscana tutela il patrimonio naturale e paesaggistico attraverso politiche integrate di salvaguardia ambientale, gestione del territorio e sviluppo sostenibile.</p>
<p class="rtds-body">Le aree protette regionali coprono oltre il 10% del territorio: 3 parchi regionali, 37 riserve naturali e 2 aree naturali protette di interesse locale.</p>
<a href="/ambiente" class="rtds-btn
rtds-btn--only-text ">
Approfondisci
<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 rtds-transition-all rtds-duration-200 rtds-ease-out rtds-transform group-hover:rtds-translate-x-1" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-right" />
</svg>
</a>
</div>
</div>
</div>
<div class="md:rtds-col-span-5">
<aside class="rtds-sidebar">
<nav class="rtds-side-navigation rtds-side-navigation--anchor is-anchor-navigation" aria-labelledby="sideAnchorNavLabel" id="sideAnchorNav" tabindex="-1">
<span id="sideAnchorNavLabel" 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="sideAnchorNavList">
<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="sideAnchorNavList">
<li class="rtds-side-navigation__item is-first-level">
<span class="rtds-side-navigation__first-level-label is-current">
<a href="#introduzione" class="rtds-side-navigation__link rtds-nav-link is-current">
<span class="rtds-side-navigation__label">
Introduzione
</span>
</a>
</span>
</li>
<li class="rtds-side-navigation__item is-first-level">
<span class="rtds-side-navigation__first-level-label">
<a href="#aree-protette" class="rtds-side-navigation__link rtds-nav-link">
<span class="rtds-side-navigation__label">
Aree protette
</span>
</a>
</span>
</li>
<li class="rtds-side-navigation__item is-first-level">
<span class="rtds-side-navigation__first-level-label">
<a href="#qualita" class="rtds-side-navigation__link rtds-nav-link">
<span class="rtds-side-navigation__label">
Qualità ambientale
</span>
</a>
</span>
</li>
<li class="rtds-side-navigation__item is-first-level">
<span class="rtds-side-navigation__first-level-label">
<a href="#energia" class="rtds-side-navigation__link rtds-nav-link">
<span class="rtds-side-navigation__label">
Energia e clima
</span>
</a>
</span>
</li>
</ul>
</nav>
</aside>
</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">Siti collegati</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" href="#">
<img class="rtds-w-full rtds-h-full rtds-object-contain rtds-object-left-top" src="../../images/toscana-notizie-mono.png" srcset="../../images/toscana-notizie-mono.png 1x, ../../images/toscana-notizie-mono@2x.png 2x" alt="Toscana Notizie" width="99" height="22" />
</a>
<a class="rtds-site-logo" href="#">
<img class="rtds-w-full rtds-h-full rtds-object-contain rtds-object-left-top" src="../../images/muoversi-in-toscana.png" alt="Muoversi in Toscana" width="111" height="24" />
</a>
<a class="rtds-site-logo" href="#">
<img class="rtds-w-full rtds-h-full rtds-object-contain rtds-object-left-top" src="../../images/toscana-accessibile.png" srcset="../../images/toscana-accessibile.png 1x, ../../images/toscana-accessibile@2x.png 2x" alt="Toscana Accessibile" width="142" height="22" />
</a>
<a class="rtds-site-logo" href="#">
<img class="rtds-w-full rtds-h-full rtds-object-contain rtds-object-left-top" src="../../images/giovanisi.png" srcset="../../images/giovanisi.png 1x, ../../images/giovanisi@2x.png 2x" alt="GiovaniSì" width="94" height="28" />
</a>
<a class="rtds-site-logo" href="#">
<img class="rtds-w-full rtds-h-full rtds-object-contain rtds-object-left-top" src="../../images/toscana-digitale.png" srcset="../../images/toscana-digitale.png 1x, ../../images/toscana-digitale@2x.png 2x" alt="Toscana Digitale" width="129" height="24" />
</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 -->
<div class="-rtds-ml-4 rtds-flex rtds-gap-y-3 rtds-gap-x-5 md:rtds-gap-y-1 rtds-flex-wrap rtds-content-01">
<small class="rtds-py-1 rtds-px-4 md:rtds-py-4 rtds-content-01 rtds-text-sm rtds-font-bold">Partita IVA 00000000000</small>
</div>
</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/regione-toscana-logo-footer.png" srcset="../../images/regione-toscana-logo-footer.png 1x, ../../images/regione-toscana-logo-footer@2x.png 2x" alt="Regione Toscana" width="220" height="65" />
</div>
</div>
</div>
</div>
</footer>
{% extends '@page-layout-with-sidebar-right-50-50' %}
{% block topContent %}
{% render '@page-header-base--has-bg' %}
{% endblock %}
{% block mainContent %}
<div class="rtds-space-y-6">
<h2 class="rtds-heading-2">{{ sectionTitle }}</h2>
<p class="rtds-body">{{ pageIntro }}</p>
<p class="rtds-body">{{ pageBody }}</p>
{% render '@button--only-text', { label: ctaLabel, href: ctaHref, icon: 'mini--arrow-right' }, true %}
</div>
{% endblock mainContent %}
{% block sideContent %}
{% render '@side-navigation--anchor', sideAnchorNav, true %}
{% endblock sideContent %}
{
"sectionTitle": "Ambiente e territorio",
"pageIntro": "Regione Toscana tutela il patrimonio naturale e paesaggistico attraverso politiche integrate di salvaguardia ambientale, gestione del territorio e sviluppo sostenibile.",
"pageBody": "Le aree protette regionali coprono oltre il 10% del territorio: 3 parchi regionali, 37 riserve naturali e 2 aree naturali protette di interesse locale.",
"ctaLabel": "Approfondisci",
"ctaHref": "/ambiente",
"sideAnchorNav": {
"label": "Indice della pagina",
"labelId": "sideAnchorNavLabel",
"id": "sideAnchorNav",
"listId": "sideAnchorNavList",
"singlePage": true,
"firstLevels": [
{
"label": "Introduzione",
"href": "#introduzione",
"isCurrentPage": true
},
{
"label": "Aree protette",
"href": "#aree-protette"
},
{
"label": "Qualità ambientale",
"href": "#qualita"
},
{
"label": "Energia e clima",
"href": "#energia"
}
]
}
}
Template compositivo con sidebar destra per pagine di articolo o contenuto con indice di pagina. Estende @page-layout-with-sidebar-right (griglia 8+4 col) e compone: intestazione di pagina, contenuto principale, navigazione anchor nella sidebar destra.
Il template estende @page-layout-with-sidebar-right, che fornisce:
@header--regione, @footer--regionemainContent → colonna sinistra, blocco sideContent → colonna destraLa variante 7-5 estende @page-layout-with-sidebar-right-50-50 (griglia 7/12 + 5/12 su 12 colonne).
default: griglia 8+4 (contenuto ampio, sidebar anchor stretta)7-5: griglia 7/12 + 5/12 via @page-layout-with-sidebar-right-50-50sectionTitle (stringa): Titolo della sezione (<h2> — l’<h1> è nel @page-header-base--has-bg)pageIntro (stringa): Paragrafo introduttivopageBody (stringa): Corpo del testoctaLabel (stringa): Etichetta del link CTActaHref (stringa): URL del link CTAsideAnchorNav (oggetto, obbligatorio)Passato direttamente a @side-navigation--anchor. Campi principali:
label (stringa): Titolo dell’indice (visibile e accessibile)labelId (stringa): ID per aria-labelledbyid (stringa): ID del componente <nav>listId (stringa): ID della <ul>singlePage (booleano): true per navigazione intra-pagina (anchor)firstLevels (array): Voci dell’indice, ciascuna con:label (stringa): Testo della vocehref (stringa): Anchor URL (es. "#sezione")isCurrentPage (booleano): Marca la voce attivaLivello AA — criteri pertinenti:
<aside> e <nav> con label accessibile<aside> — fornito dal layout, avvolge il blocco sideContent; non aggiungere un ulteriore <aside> al suo interno<nav aria-labelledby="..."> — il @side-navigation--anchor gestisce il landmark di navigazione<h2> — primo heading nel contenuto principale; l’<h1> è in @page-header-base--has-bg| Handle | Ruolo nel template |
|---|---|
@page-layout-with-sidebar-right |
Layout base (header, footer, griglia 8+4) |
@page-layout-with-sidebar-right-50-50 |
Layout alternativo (7/12 + 5/12 su 12 col), usato dalla variante 7-5 |
@page-header-base--has-bg |
Intestazione di pagina con sfondo, contiene l’<h1> |
@side-navigation--anchor |
Indice anchor nella sidebar destra |
@button--only-text |
CTA principale con icona freccia |
sideContent è già avvolto in <aside class="rtds-sidebar"> dal layout — non aggiungere un ulteriore <aside><h1> nel blocco mainContent: è già presente in @page-header-base--has-bg@side-navigation--anchor con singlePage: true rimuove aria-current="page" dai link (non navigano tra pagine)