Regione Toscana Design System Design System Servizi

Main heading component: Logo square (servizi — utente loggato) 

<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: 326px; --branding-max-width-xl: 326px;">
            <a class="rtds-site-logo xs:rtds-flex-none rtds-logo--main 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.png" 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">
            <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" 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">

                            <div class="rtds-pb-1 rtds-border-b rtds-border-gray-01 rtds-grid">

                                <nav class="rtds-user-dropdown" aria-label="Utente" id="userDropdown">

                                    <div class="rtds-dropdown-menu rtds-user-dropdown__menu has-dropdown-menu rtds-flex-1">
                                        <button class="rtds-dropdown-menu__trigger rtds-dropdown-trigger rtds-group hover:rtds-underline hover:rtds-content-primary aria-expanded:rtds-bg-white aria-expanded:rtds-content-primary aria-expanded:rtds-relative" aria-expanded="false" aria-controls="userDropdownMobile">
                                            Mario Rossi<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-user-dropdown__menu-list rtds-hidden rtds-border rtds-w-full lg:rtds-rounded lg:rtds-shadow-md lg:rtds-absolute" id="userDropdownMobile">

                                            <li class="rtds-dropdown-menu__item rtds-user-dropdown__menu-item">
                                                <div class="rtds-user-dropdown__menu-label rtds-items-center">
                                                    Item label 1
                                                </div>
                                                <ul class="rtds-user-dropdown__menu-sublist">

                                                    <li class="rtds-user-dropdown__menu-label">
                                                        <a class="rtds-user-dropdown__menu-link" href="">
                                                            Item label 1
                                                        </a>
                                                    </li>

                                                    <li class="rtds-user-dropdown__menu-label">
                                                        <a class="rtds-user-dropdown__menu-link" href="">
                                                            Item label 1
                                                        </a>
                                                    </li>

                                                </ul>
                                            </li>

                                            <li class="rtds-dropdown-menu__item rtds-user-dropdown__menu-item">
                                                <div class="rtds-user-dropdown__menu-label rtds-items-center">
                                                    Item label 1
                                                </div>
                                                <ul class="rtds-user-dropdown__menu-sublist">

                                                    <li class="rtds-user-dropdown__menu-label">
                                                        <a class="rtds-user-dropdown__menu-link" href="">
                                                            Item label 1
                                                        </a>
                                                    </li>

                                                    <li class="rtds-user-dropdown__menu-label">
                                                        <a class="rtds-user-dropdown__menu-link" href="">
                                                            Item label 1
                                                        </a>
                                                    </li>

                                                </ul>
                                            </li>

                                            <li class="rtds-dropdown-menu__item rtds-user-dropdown__menu-item">
                                                <a class="rtds-user-dropdown__menu-logout rtds-user-dropdown__menu-link is-logout" href="#">
                                                    Esci<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#solid--arrow-right-start-on-rectangle" />
                                                    </svg>
                                                </a>
                                            </li>

                                        </ul>

                                    </div>
                                </nav>

                            </div>

                            <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', hasUserDropdown: hasUserDropdown, userDropdown: userDropdown }, 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-[35px] rtds-h-[35px] md:rtds-w-[75px] md:rtds-h-[75px]",
  "secondLogoObjectFit": "rtds-object-contain",
  "secondLogoSize": "rtds-w-auto",
  "logoClasses": "xs:rtds-flex-none rtds-logo--main",
  "secondLogoClasses": "rtds-logo--secondary",
  "brandingMaxWidth": "326px",
  "brandingMaxWidthXl": "326px",
  "logoDivider": false,
  "secondLogo": true,
  "hasUserDropdown": true,
  "navHasUserDropdown": true,
  "userDropdown": {
    "isUserLoggedIn": true,
    "userDropdownId": "userDropdownMobile",
    "userName": "Mario Rossi"
  }
}
  • Content: 
    /* MAIN HEADING */
.rtds-main-heading {
    border-bottom-width: 1px;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
        border-color: var(--color-border-primary);
    display: flex;
    align-items: center;
    padding-left: var(--spacing-4);
    padding-right: var(--spacing-4);
    padding-top: var(--spacing-3);
    padding-bottom: var(--spacing-3);
}
@media (min-width: 1024px) {
    .rtds-main-heading {
        border-bottom-width: 0px;
        padding: var(--spacing-4);
    }
}
@media (max-width: 1023px) and (min-height: 480px) {
    .rtds-main-heading {
        position: fixed;
        top: var(--header-top-position);
        right: var(--spacing-0);
        left: var(--spacing-0);
        z-index: 30;
    }
}
/* SITE BRANDING */
.rtds-site-branding {
        --_branding-max-width: var(--branding-max-width, 22rem);
        --_branding-max-width-xl: var(--branding-max-width-xl, 25rem);
    display: flex;
    align-items: center;
    }
