<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">
<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.png" alt="Alt logo image" width="326" height="95" />
</a>
</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">
<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" 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">
<!-- 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>
<div class="rtds-main-heading{% if bgColor %} {{ bgColor }}{% endif %}{% if classes %} {{ classes }}{% endif %}">
<div class="rtds-main-heading__container rtds-container rtds-mx-auto rtds-flex rtds-items-center rtds-flex-1">
{% block siteBranding %}
<div class="rtds-site-branding rtds-branding{% if brandingGap %} {{ brandingGap }}{% endif %}"{% if brandingMaxWidth or brandingMaxWidthXl %} style="--branding-max-width: {{ brandingMaxWidth }}; --branding-max-width-xl: {{ brandingMaxWidthXl }};"{% endif %}>
{% render '@logo--main', { href: '#', path: logoPath, size: logoSize, objectFit: logoObjectFit, classes: logoClasses, width: logoWidth, height: logoHeight, srcset: logoSrcset, sizesAttribute: logoSizesAttribute, alt: logoAlt }, true %}
{% if logoDivider === 'true' %}
{% render '@vertical-divider', { width: 'rtds-w-4 rtds-h-10 md:rtds-w-10 md:rtds-h-20', classes: verticalDividerClasses }, true %}
{% endif %}
{% if secondLogo === 'true' %}
<div class="rtds-site-branding__secondary{% if secondaryLogoWrapperClasses %} {{ secondaryLogoWrapperClasses }}{% endif %}">
{% render '@logo--secondary', { href: secondLogoHref, path: secondLogoPath, size: secondLogoSize, objectFit: secondLogoObjectFit, classes: secondLogoClasses, width: secondLogoWidth, height: secondLogoHeight, srcset: secondLogoSrcset, sizesAttribute: secondLogoSizesAttribute }, true %}
{% if secondaryLogoText %}
<span class="rtds-site-branding__secondary-text">
{{ secondaryLogoText|safe }}
</span>
{% endif %}
</div>
{% endif %}
</div>
{% endblock siteBranding %}
{% block primaryNav %}
<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">
{% if hasMobileSearch %}
{% render '@search-bar--mobile-modal', {
modalId: 'searchModalMobile',
modalTitleId: 'mobileSearchModalTitle',
modalTitle: 'Cerca nel sito',
triggerId: 'searchModalMobileTrigger',
triggerLabel: 'Cerca nel sito - apri la modale',
closeButtonId: 'closeMobileSearchModal',
closeButtonLabel: 'Chiudi modale di ricerca',
searchId: 'mobileSearchBar',
label: 'Cerca',
submitLabel: 'Cerca',
showClearButton: true,
placeholder: 'Search',
allResultsHref: '/search?q=',
allResultsLabel: 'Tutti i risultati'
}, true %}
{% endif %}
{% render '@primary-navigation', { hasSearchPanel: true, classes: 'lg:rtds-justify-end' }, true %}
</div>
</div>
{% endblock primaryNav %}
{% block rightArea %}
{% block headingActions %}
{% endblock headingActions %}
{% endblock rightArea %}
</div>
</div>
{
"logoObjectFit": "rtds-object-contain",
"logoWidth": 326,
"logoHeight": 95,
"logoSize": "rtds-w-auto",
"secondLogoObjectFit": "rtds-object-contain",
"secondLogoSize": "rtds-w-auto",
"logoClasses": "rtds-logo--main",
"secondLogoClasses": "rtds-logo--secondary",
"logoDivider": true,
"secondLogo": true
}
/* MAIN HEADING */
@layer components {
.rtds-main-heading {
@apply rtds-bg-white rtds-flex rtds-items-center rtds-px-4 rtds-py-3 lg:rtds-p-4 rtds-border-b rtds-border-primary lg:rtds-border-b-0 md-max-w-480-min-h:rtds-fixed md-max-w-480-min-h:rtds-top-[--header-top-position] md-max-w-480-min-h:rtds-right-0 md-max-w-480-min-h:rtds-left-0 md-max-w-480-min-h:rtds-z-30;
}
/* SITE BRANDING */
.rtds-site-branding {
--_branding-max-width: var(--branding-max-width, 22rem);
--_branding-max-width-xl: var(--branding-max-width-xl, 25rem);
@apply rtds-flex rtds-items-center lg:rtds-max-w-[--_branding-max-width] xl:rtds-max-w-[--_branding-max-width-xl];
}
/* LOGOS SIZE */
.rtds-logo--main {
@apply rtds-w-auto rtds-h-10 md:rtds-h-14 lg:rtds-h-auto;
}
.rtds-logo--secondary {
@apply rtds-w-auto rtds-h-10 md:rtds-h-14 lg:rtds-h-auto;
}
/* Secondary logo */
.rtds-site-branding__secondary {
@apply rtds-flex rtds-items-center rtds-gap-2 rtds-w-auto;
}
/* Logo tema */
.rtds-logo--secondary {
--_logo-secondary-width: var(--logo-secondary-width, auto);
@apply rtds-max-w-[--_logo-secondary-width];
}
}
Componente principale per l’intestazione del sito. Include branding, navigazione primaria e area per azioni aggiuntive.
Il componente Main Heading è progettato per gestire l’intestazione principale del sito con supporto per:
Il componente è stato progettato seguendo le best practice di accessibilità WCAG 2.1:
Il componente include diverse varianti:
Il componente utilizza custom properties CSS per gestire il dimensionamento del branding e dei loghi in modo flessibile e personalizzabile.
Le dimensioni massime dell’area branding sono controllate da due custom properties:
--branding-max-width: Larghezza massima per tablet (default: 22rem)--branding-max-width-xl: Larghezza massima per desktop XL (default: 25rem)Il logo secondario può essere dimensionato tramite:
--logo-secondary-width: Larghezza massima del logo secondario (default: auto)È possibile sovrascrivere queste dimensioni utilizzando i parametri del componente brandingMaxWidth e brandingMaxWidthXl.
Per controllo granulare, è possibile utilizzare style inline direttamente sull’elemento branding:
<div class="rtds-site-branding" style="--branding-max-width: 300px; --branding-max-width-xl: 350px;">
<!-- contenuto branding -->
</div>Le custom properties sono implementate nel CSS del componente utilizzando variabili CSS private che fanno riferimento alle custom properties pubbliche con valori di fallback. Questo approccio garantisce flessibilità nella personalizzazione senza dover modificare i CSS globali del sistema.
userAccess: boolean - include il componente di accesso utentebrandingGap: string - spazio tra logo e logo secondariobrandingMaxWidth: string - larghezza massima tablet per il logobrandingMaxWidthXl: string - larghezza massima desktop per il logologoDivider: boolean - include il divisore verticale tra i logologoPath: string - percorso del logologoSize: string - dimensione del logologoWidth: string - attributo width del logologoHeight: string - attributo height del logologoObjectFit: string - object-fit del logologoSrcset: string - attributo srcset per immagini responsivesizesAttribute: string - attributo sizes per immagini responsivesecondLogo: boolean - include il secondo logosecondLogoHref: string - href del secondo logosecondLogoPath: string - percorso del secondo logosecondLogoSize: string - dimensione del secondo logosecondLogoObjectFit: string - object-fit del secondo logosecondLogoWidth: string - attributo width del secondo logosecondLogoHeight: string - attributo height del secondo logosecondLogoSrcset: string - attributo srcset per immagini responsive del secondo logosecondLogoSizesAttribute: string - attributo sizes per immagini responsive del secondo logoverticalDividerClasses: string - classi per il divisore verticalesecondaryLogoWrapperClasses: string - classi per il wrapper del logo secondariosecondaryLogoText: string - testo aggiuntivo per il logo secondariologoClasses: string - classi aggiuntive per il logo principalesecondLogoClasses: string - classi aggiuntive per il logo secondariobuttons: array - bottoni nell’area azionitype: “button-left-icon” - bottone con icona a sinistratype: “button-right-icon” - bottone con icona a destratype: “button–icon” - bottone con solo iconatype: “button” - bottone semplicelabel: string - etichetta del bottoneclasses: string - classi aggiuntive per il bottonehasMobileSearch: boolean - abilita la modale mobile di ricerca
Quando abilitato, include il componente @search-bar--mobile-modal che fornisce:lg:rtds-hidden)siteBranding: area per il brandingprimaryNav: area per la navigazione primaria (include anche la modale mobile se hasMobileSearch è abilitato)rightArea: area destraheadingActions: azioni nell’intestazioneLe seguenti configurazioni sono impostate di default nel file di configurazione:
logoObjectFit: ‘rtds-object-contain’logoWidth: 326logoHeight: 95logoSize: ‘rtds-w-auto’secondLogoObjectFit: ‘rtds-object-contain’secondLogoSize: ‘rtds-w-auto’logoClasses: ‘rtds-logo–main’secondLogoClasses: ‘rtds-logo–secondary’