<div class="n7-main-heading bg-white flex items-center px-4 py-2 lg:p-4 border-b n7-border-primary lg:border-b-0">
<div class="xl:container mx-auto flex items-center flex-1">
<div class="flex items-center n7-branding site-branding lg:max-w-[35.7%]">
<a class="n7-site-logo site-logo flex w-10 h-10 md:flex-1 md:w-auto md:h-auto md:max-w-[124px] lg:max-w-[248px]" href="#">
<img class="w-full h-full object-cover md:object-contain object-left-top" src="/images/regione-toscana.png" alt="Alt logo image" width="248" height="81" />
</a>
<span class="w-4 h-10 md:w-10 md:h-20 bg-no-repeat bg-left-top bg-cover" style="background-image: url('/images/vertical-divider.svg')"></span>
<a class="n7-site-logo site-logo flex w-46 h-10 md:flex-1 md:w-auto md:h-auto md:max-w-[124px] lg:max-w-[248px]" href="#">
<img class="w-full h-full object-contain object-left-top" src="/images/artea.png" alt="Alt logo image" width="248" height="81" />
</a>
</div>
<div class="flex-1 lg:ml-auto lg:justify-end">
<nav class="n7-primary-navigation flex lg:justify-end" aria-label="Principale" id="siteNavWrapper">
<button type="button" class="n7-btn
n7-btn--only-text rounded-0 lg:hidden ml-auto n7-btn--icon group" aria-expanded="false" aria-controls="mainNavPanel" id="mobileNavToggle">
<svg class="inline-block align-middle fill-current w-4 h-4 md:w-5 md:h-5 lg:w-6 lg:h-6 m-0 p-0 transition-all duration-200 ease-out transform group-hover:translate-none is-show-menu group-aria-expanded:hidden" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--bars-3" />
</svg>
<svg class="inline-block align-middle fill-current w-4 h-4 md:w-5 md:h-5 lg:w-6 lg:h-6 m-0 p-0 transition-all duration-200 ease-out transform group-hover:translate-none is-close-menu hidden group-aria-expanded:inline-block" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--x-mark" />
</svg>
<span class="sr-only is-show-menu group-aria-expanded:hidden">
Menu
</span>
<span class="sr-only is-close-menu hidden group-aria-expanded:block">
Chiudi menu
</span>
</button>
<!-- Mobile panel -->
<div class="n7-primary-navigation__panel flex-col bg-white transition-all invisible w-[88%] lg:w-auto fixed lg:static lg:visible top-[--header-height] bottom-0 left-[12%] lg:left-0 border-l n7-border-primary lg:border-l-0 overflow-y-auto" id="mainNavPanel">
<!-- Main nav -->
<div class="n7-primary-navigation__module is-main lg:border-b-0">
<ul class="n7-primary-navigation__list lg:flex lg:justify-end gap-4 xl:gap-8 has-dropdown-menu">
<li class="n7-dropdown-menu n7-primary-navigation__item">
<button class="n7-dropdown-menu__trigger dropdown-trigger group w-full flex items-center p-3 gap-2 text-sm lg:text-base font-medium hover:underline focus:n7-content-primary aria-expanded:n7-background-gray-02 lg:aria-expanded:bg-white aria-expanded:n7-content-01" aria-expanded="false" aria-controls="submenumenu-01">
Menu item 1<svg class="inline-block align-middle fill-current w-5 h-5 ml-auto transition-all n7-dropdown-menu__trigger-icon group-aria-expanded:-rotate-180" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--chevron-down" />
</svg>
</button>
<ul class="n7-dropdown-menu__list hidden lg:absolute border border-t-0 n7-border-gray-01 lg:border-t lg:rounded lg:shadow-md lg:w-52 border-r-0 border-l-0 lg:border-r lg:border-l " id="submenumenu-01">
<li class="n7-dropdown-menu__item group border-b n7-border-gray-01 last-of-type:border-b-0">
<a class="flex p-3 gap-2 items-center transition bg-white text-sm xl:text-base hover:underline hover:n7-background-gray-02 focus:n7-background-gray-02 group-first:rounded-t group-last:rounded-b" href="">
voce 1
</a>
</li>
<li class="n7-dropdown-menu__item group border-b n7-border-gray-01 last-of-type:border-b-0">
<a class="flex p-3 gap-2 items-center transition bg-white text-sm xl:text-base hover:underline hover:n7-background-gray-02 focus:n7-background-gray-02 group-first:rounded-t group-last:rounded-b" href="">
voce 2
</a>
</li>
</ul>
</li>
<li class="n7-dropdown-menu n7-primary-navigation__item">
<button class="n7-dropdown-menu__trigger dropdown-trigger group w-full flex items-center p-3 gap-2 text-sm lg:text-base font-medium hover:underline focus:n7-content-primary aria-expanded:n7-background-gray-02 lg:aria-expanded:bg-white aria-expanded:n7-content-01" aria-expanded="false" aria-controls="submenumenu-02">
Menu item 2<svg class="inline-block align-middle fill-current w-5 h-5 ml-auto transition-all n7-dropdown-menu__trigger-icon group-aria-expanded:-rotate-180" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--chevron-down" />
</svg>
</button>
<ul class="n7-dropdown-menu__list hidden lg:absolute border border-t-0 n7-border-gray-01 lg:border-t lg:rounded lg:shadow-md lg:w-52 border-r-0 border-l-0 lg:border-r lg:border-l " id="submenumenu-02">
<li class="n7-dropdown-menu__item group border-b n7-border-gray-01 last-of-type:border-b-0">
<a class="flex p-3 gap-2 items-center transition bg-white text-sm xl:text-base hover:underline hover:n7-background-gray-02 focus:n7-background-gray-02 group-first:rounded-t group-last:rounded-b" href="">
Item label 1
</a>
</li>
<li class="n7-dropdown-menu__item group border-b n7-border-gray-01 last-of-type:border-b-0">
<a class="flex p-3 gap-2 items-center transition bg-white text-sm xl:text-base hover:underline hover:n7-background-gray-02 focus:n7-background-gray-02 group-first:rounded-t group-last:rounded-b" href="">
Item label 3
</a>
</li>
<li class="n7-dropdown-menu__item group border-b n7-border-gray-01 last-of-type:border-b-0">
<a class="flex p-3 gap-2 items-center transition bg-white text-sm xl:text-base hover:underline hover:n7-background-gray-02 focus:n7-background-gray-02 group-first:rounded-t group-last:rounded-b" href="">
Item label 4
</a>
</li>
<li class="n7-dropdown-menu__item group border-b n7-border-gray-01 last-of-type:border-b-0">
<a class="flex p-3 gap-2 items-center transition bg-white text-sm xl:text-base hover:underline hover:n7-background-gray-02 focus:n7-background-gray-02 group-first:rounded-t group-last:rounded-b" href="">
Item label 5
</a>
</li>
</ul>
</li>
<li class="n7-dropdown-menu n7-primary-navigation__item">
<button class="n7-dropdown-menu__trigger dropdown-trigger group w-full flex items-center p-3 gap-2 text-sm lg:text-base font-medium hover:underline focus:n7-content-primary aria-expanded:n7-background-gray-02 lg:aria-expanded:bg-white aria-expanded:n7-content-01" aria-expanded="false" aria-controls="submenumenu-03">
Menu item 3<svg class="inline-block align-middle fill-current w-5 h-5 ml-auto transition-all n7-dropdown-menu__trigger-icon group-aria-expanded:-rotate-180" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--chevron-down" />
</svg>
</button>
<ul class="n7-dropdown-menu__list hidden lg:absolute border border-t-0 n7-border-gray-01 lg:border-t lg:rounded lg:shadow-md lg:w-52 border-r-0 border-l-0 lg:border-r lg:border-l " id="submenumenu-03">
<li class="n7-dropdown-menu__item group border-b n7-border-gray-01 last-of-type:border-b-0">
<a class="flex p-3 gap-2 items-center transition bg-white text-sm xl:text-base hover:underline hover:n7-background-gray-02 focus:n7-background-gray-02 group-first:rounded-t group-last:rounded-b" href="">
Item label 1
</a>
</li>
<li class="n7-dropdown-menu__item group border-b n7-border-gray-01 last-of-type:border-b-0">
<a class="flex p-3 gap-2 items-center transition bg-white text-sm xl:text-base hover:underline hover:n7-background-gray-02 focus:n7-background-gray-02 group-first:rounded-t group-last:rounded-b" href="">
Item label 3
</a>
</li>
<li class="n7-dropdown-menu__item group border-b n7-border-gray-01 last-of-type:border-b-0">
<a class="flex p-3 gap-2 items-center transition bg-white text-sm xl:text-base hover:underline hover:n7-background-gray-02 focus:n7-background-gray-02 group-first:rounded-t group-last:rounded-b" href="">
Item label 4
</a>
</li>
<li class="n7-dropdown-menu__item group border-b n7-border-gray-01 last-of-type:border-b-0">
<a class="flex p-3 gap-2 items-center transition bg-white text-sm xl:text-base hover:underline hover:n7-background-gray-02 focus:n7-background-gray-02 group-first:rounded-t group-last:rounded-b" href="">
Item label 5
</a>
</li>
</ul>
</li>
<li class="n7-dropdown-menu n7-primary-navigation__item">
<button class="n7-dropdown-menu__trigger dropdown-trigger group w-full flex items-center p-3 gap-2 text-sm lg:text-base font-medium hover:underline focus:n7-content-primary aria-expanded:n7-background-gray-02 lg:aria-expanded:bg-white aria-expanded:n7-content-01" aria-expanded="false" aria-controls="submenumenu-04">
Menu item 4<svg class="inline-block align-middle fill-current w-5 h-5 ml-auto transition-all n7-dropdown-menu__trigger-icon group-aria-expanded:-rotate-180" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--chevron-down" />
</svg>
</button>
<ul class="n7-dropdown-menu__list hidden lg:absolute border border-t-0 n7-border-gray-01 lg:border-t lg:rounded lg:shadow-md lg:w-52 border-r-0 border-l-0 lg:border-r lg:border-l " id="submenumenu-04">
<li class="n7-dropdown-menu__item group border-b n7-border-gray-01 last-of-type:border-b-0">
<a class="flex p-3 gap-2 items-center transition bg-white text-sm xl:text-base hover:underline hover:n7-background-gray-02 focus:n7-background-gray-02 group-first:rounded-t group-last:rounded-b" href="">
Item label 1
</a>
</li>
<li class="n7-dropdown-menu__item group border-b n7-border-gray-01 last-of-type:border-b-0">
<a class="flex p-3 gap-2 items-center transition bg-white text-sm xl:text-base hover:underline hover:n7-background-gray-02 focus:n7-background-gray-02 group-first:rounded-t group-last:rounded-b" href="">
Item label 3
</a>
</li>
<li class="n7-dropdown-menu__item group border-b n7-border-gray-01 last-of-type:border-b-0">
<a class="flex p-3 gap-2 items-center transition bg-white text-sm xl:text-base hover:underline hover:n7-background-gray-02 focus:n7-background-gray-02 group-first:rounded-t group-last:rounded-b" href="">
Item label 4
</a>
</li>
<li class="n7-dropdown-menu__item group border-b n7-border-gray-01 last-of-type:border-b-0">
<a class="flex p-3 gap-2 items-center transition bg-white text-sm xl:text-base hover:underline hover:n7-background-gray-02 focus:n7-background-gray-02 group-first:rounded-t group-last:rounded-b" href="">
Item label 5
</a>
</li>
</ul>
</li>
<!-- only link item -->
<li class="n7-primary-navigation__item">
<a href="" class="w-full flex items-center p-3 gap-2 text-sm lg:text-base font-medium hover:underline focus:n7-content-primary">
Voce 1
</a>
</li>
</ul>
</div>
<!-- Mobile search in panel -->
<div class="n7-primary-navigation__module is-main lg:hidden">
<form role="search" class="flex items-end p-3">
<div class="n7-input-field grid gap-3 flex-1">
<label for="inputSearchMobile" class="block text-sm font-medium n7-content-03">Cerca servizi, informazioni, aiuti...</label>
<div class="n7-input flex items-center relative">
<svg class="inline-block align-middle fill-current w-6 h-6 absolute left-4 n7-content-placeholder" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--magnifying-glass" />
</svg>
<input id="inputSearchMobile" class="w-full border-2 n7-border-gray-01 text-sm n7-input-placeholder py-3 px-4 border n7-border-gray-01 rounded-l-lg rounded-r-none pl-12 " type="search" placeholder="Cerca">
</div>
</div>
<button type="button" class="n7-btn n7-btn--secondary n7-btn--icon w-12 h-12">
<span class="sr-only">Cerca</span>
<svg class="inline-block align-middle fill-current w-5 h-5" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--magnifying-glass" />
</svg>
</button>
</form>
</div>
</div>
<div class="n7-primary-navigation__backdrop bg-black/25 top-[--header-height] lg:hidden"></div>
</nav>
</div>
</div>
</div>
<div class="n7-main-heading bg-white flex items-center px-4 py-2 lg:p-4 border-b n7-border-primary lg:border-b-0">
<div class="xl:container mx-auto flex items-center flex-1">
<div class="flex items-center n7-branding site-branding lg:max-w-[35.7%]{% if logoDivider %}{% else %}gap-4 md:gap-10{% endif %}">
{% render '@logo',{ href: '#', path: '/images/regione-toscana.png', size: 'w-10 h-10 md:flex-1 md:w-auto md:h-auto md:max-w-[124px] lg:max-w-[248px]', objectFit: 'object-cover md:object-contain'}, true %}
{% if logoDivider %}<span class="w-4 h-10 md:w-10 md:h-20 bg-no-repeat bg-left-top bg-cover" style="background-image: url('/images/vertical-divider.svg')"></span>{% endif %}
{% render '@logo',{ href: '#', path: '/images/artea.png', size: 'w-46 h-10 md:flex-1 md:w-auto md:h-auto md:max-w-[124px] lg:max-w-[248px]'}, true %}
</div>
<div class="flex-1 lg:ml-auto lg:justify-end">
{% render '@primary-navigation',{hasSearchPanel:'true'}, true %}
</div>
</div>
</div>
{
"logoDivider": true
}
No notes defined.