@media (min-width: 1024px) {
    .rtds-site-branding {
        max-width: var(--_branding-max-width);
    }
}
@media (min-width: 1280px) {
    .rtds-site-branding {
        max-width: var(--_branding-max-width-xl);
    }
}
/* LOGOS SIZE */
.rtds-logo--main {
    height: var(--spacing-10);
    width: auto;
}
@media (min-width: 768px) {
    .rtds-logo--main {
        height: var(--spacing-14);
    }
}
@media (min-width: 1024px) {
    .rtds-logo--main {
        height: auto;
    }
}
.rtds-logo--secondary {
    height: var(--spacing-10);
    width: auto;
}
@media (min-width: 768px) {
    .rtds-logo--secondary {
        height: var(--spacing-14);
    }
}
@media (min-width: 1024px) {
    .rtds-logo--secondary {
        height: auto;
    }
}
/* Secondary logo */
.rtds-site-branding__secondary {
    width: auto;
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}
/* Logo tema */
.rtds-logo--secondary {
        --_logo-secondary-width: var(--logo-secondary-width, auto);
        max-width: var(--_logo-secondary-width);
    }
  • URL: /components/raw/main-heading/main-heading.built.css
  • Filesystem Path: components/04-organisms/main-heading/main-heading.built.css
  • Size: 2.1 KB
  • Content: 
    /* 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];
    }
}
  • URL: /components/raw/main-heading/main-heading.css
  • Filesystem Path: components/04-organisms/main-heading/main-heading.css
  • Size: 1.2 KB

Componente Main Heading

Componente principale per l’intestazione del sito. Include branding, navigazione primaria e area per azioni aggiuntive.

Comportamento e Funzionalità

Il componente Main Heading è progettato per gestire l’intestazione principale del sito con supporto per:

  • Branding con logo principale e secondario
  • Navigazione primaria
  • Area per azioni aggiuntive
  • Supporto per megamenu
  • Layout responsive

Accessibilità

WCAG 2.1

Livello AA — criteri pertinenti:

  • 1.3.1 Informazioni e correlazioni — struttura semantica con <div> contenitore, logo e navigazione primaria
  • 1.1.1 Contenuti non testuali — i loghi devono avere alt descrittivo tramite parametri logoAlt e simili
  • 2.4.1 Salto di blocchi — il componente è incluso nell’<header> che è un landmark; la navigazione primaria ha il proprio landmark

Struttura e semantica

  • Il componente è renderizzato come <div class="rtds-main-heading"> — parte del landmark <header>
  • La navigazione primaria è delegata al componente @primary-navigation con il proprio landmark <nav>
  • La modale di ricerca mobile è inclusa opzionalmente con @search-bar--mobile-modal

Attributi ARIA

Attributo Valori Condizione
alt su logo principale stringa descrittiva sempre presente tramite parametro del componente @logo--main

Screen reader

  • Il componente non ha landmark ARIA proprio — è contenuto nel <header> dell’organismo @header
  • La navigazione primaria e la modale di ricerca mobile hanno i propri attributi ARIA
  • Il testo del logo secondario secondaryLogoText è visibile anche agli screen reader

Varianti

Il componente include diverse varianti:

  1. version-01: Include logo divider e secondo logo
  2. has-actions: Include bottoni nell’area destra (parametro buttons)
  3. has-megamenu: Include megamenu nella navigazione primaria
  4. logo-square: Variante ottimizzata per loghi quadrati; riduce brandingMaxWidth e usa classi di dimensionamento esplicite per il logo principale
  5. logo-square–servizio: Header per i servizi digitali — logo quadrato, secondo logo RT, user dropdown mobile (stato non loggato)
  6. logo-square–servizio–utente-loggato: Come logo-square--servizio, con user dropdown attivo sia mobile che nella primary-navigation desktop (stato loggato)
  7. logo-square–servizio–panel: Identico a logo-square--servizio con userDropdownId: userDropdown per il layout panel
  8. logo-square–servizio–panel–utente-loggato: Identico a logo-square--servizio--utente-loggato con userDropdownId: userDropdown per il layout panel

Gestione del Dimensionamento tramite Custom Properties

Il componente utilizza custom properties CSS per gestire il dimensionamento del branding e dei loghi in modo flessibile e personalizzabile.

Custom Properties per il Branding

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)

Custom Properties per il Logo Secondario

Il logo secondario può essere dimensionato tramite:

  • --logo-secondary-width: Larghezza massima del logo secondario (default: auto)

Personalizzazione tramite Parametri del Componente

È possibile sovrascrivere queste dimensioni utilizzando i parametri del componente brandingMaxWidth e brandingMaxWidthXl.

Personalizzazione tramite Style Inline

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>

Implementazione CSS

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.

Stili CSS

Classi Base

  • .rtds-main-heading: Stile base del componente intestazione — flex, bg-white, padding responsivo, bordo inferiore, posizione fissa su schermi piccoli in landscape

Classi Elementi (BEM)

  • .rtds-main-heading__container: Wrapper interno container con flex e flex-1
  • .rtds-site-branding: Area branding (logo principale + logo secondario) — flex, items-center, larghezza massima controllata da custom properties --branding-max-width e --branding-max-width-xl
  • .rtds-site-branding__secondary: Wrapper del logo secondario e del testo opzionale — flex, items-center, gap-2
  • .rtds-logo--main: Dimensionamento logo principale — altezza responsive (h-10 mobile, h-14 tablet, h-auto desktop)
  • .rtds-logo--secondary: Dimensionamento logo secondario — altezza responsive; accetta custom property --logo-secondary-width

Custom Properties

Proprietà Default Descrizione
--branding-max-width 22rem Larghezza massima area branding su tablet
--branding-max-width-xl 25rem Larghezza massima area branding su desktop XL
--logo-secondary-width auto Larghezza massima del logo secondario

Configurazioni per lo Sviluppo in NJK

Componenti Inclusi

  • Logo (uno o più)
  • Navigazione primaria

Variabili di Contesto

Branding

  • userAccess: boolean - include il componente di accesso utente
  • brandingGap: string - spazio tra logo e logo secondario
  • brandingMaxWidth: string - larghezza massima tablet per il logo
  • brandingMaxWidthXl: string - larghezza massima desktop per il logo
  • logoDivider: boolean - include il divisore verticale tra i logo
  • logoPath: string - percorso del logo
  • logoSize: string - dimensione del logo
  • logoWidth: string - attributo width del logo
  • logoHeight: string - attributo height del logo
  • logoObjectFit: string - object-fit del logo
  • logoSrcset: string - attributo srcset per immagini responsive
  • sizesAttribute: string - attributo sizes per immagini responsive

Logo Secondario

  • secondLogo: boolean - include il secondo logo
  • secondLogoHref: string - href del secondo logo
  • secondLogoPath: string - percorso del secondo logo
  • secondLogoSize: string - dimensione del secondo logo
  • secondLogoObjectFit: string - object-fit del secondo logo
  • secondLogoWidth: string - attributo width del secondo logo
  • secondLogoHeight: string - attributo height del secondo logo
  • secondLogoSrcset: string - attributo srcset per immagini responsive del secondo logo
  • secondLogoSizesAttribute: string - attributo sizes per immagini responsive del secondo logo

Stili e Classi

  • verticalDividerClasses: string - classi per il divisore verticale
  • secondaryLogoWrapperClasses: string - classi per il wrapper del logo secondario
  • secondaryLogoText: string - testo aggiuntivo per il logo secondario
  • logoClasses: string - classi aggiuntive per il logo principale
  • secondLogoClasses: string - classi aggiuntive per il logo secondario

Azioni

  • buttons: array - bottoni nell’area azioni
    • type: “button-left-icon” - bottone con icona a sinistra
    • type: “button-right-icon” - bottone con icona a destra
    • type: “button–icon” - bottone con solo icona
    • type: “button” - bottone semplice
    • label: string - etichetta del bottone
    • classes: string - classi aggiuntive per il bottone

User Dropdown

  • hasUserDropdown: boolean - mostra il componente @user-dropdown nel pannello mobile della navigazione (visibile solo sotto lg)
  • navHasUserDropdown: boolean - mostra il componente @user-dropdown anche nella primary-navigation desktop (visibile da lg in su); usare in combinazione con hasUserDropdown: true
  • userDropdown: object - contesto passato a @user-dropdown; vedere parametri del componente user-dropdown per i dettagli

Ricerca Mobile

  • hasMobileSearch: boolean - abilita la modale mobile di ricerca Quando abilitato, include il componente @search-bar--mobile-modal che fornisce:
    • Trigger button visibile solo su mobile (nascosto su desktop con lg:rtds-hidden)
    • Modale full-screen per la ricerca mobile
    • Gestione completa dell’accessibilità e del focus

Blocchi Disponibili

  • siteBranding: area per il branding
  • primaryNav: area per la navigazione primaria (include anche la modale mobile se hasMobileSearch è abilitato)
  • rightArea: area destra
    • headingActions: azioni nell’intestazione

Configurazioni di Default

Le seguenti configurazioni sono impostate di default nel file di configurazione:

  • 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’