Header
Documentazione per la creazione e l’inserimento dell’header. Il tema Unito prevede tre modelli di header, ciascuno pensato per un diverso contesto d’uso.
Header Portale Istituzionale
Header ad uso esclusivo del Portale istituzionale unito.it. Include tutti gli elementi necessari a rappresentare l’identità dell’Ateneo e a garantire accesso rapido alle sezioni principali del Portale.
La header fa uso di una libreria Javascript custom - keyboardNav.js - per dare supporto alla navigazione tramite tastiera; questa libreria va dunque sempre inclusa nel sorgente della pagina. Le funzionalità implementate sono:
- Voci principali di navigazione (in esempio: "Ateneo", "Didattica" etc)
- Tasti freccia destra, fraccia in giù, tab: passa alla voce di navigazione successiva.
- Tasti freccia sinistra, fraccia in su, shift+tab: passa alla voce di navigazione precedente.
- Tasto home: passa alla prima voce di navigazione.
- Tasto end: passa all'ultima voce di navigazione.
- Voci principali di navigazione con livelli inferiori megamenù e non (in esempio: "Internazionalità", "Servizi")
- Click sull'elemento con tag
<a>: se l'attributo<href>è uguale a "#", apre/chiude la tendina con le voci di navigazione di livello inferiore; se diverso conduce alla url indicata nell'attributo. - Click sull'elemento con tag
<button>: apre/chiude la tendina con le voci di navigazione di livello inferiore. - Su mobile (fino 992px width) l'elemento con tag
<a>non è visibile; è presente il solo<button>che apre/chiude la tendina con le voci di navigazione di livello inferiore. - Voci secondarie di navigazione megamenù e non
- Tasti freccia destra, fraccia in giù, tab: passa alla voce di navigazione successiva.
- Tasti freccia sinistra, fraccia in su, shift+tab: passa alla voce di navigazione precedente.
- Tasto home: passa alla prima voce di navigazione.
- Tasto end: passa all'ultima voce di navigazione.
- Tasto esc: chiude la tendina.
status message
<!-- modale di ricerca mobile -->
<div class="modal modal-search fade header-2024-search" role="dialog" aria-modal="true" tabindex="-1" id="ModalSearch"
aria-label="Finestra modale di ricerca">
<div class="visually-hidden" id="search-status" aria-live="polite">status message</div>
<div class="modal-dialog m-0">
<div class="modal-content container p-1">
<div class="modal-header ps-3 pe-3 pt-2 pb-2 justify-content-end"><span class="modal-title visually-hidden">Form di ricerca</span>
<a role="button" class="" aria-label="Chiudi" href="#" data-bs-dismiss="modal">
<svg role="img" aria-describedby="title_searchMobileClose" class="icon icon-xl">
<title id="title_searchMobileClose">Chiudi la ricerca</title>
<use xlink:href="./dist/svg/sprite.svg#it-close"></use>
</svg>
</a>
</div>
<div class="modal-body">
<form id="search-block-form-modal" method="get" action="#">
<label for="edit-keys-modal" class="visually-hidden">Campo di ricerca</label>
<input
class="form-search form-control"
id="edit-keys-modal"
maxlength="128"
size="15"
value=""
name="keys"
type="search"
title="Inserisci i termini di ricerca."
placeholder="Cerca informazioni o persone">
<div class="form-actions">
<button class="btn p-0"
type="submit"
aria-label="Esegui la ricerca">
<span class="visually-hidden">Cerca</span>
<svg class="" width="24" height="24" viewBox="0 0 24 24" fill="#000"
xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M16 15.3L21.9 21.1L21.1 21.9L15.3 16C13.8225 17.2676 11.9465 17.9755 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10C17.9755 11.9465 17.2676 13.8225 16 15.3ZM3 10C3 13.866 6.13401 17 10 17C11.8565 17 13.637 16.2625 14.9497 14.9497C16.2625 13.637 17 11.8565 17 10C17 6.13401 13.866 3 10 3C6.13401 3 3 6.13401 3 10Z"
fill="#000">
</path>
</svg>
</div>
</button>
</form>
<div class="mt-5 mb-5 modal-search__bottom d-flex justify-content-center">
<div class="modal-search__hint">Inserisci un termine per la ricerca</div>
</div>
</div>
</div>
</div>
</div>
<!-- header -->
<div class="mt-5 it-header-wrapper header-2024 p-0">
<div class="it-header-slim-wrapper theme-light">
<div class="col-12 p-0">
<div class="it-header-slim-wrapper-content ps-0 pe-0 ps-lg-3 pe-lg-3 d-flex">
<div class="container d-flex">
<div class="d-flex align-items-center">
<a class="d-inline-block navbar-brand" href="#">
<img class="d-none d-lg-block"
src="https://share.easyandjuice.com/v3/dist/svg/unitoit_negativo.svg" width=66"
height="14" alt="Università degli Studi di Torino">
<img class="d-block d-lg-none"
src="https://share.easyandjuice.com/v3/dist/svg/unitoit.svg" width=66" height="14"
alt="Università degli Studi di Torino">
</a>
</div>
<div class="d-none d-lg-flex justify-content-center align-items-center it-socials">
<a href="#" class="">
<svg role="img" aria-describedby="my-title2" class="icon icon-sm">
<title id="my-title2">Meta</title>
<use xlink:href="./dist/svg/sprite.svg#it-facebook"></use>
</svg>
</a>
<a href="#">
<svg role="img" aria-describedby="my-title4" class="icon icon-sm">
<title id="my-title4">X</title>
<use xlink:href="./dist/svg/sprite.svg#it-twitter"></use>
</svg>
</a>
<a href="#">
<svg role="img" aria-describedby="my-title5" class="icon icon-sm">
<title id="my-title5">Instagram</title>
<use xlink:href="./dist/svg/sprite.svg#it-instagram"></use>
</svg>
</a>
<a href="#">
<svg role="img" aria-describedby="my-title3" class="icon icon-sm">
<title id="my-title3">LinkedIn</title>
<use xlink:href="./dist/svg/sprite.svg#it-linkedin"></use>
</svg>
</a>
<a href="#" class="">
<svg role="img" aria-describedby="my-title3_1" class="icon icon-sm">
<title id="my-title3_1">App</title>
<use xlink:href="./dist/svg/sprite.svg#it-app"></use>
</svg>
</a>
</div>
<div class="it-header-slim-right-zone justify-content-end pe-3">
<div class="d-flex m-0 align-items-center">
<ul class="d-none d-lg-flex navbar-nav flex-row justify-content-center align-items-center it-language">
<svg class="icon icon-sm me-1">
<use href="./dist/svg/sprite.svg#unito-profili-world" aria-hidden="true"></use>
</svg>
<li class="nav-item dropdown d-flex" id="cambio_lingua">
<button type="button" aria-expanded="false" aria-controls="menu_cambio_lingua"
aria-label="Cambia lingua" class="">ITA
</button>
<div class="dropdown-menu" id="menu_cambio_lingua">
<div class="link-list-wrapper">
<ul class="link-list">
<li><a class="list-item" href="#"><span>ITA</span></a></li>
<li><a class="list-item" href="#"><span>ENG</span></a></li>
<li><a class="list-item" href="#"><span>FRA</span></a></li>
</ul>
</div>
</div>
</li>
</ul>
<div class="status d-none d-lg-flex">
<a class="btn pt-1 pb-1 ps-2 pe-2 m-0" title="Stato Servizi" href="#" role="button">
<div class="d-flex align-items-center">
<svg role="img" aria-labelledby="button_tit1" class="icon">
<use href="./dist/svg/sprite.svg#it-check"></use>
<title id="button_tit1">Stato</title>
</svg>
STATO SERVIZI
</div>
</a>
</div>
<a class="d-flex justify-content-center align-items-center pt-2 pb-2 ps-2 pe-2 ps-lg-0 pe-lg-0 it-login"
href="#" title="Login">
<svg class="icon me-2 d-none d-lg-block" aria-hidden="true">
<use href="./dist/svg/sprite.svg#it-user-circle"></use>
</svg>
LOGIN</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="it-nav-wrapper">
<div class="it-header-center-wrapper theme-light">
<div class="container">
<div class="col-12 pt-3 pb-3 d-flex flex-row">
<div class="ps-3 it-header-center-content-wrapper">
<div class="it-brand-wrapper d-flex">
<a href="#" title="Lorem Ipsum">
<img class="d-none d-lg-block"
src="https://cdn.unito.it/unito-loghi/logo_sigillo.svg" width="85"
alt="Università degli Studi di Torino">
<img class="d-block d-lg-none"
src="https://cdn.unito.it/unito-loghi/logo_sigillo_orizzontale.svg" width="100"
alt="Università degli Studi di Torino">
</a>
</div>
</div>
<div id="SearchWrapper" class="d-flex align-items-center it-search-wrapper d-none d-lg-flex">
<div class="w-100">
<form name="searchForm2024" class="d-flex" id="searchForm2024" action="#" method="post">
<label for="searchField" class="sr-only">Cerca</label>
<input role="searchbox" autocomplete="off" title="Cerca informazioni o persone"
type="text" class="form-control" name="search" id="searchField"
placeholder="Cerca informazioni o persone" aria-label="Cerca">
<button type="submit" id="searchButton" class="search-link rounded-icon"
aria-label="Cerca">
<svg role="img" aria-describedby="titleCerca" class="icon icon-sm negative">
<title id="titleCerca">Cerca</title>
<use xlink:href="./dist/svg/sprite.svg#it-search"></use>
</svg>
</button>
</form>
</div>
</div>
<div class="it-right-zone pe-3 d-flex align-items-center justify-content-end">
<!-- menu informazioni per -->
<ul class="navbar-nav d-none d-lg-block me-1 me-xl-4">
<li class="nav-item dropdown d-flex" id="informazioni_per">
<button type="button" aria-expanded="false" aria-controls="menu_informazioni"
aria-label="Informazioni per">Informazioni per
</button>
<div class="dropdown-menu" id="menu_informazioni">
<div class="link-list-wrapper">
<ul class="link-list">
<li><a class="list-item" href="#"><span>Lorem ipsum</span></a></li>
<li><a class="list-item" href="#"><span>Sic gloria</span></a></li>
<li><a class="list-item" href="#"><span>Emet</span></a></li>
</ul>
</div>
</div>
</li>
</ul>
<!-- menu strutture -->
<ul class="navbar-nav d-none d-lg-block me-1 me-xl-4">
<li class="nav-item dropdown d-flex" id="strutture">
<button type="button" aria-expanded="false" aria-controls="menu_strutture"
aria-label="Strutture">Strutture
</button>
<div class="dropdown-menu" id="menu_strutture">
<div class="link-list-wrapper">
<ul class="link-list">
<li><a class="list-item" href="#"><span>Lorem ipsum</span></a></li>
<li><a class="list-item" href="#"><span>Sic gloria</span></a></li>
<li><a class="list-item" href="#"><span>Emet</span></a></li>
</ul>
</div>
</div>
</li>
</ul>
<!-- unita mobile -->
<a href="#" class="d-none d-lg-block" title="UNITA">
<img class="unita" src="./dist/svg/logo_unita.svg" alt="UniTa" width="61">
</a>
<!-- search mobile -->
<div class="d-flex d-md-none me-3">
<a id="SearchMobileOpen" role="button"
class="SearchMobileTrigger search-link rounded-icon" title="Apri modale di ricerca" data-bs-toggle="modal" data-bs-target="#ModalSearch"
href="#">
<svg role="img" aria-describedby="title_searchMobile" class="icon">
<title id="title_searchMobile">Apri la ricerca</title>
<use xlink:href="./dist/svg/sprite.svg#it-search"></use>
</svg>
</a>
</div>
<!-- hamburgher menu -->
<button class="custom-navbar-toggler p-0" type="button" aria-controls="nav03"
aria-expanded="false" aria-label="Apri/chiudi menù" data-bs-target="#nav03"
data-bs-toggle="navbarcollapsible">
<svg role="navigation" aria-describedby="title-nav-mob" class="icon">
<title id="title-nav-mob">Apri</title>
<use xlink:href="./dist/svg/sprite.svg#it-burger"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="it-header-navbar-wrapper">
<div class="container">
<div class="row">
<div class="col-12 ps-0 pe-0">
<!-- nav -->
<nav class="navbar navbar-expand-lg has-megamenu">
<div class="navbar-collapsable" id="nav03">
<!-- cambio lingua + MyUnito Mobile -->
<div id="lingua_unito_mob" class="d-flex d-lg-none ps-2 pt-3 pb-3">
<div class="col-12 ps-2">
<ul class="navbar-nav p-0">
<li class="nav-item dropdown d-flex" id="cambio_lingua_mob">
<button type="button" aria-expanded="false"
aria-controls="menu_cambio_lingua_mob"
aria-label="Cambia lingua">ITA
</button>
<div class="dropdown-menu position-absolute"
id="menu_cambio_lingua_mob">
<div class="link-list-wrapper mb-0">
<ul class="link-list">
<li><a class="list-item" href="#"><span>ITA</span></a></li>
<li><a class="list-item" href="#"><span>ENG</span></a></li>
<li><a class="list-item" href="#"><span>FRA</span></a></li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="menu-wrapper pt-3 pt-lg-0">
<ul class="navbar-nav ">
<li class="nav-item dropdown megamenu" id="terr_soc">
<a class="nav-link dropdown-toggle d-none d-lg-flex" href="#"
aria-controls="menu_ateneo" aria-expanded="false">
<span>Ateneo</span>
</a>
<button type="button" aria-expanded="false" aria-controls="menu_ateneo"
aria-label="Ateneo"><span class="d-flex d-lg-none">Ateneo</span>
</button>
<div class="dropdown-menu" id="menu_ateneo">
<div class="container d-flex flex-column flex-lg-row link-list-wrapper flex-wrap p-3">
<div class="col-12 col-md-6 col-lg-6">
<div class="link-list-wrapper">
<ul class="link-list pl-3 pl-md-0 p-lg-1">
<li><a class="list-item" title="Lorem Ipsum"
href="#"><span>Chi siamo</span></a></li>
<li><a class="list-item" title="Lorem Ipsum"
href="#"><span>Bandi di gara e contratti</span></a>
</li>
<li><a class="list-item" title="Lorem Ipsum"
href="#"><span>Assicurazione della Qualità - AQ</span></a>
</li>
<li><a class="list-item" title="Lorem Ipsum"
href="#"><span>Salute e Sicurezza</span></a></li>
<li><a class="list-item" title="Lorem Ipsum"
href="#"><span>UniTo e sanità</span></a></li>
<li><a class="list-item" title="Lorem Ipsum"
href="#"><span>Bilanci e assegnazione delle risorse</span></a>
</li>
</ul>
</div>
</div>
<div class="col-12 col-md-6 col-lg-6">
<div class="link-list-wrapper">
<ul class="link-list pl-3 pl-md-0 p-lg-1">
<li><a class="list-item" title="Lorem Ipsum"
href="#"><span>Concorsi e selezioni</span></a>
</li>
<li><a class="list-item" title="Lorem Ipsum"
href="#"><span>Strutture e sedi</span></a></li>
<li><a class="list-item" title="Lorem Ipsum"
href="#"><span>Statuto e regolamenti</span></a>
</li>
<li><a class="list-item" title="Lorem Ipsum"
href="#"><span>Organizzazione</span></a></li>
<li><a class="list-item" title="Lorem Ipsum"
href="#"><span>Mission, politiche e strategie</span></a>
</li>
<li><a class="list-item" title="Lorem Ipsum"
href="#"><span>Welfare UniTo</span></a></li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="nav-item" id="didattica"><a class="nav-link"
href="#"><span>Didattica</span></a></li>
<li class="nav-item" id="ricerca"><a class="nav-link"
href="#"><span>Ricerca</span></a></li>
<li class="nav-item" id="ateneo"><a class="nav-link" href="#"><span>Territorio e Società</span></a>
</li>
<li class="nav-item dropdown" id="Internazionalita">
<a class="nav-link dropdown-toggle d-none d-lg-flex" href="#"
aria-controls="menu_internazionalita" aria-expanded="false">
<span>Internazionalità</span>
</a>
<button type="button" aria-expanded="false"
aria-controls="menu_internazionalita" aria-label="Internazionalità">
<span class="d-flex d-lg-none">Internazionalità</span></button>
<div class="dropdown-menu" id="menu_internazionalita">
<div class="link-list-wrapper pt-2 pb-2">
<ul class="link-list pl-3 pl-md-0 p-lg-1">
<li><a class="list-item" href="#"><span>Link list 1</span></a>
</li>
<li><a class="list-item" href="#"><span>Link list 2</span></a>
</li>
<li><a class="list-item" href="#"><span>Link list 3</span></a>
</li>
<li><a class="list-item" href="#"><span>Link list 4</span></a>
</li>
</ul>
</div>
</div>
</li>
<li class="nav-item dropdown megamenu" id="servizi">
<a class="nav-link dropdown-toggle d-none d-lg-flex"
href="https://www.unito.it" aria-controls="menu_servizi"
aria-expanded="false">
<span>Servizi</span>
</a>
<button id="servizi2" type="button" aria-expanded="false"
aria-controls="menu_servizi" aria-label="Servizi"><span
class="d-flex d-lg-none">Servizi</span></button>
<div class="dropdown-menu col-12 col-lg-10 m-auto" id="menu_servizi">
<div class="container d-flex flex-column flex-lg-row link-list-wrapper p-3">
<div class="col-12 col-md-6">
<div class="link-list-wrapper">
<ul class="link-list pl-3 pl-md-0 p-lg-1">
<li><a class="list-item" title="Lorem Ipsum"
href="#"><span>Chi siamo</span></a></li>
<li><a class="list-item" title="Lorem Ipsum"
href="#"><span>Bandi di gara e contratti</span></a>
</li>
<li><a class="list-item" title="Lorem Ipsum"
href="#"><span>Assicurazione della Qualità - AQ</span></a>
</li>
<li><a class="list-item" title="Lorem Ipsum"
href="#"><span>Salute e Sicurezza</span></a></li>
<li><a class="list-item" title="Lorem Ipsum"
href="#"><span>UniTo e sanità</span></a></li>
<li><a class="list-item" title="Lorem Ipsum"
href="#"><span>Bilanci e assegnazione delle risorse</span></a>
</li>
</ul>
</div>
</div>
<div class="col-12 col-md-6">
<div class="link-list-wrapper">
<ul class="link-list pl-3 pl-md-0 p-lg-1">
<li><a class="list-item" title="Lorem Ipsum"
href="#"><span>Concorsi e selezioni</span></a>
</li>
<li><a class="list-item" title="Lorem Ipsum"
href="#"><span>Strutture e sedi</span></a></li>
<li><a class="list-item" title="Lorem Ipsum"
href="#"><span>Statuto e regolamenti</span></a>
</li>
<li><a class="list-item" title="Lorem Ipsum"
href="#"><span>Organizzazione</span></a></li>
<li><a class="list-item" title="Lorem Ipsum"
href="#"><span>Mission, politiche e strategie</span></a>
</li>
<li><a class="list-item" title="Lorem Ipsum"
href="#"><span>Welfare UniTo</span></a></li>
</ul>
</div>
</div>
</div>
</div>
</li>
<hr class="d-block d-lg-none">
<li class="nav-item dropdown megamenu d-block d-lg-none" id="info_per">
<a class="nav-link dropdown-toggle d-none d-lg-flex"
href="https://www.unito.it" aria-controls="menu_info_per"
aria-expanded="false">
<span>Informazioni per</span>
</a>
<button id="servizi2" type="button" aria-expanded="false"
aria-controls="menu_info_per" aria-label="Informazioni per"><span
class="d-flex d-lg-none">Informazioni per</span></button>
<div class="dropdown-menu col-12 col-lg-10 m-auto" id="menu_info_per">
<div class="container d-flex flex-column flex-lg-row link-list-wrapper p-3">
<div class="col-12">
<div class="link-list-wrapper">
<ul class="link-list pl-3 pl-md-0 p-lg-1">
<li><a class="list-item" title="Lorem Ipsum"
href="#"><span>Lorem Ipsum</span></a></li>
<li><a class="list-item" title="Lorem Ipsum"
href="#"><span>Lorem Ipsum</span></a></li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown megamenu d-block d-lg-none" id="info_strutture">
<a class="nav-link dropdown-toggle d-none d-lg-flex"
href="https://www.unito.it" aria-controls="menu_info_strutture"
aria-expanded="false">
<span>Strutture</span>
</a>
<button id="servizi2" type="button" aria-expanded="false"
aria-controls="menu_info_strutture" aria-label="Strutture"><span
class="d-flex d-lg-none">Strutture</span></button>
<div class="dropdown-menu col-12 col-lg-10 m-auto" id="menu_info_strutture">
<div class="container d-flex flex-column flex-lg-row link-list-wrapper p-3">
<div class="col-12">
<div class="link-list-wrapper">
<ul class="link-list pl-3 pl-md-0 p-lg-1">
<li><a class="list-item" title="Lorem Ipsum"
href="#"><span>Lorem Ipsum</span></a></li>
<li><a class="list-item" title="Lorem Ipsum"
href="#"><span>Lorem Ipsum</span></a></li>
</ul>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="d-flex d-lg-none pt-4 pb-4 pr-3 justify-content-end it-buttons">
<a href="#" title="UNITA">
<img class="unita" src="./dist/svg/logo_unita_negativo.svg" alt="UniTa"
width="61">
</a>
</div>
<div class="d-flex d-md-none p-4 justify-content-between it-socials">
<a href="#" class="">
<svg role="img" aria-describedby="my-title2" class="icon icon-sm">
<title id="my-title2">Meta</title>
<use xlink:href="./dist/svg/sprite.svg#it-facebook"></use>
</svg>
</a>
<a href="#">
<svg role="img" aria-describedby="my-title4" class="icon icon-sm">
<title id="my-title4">X</title>
<use xlink:href="./dist/svg/sprite.svg#it-twitter"></use>
</svg>
</a>
<a href="#">
<svg role="img" aria-describedby="my-title5" class="icon icon-sm">
<title id="my-title5">Instagram</title>
<use xlink:href="./dist/svg/sprite.svg#it-instagram"></use>
</svg>
</a>
<a href="#">
<svg role="img" aria-describedby="my-title3" class="icon icon-sm">
<title id="my-title3">LinkedIn</title>
<use xlink:href="./dist/svg/sprite.svg#it-linkedin"></use>
</svg>
</a>
<a href="#" class="">
<svg role="img" aria-describedby="my-title3_1" class="icon icon-sm">
<title id="my-title3_1">App</title>
<use xlink:href="./dist/svg/sprite.svg#it-app"></use>
</svg>
</a>
</div>
<div class="status mb-4 d-block d-lg-none text-center">
<a class="btn pt-0 pb-0 ps-2 pe-2" title="Stato Servizi" href="#" role="button">
<div class="d-flex align-items-center">
<svg role="img" aria-labelledby="button_tit2" class="icon">
<use href="./dist/svg/sprite.svg#it-check"></use>
<title id="button_tit2">Stato</title>
</svg>
STATO SERVIZI
</div>
</a>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
</div>Header Siti di struttura e Servizi complessi
Questa variante di header è il riferimento per i siti di struttura (dipartimenti, biblioteche, centri, scuole) e per i siti a supporto della didattica (corsi di studio, master, dottorati), oltre che per i servizi e gli applicativi web più complessi che, a differenza di quelli semplici (vedi variante Header Servizi semplici), ricorrono ad esempio ad un menù di navigazione.
La palette colori utilizzata nell'esempio è solo una fra quelle disponibili per i siti di Struttura. Per approfondimenti, consulta la pagina Colori
<div class="it-header-wrapper container p-0">
<div class="it-header-slim-wrapper theme-light">
<div class="container">
<div class="row">
<div class="col-12">
<div class="it-header-slim-wrapper-content p-1">
<a class="d-none d-lg-block navbar-brand" href="#">
<img src="https://cdn.unito.it/unito-loghi/logo_sigillo_orizzontale.svg" height="32" width="86" alt="Università degli Studi di Torino"></a>
<div class="it-header-slim-right-zone">
<ul class="navbar-nav d-flex d-lg-none">
<li class="nav-item dropdown d-flex" id="cambio_lingua_mobile">
<button type="button" aria-expanded="false" aria-controls="menu_cambio_lingua_mobile" aria-label="Cambia lingua" >ITA</button>
<div class="dropdown-menu" id="menu_cambio_lingua_mobile">
<div class="link-list-wrapper ">
<ul class="link-list">
<li><a class="list-item" href="#" ><span>ITA</span></a></li>
<li><a class="list-item" href="#" ><span>ENG</span></a></li>
<li><a class="list-item" href="#" ><span>FRA</span></a></li>
</ul>
</div>
</div>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item dropdown d-flex" id="accesso_rapido">
<button type="button" aria-expanded="false" aria-controls="menu_accesso_rapido" aria-label="Accesso Rapido" >Accesso Rapido</button>
<div class="dropdown-menu" id="menu_accesso_rapido">
<div class="link-list-wrapper">
<ul class="link-list">
<li><a class="list-item" href="#" ><span>Link 1</span></a></li>
<li><a class="list-item" href="#" ><span>Link 2</span></a></li>
</ul>
</div>
</div>
</li>
</ul>
<!--<a href="#" id="login" class="d-block d-lg-none" aria-label="Login" title="Login">Login</a>-->
<div class="d-flex d-lg-none">
<a id="SearchMobileOpen" role="button" class="SearchMobileTrigger search-link rounded-icon" aria-label="Apri la ricerca" href="#">
<svg role="img" aria-describedby="title_searchMobile" class="icon">
<title id="title_searchMobile">Apri la ricerca</title><use xlink:href="./dist/svg/sprite.svg#it-search"></use>
</svg>
</a>
<a id="SearchMobileClose" role="button" class="SearchMobileTrigger d-none search-link rounded-icon" aria-label="Chiudi la ricerca" href="#">
<svg role="img" aria-describedby="title_searchMobileClose" class="icon">
<title id="title_searchMobileClose">Chiudi la ricerca</title><use xlink:href="./dist/svg/sprite.svg#it-close"></use>
</svg>
</a>
</div>
<div class="it-access-top-wrapper d-none d-lg-block">
<a href="#" class="ps-2"><img src="./assets/images/LogoUNITA.png" width="40" alt="UniTa"></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="it-nav-wrapper">
<div class="it-header-center-wrapper theme-light">
<div class="container h-100 ps-0 pe-0">
<div class="row h-100 align-items-center">
<div class="col-12 ">
<div class="it-header-center-content-wrapper">
<div class="it-brand-wrapper d-flex">
<button class="custom-navbar-toggler" type="button" aria-controls="nav02" aria-expanded="false" aria-label="Toggle navigation" data-bs-target="#nav02" data-bs-toggle="navbarcollapsible">
<svg role="navigation" aria-describedby="my-title8" class="icon">
<title id="my-title8">Apri</title><use xlink:href="./dist/svg/sprite.svg#it-burger"></use>
</svg>
</button>
<a href="#">
<img src="./assets/images/school.png" width="109" alt="Dental School" class="d-none d-lg-block">
<div class="it-brand-wrapper-descriptor">Centro di Eccellenza per la Ricerca, la Didattica e l'Assistenza in Campo Odontostomatologico - Dental School</div></a>
</div>
<div class="it-right-zone">
<a class="d-block d-lg-none navbar-brand ps-1" href="#" data-focus-mouse="false">
<img src="https://cdn.unito.it/unito-loghi/logo_sigillo_orizzontale.svg" height="32" width="86" alt="Università degli Studi di Torino"></a>
<div class="it-access-top-wrapper d-block d-lg-none ps-1 pe-1">
<a href="#"><img src="./assets/images/LogoUNITA.png" width="40" alt="UniTa"></a>
</div>
<div class="justify-content-between it-socials d-none d-lg-flex">
<div class="d-flex">
<ul class="navbar-nav">
<li class="nav-item dropdown d-flex" id="cambio_lingua">
<button type="button" aria-expanded="false" aria-controls="menu_cambio_lingua" aria-label="Cambia lingua" >Italiano</button>
<div class="dropdown-menu" id="menu_cambio_lingua">
<div class="link-list-wrapper">
<ul class="link-list">
<li><a class="list-item" href="#"><span>Italiano</span></a></li>
<li><a class="list-item" href="#"><span>English</span></a></li>
<li><a class="list-item" href="#"><span>Francais</span></a></li>
</ul>
</div>
</div>
</li>
</ul>
</div>
<ul>
<li>
<a href="#" aria-label="Facebook" target="_blank">
<svg role="img" aria-describedby="social_1" class="icon">
<title id="social_1">Facebook</title><use xlink:href="./dist/svg/sprite.svg#it-facebook"></use>
</svg>
</a>
</li>
<li>
<a href="#" aria-label="Twitter" target="_blank">
<svg role="img" aria-describedby="social_2" class="icon">
<title id="social_2">Twitter</title><use xlink:href="./dist/svg/sprite.svg#it-twitter"></use>
</svg>
</a>
</li>
<li>
<a href="#" aria-label="Instagram" target="_blank">
<svg role="img" aria-describedby="social_3" class="icon">
<title id="social_3">Instagram</title><use xlink:href="./dist/svg/sprite.svg#it-instagram"></use>
</svg>
</a>
</li>
<li>
<a href="#" aria-label="Instagram" target="_blank">
<svg role="img" aria-describedby="social_4" class="icon">
<title id="social_4">LinkedIn</title><use xlink:href="./dist/svg/sprite.svg#it-linkedin"></use>
</svg>
</a>
</li>
<li>
<a href="#" aria-label="Instagram" target="_blank">
<svg role="img" aria-describedby="social_5" class="icon">
<title id="social_5">Youtube</title><use xlink:href="./dist/svg/sprite.svg#it-youtube"></use>
</svg>
</a>
</li>
</ul>
</div>
<div id="SearchWrapper" class="it-search-wrapper mt-lg-2 mr-lg-0 mr-lg-1 d-none d-lg-flex">
<form name="searchForm" class="d-flex w-100" id="searchForm" action="#" method="post">
<label for="searchField" class="sr-only">Cerca</label>
<input role="searchbox" autocomplete="off" title="Cerca informazioni o persone" type="text" class="form-control" name="search" id="searchField" placeholder="Cerca informazioni o persone" aria-label="Cerca">
<button type="submit" id="searchButton" class="search-link rounded-icon" aria-label="Cerca">
<svg role="img" aria-describedby="titleCerca" class="icon negative">
<title id="titleCerca">Cerca</title><use xlink:href="./dist/svg/sprite.svg#it-search"></use>
</svg>
</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="it-header-navbar-wrapper">
<div class="container">
<div class="row">
<div class="col-12 ps-0 pe-0">
<!--start nav-->
<nav class="navbar navbar-expand-lg has-megamenu">
<div class="navbar-collapsable" id="nav02" style="display: none;">
<div class="menu-wrapper">
<ul class="navbar-nav">
<li class="nav-item" id="ateneo"><a class="nav-link" href="#"><span>Ateneo </span></a></li>
<li class="nav-item" id="didattica"><a class="nav-link" href="#"><span>Didattica</span></a></li>
<li class="nav-item" id="ricerca"><a class="nav-link" href="#"><span>Ricerca</span> <span class="visually-hidden">current</span></a></li>
<li class="nav-item" id="UniLavoro"><a class="nav-link" href="#"><span>Università e Lavoro</span></a></li>
<li class="nav-item dropdown" id="Internazionalita">
<a class="nav-link dropdown-toggle d-none d-lg-flex" href="#" aria-controls="menu_internazionalita" aria-expanded="false" >
<span>Internazionalità</span>
</a>
<button type="button" aria-expanded="false" aria-controls="menu_internazionalita" aria-label="Internazionalità" ><span class="d-flex d-lg-none">Internazionalità</span></button>
<div class="dropdown-menu" id="menu_internazionalita">
<div class="link-list-wrapper">
<ul class="link-list">
<li><a class="list-item" href="#"><span>Link list 1</span></a></li>
<li><a class="list-item" href="#"><span>Link list 2</span></a></li>
<li><a class="list-item" href="#"><span>Link list 3</span></a></li>
<li><a class="list-item" href="#"><span>Link list 4</span></a></li>
</ul>
</div>
</div>
</li>
<li class="nav-item dropdown megamenu" id="servizi">
<a class="nav-link dropdown-toggle d-none d-lg-flex" href="https://www.unito.it" aria-controls="menu_servizi" aria-expanded="false" >
<span>Servizi</span>
</a>
<button id="servizi2" type="button" aria-expanded="false" aria-controls="menu_servizi" aria-label="Servizi" ><span class="d-flex d-lg-none">Servizi</span></button>
<div class="dropdown-menu" id="menu_servizi">
<div class="row link-list-wrapper">
<div class="col-6 col-lg-4 ">
<div class="link-list-wrapper">
<ul class="link-list">
<li>
<h3 class="no_toc">Heading 1</h3>
</li>
<li><a class="list-item" href="#"><span>Link list 1</span></a></li>
<li><a class="list-item" href="#"><span>Link list 2</span></a></li>
<li><a class="list-item" href="#"><span>Link list 3</span></a></li>
</ul>
</div>
</div>
<div class="col-6 col-lg-4 ">
<div class="link-list-wrapper">
<ul class="link-list">
<li>
<h3 class="no_toc">Heading 2</h3>
</li>
<li><a class="list-item" href="#"><span>Link list 4</span></a></li>
<li><a class="list-item" href="#"><span>Link list 5</span></a></li>
<li><a class="list-item" href="#"><span>Link list 6</span></a></li>
</ul>
</div>
</div>
<div class="col-6 col-lg-4 ">
<div class="link-list-wrapper">
<ul class="link-list">
<li>
<h3 class="no_toc">Heading 3</h3>
</li>
<li><a class="list-item" href="#"><span>Link list 7</span></a></li>
<li><a class="list-item" href="#"><span>Link list 8</span></a></li>
<li><a class="list-item" href="#"><span>Link list 9</span></a></li>
</ul>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
Header Servizi semplici
Header minimale per i servizi online più semplici, con o senza autenticazione. Nei servizi semplici è essenziale la sola presenza del brand, senza navigazione. Per convenzione, entrambi i loghi (unito.it e sigillo) linkano alla Hompage del Portale.
Header Servizi semplici con bottone di login
<header class="interna internav3 pb-2 pt-2 ps-2 ps-lg-5 pe-2 pe-lg-5 m-auto flex-column">
<div class="col-12 text-right login pb-2">
<div class="container">
<a class="btn btn-primary btn-xs ms-2" href="#" title="Login" role="button">Login</a>
</div>
</div>
<div class="container p-0 d-flex align-items-center flex-row">
<div class="col-6 text-left">
<a href="#">
<img src="https://cdn.unito.it/unito-loghi/unitoit.svg" alt="Unito.it" width="136" height="30">
</a>
</div>
<div class="col-6 text-right">
<a href="#" class="d-inline-block">
<picture>
<source media="(min-width: 992px)" srcset="https://cdn.unito.it/unito-loghi/logo_sigillo.svg" height="120" width="80">
<img src="https://cdn.unito.it/unito-loghi/logo_sigillo_orizzontale.svg" alt="Università degli Studi di Torino" height="80" width="140" >
</picture>
</a>
</div>
</div>
</header>Header Servizi semplici con bottone di login e navigazione
<header class="interna internav3 pb-2 pt-2 ps-2 ps-lg-5 pe-2 pe-lg-5 m-auto flex-column">
<div class="col-12 text-right login pb-2">
<div class="container">
<a class="btn btn-primary btn-xs ms-2" href="#" title="Login" role="button">Login</a>
</div>
</div>
<div class="container p-0 d-flex align-items-center flex-row">
<div class="col-6 text-left">
<button class="d-block d-lg-none minimal-toggler navbar-toggle collapsed" type="button" aria-controls="navs1" aria-expanded="false" aria-label="Toggle navigation" data-bs-target="#navs1" data-bs-toggle="navbarcollapsible" data-focus-mouse="false">
<svg role="navigation" aria-describedby="my-title" class="icon">
<title id="my-title">my-title</title><use xlink:href="./dist/svg/sprite.svg#it-burger"></use>
</svg>
<span class="visually-hidden">Apri menù</span>
</button>
<a href="#">
<img src="https://cdn.unito.it/unito-loghi/unitoit.svg" alt="Unito.it" width="136" height="30">
</a>
</div>
<div class="col-6 text-right">
<a href="#" class="d-inline-block">
<picture>
<source media="(min-width: 992px)" srcset="https://cdn.unito.it/unito-loghi/logo_sigillo.svg" height="120" width="80">
<img src="https://cdn.unito.it/unito-loghi/logo_sigillo_orizzontale.svg" alt="Università degli Studi di Torino" height="80" width="140" >
</picture>
</a>
</div>
</div>
</header>
<div class="w-100 it-header-navbar-wrapper">
<div class="container">
<div class="row">
<div class="col-12 ps-0 pe-0">
<nav class="navbar navbar-expand-lg has-megamenu">
<div class="navbar-collapsable" id="navs1" aria-expanded="false">
<div class="menu-wrapper">
<ul class="navbar-nav pt-0">
<li class="nav-item" id="ateneo2"><a class="nav-link" href="#" data-focus-mouse="false"><span>Ateneo </span></a></li>
<li class="nav-item" id="didattica2"><a class="nav-link" href="#"><span>Didattica</span></a></li>
<li class="nav-item" id="ricerca2"><a class="nav-link" href="#"><span>Ricerca</span> <span class="visually-hidden">current</span></a></li>
<li class="nav-item" id="UniLavoro2"><a class="nav-link" href="#"><span>Università e Lavoro</span></a></li>
<li class="nav-item dropdown" id="Internazionalita">
<a class="nav-link dropdown-toggle d-none d-lg-flex" href="#" aria-controls="menu_internazionalita" aria-expanded="false" ><span>Internazionalità</span></a>
<button type="button" aria-expanded="false" aria-controls="menu_internazionalita" aria-label="Internazionalità" ><span class="d-flex d-lg-none">Internazionalità</span></button>
<div class="dropdown-menu" id="menu_internazionalita">
<div class="link-list-wrapper">
<ul class="link-list">
<li><a class="list-item" href="#" ><span>Link list 1</span></a></li>
<li><a class="list-item" href="#" ><span>Link list 2</span></a></li>
<li><a class="list-item" href="#" ><span>Link list 3</span></a></li>
<li><a class="list-item" href="#" ><span>Link list 4</span></a></li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>Header Servizi semplici con utente loggato
Nome Cognome | Tecnico Amministrativo
Logout
<header class="interna internav3 pb-2 pt-2 ps-2 ps-lg-5 pe-2 pe-lg-5 m-auto flex-column">
<div class="col-12 text-right login pb-2">
<div class="container">
<span>Nome Cognome | Tecnico Amministrativo <svg class="icon icon-sm"><use href="./dist/svg/sprite.svg#it-user-circle"></use></svg></span>
<a class="btn btn-primary btn-xs ms-2" href="#" title="Logout" role="button">Logout</a>
</div>
</div>
<div class="container p-0 d-flex align-items-center flex-row">
<div class="col-6 text-left">
<a href="#">
<img src="https://cdn.unito.it/unito-loghi/unitoit.svg" alt="Unito.it" width="136" height="30">
</a>
</div>
<div class="col-6 text-right">
<a href="#" class="d-inline-block">
<picture>
<source media="(min-width: 992px)" srcset="https://cdn.unito.it/unito-loghi/logo_sigillo.svg" height="120" width="80">
<img src="https://cdn.unito.it/unito-loghi/logo_sigillo_orizzontale.svg" alt="Università degli Studi di Torino" height="80" width="140" >
</picture>
</a>
</div>
</div>
</header>Header Servizi semplici con utente loggato e navigazione
Nome Cognome | Tecnico Amministrativo
Logout
<header class="interna internav3 pb-2 pt-2 ps-2 ps-lg-5 pe-2 pe-lg-5 m-auto flex-column">
<div class="col-12 text-right login pb-2">
<div class="container">
<span>Nome Cognome | Tecnico Amministrativo <svg class="icon icon-sm"><use href="./dist/svg/sprite.svg#it-user-circle"></use></svg></span>
<a class="btn btn-primary btn-xs ms-2" href="#" title="Logout" role="button">Logout</a>
</div>
</div>
<div class="container p-0 d-flex align-items-center flex-row">
<div class="col-6 text-left">
<button class="d-block d-lg-none minimal-toggler navbar-toggle collapsed" type="button" aria-controls="navs2" aria-expanded="false" aria-label="Toggle navigation" data-bs-target="#navs2" data-bs-toggle="navbarcollapsible" data-focus-mouse="false">
<svg role="navigation" aria-describedby="my-title" class="icon">
<title id="my-title">my-title</title><use xlink:href="./dist/svg/sprite.svg#it-burger"></use>
</svg>
<span class="visually-hidden">Apri menù</span>
</button>
<a href="#">
<img src="https://cdn.unito.it/unito-loghi/unitoit.svg" alt="Unito.it" width="136" height="30">
</a>
</div>
<div class="col-6 text-right">
<a href="#" class="d-inline-block">
<picture>
<source media="(min-width: 992px)" srcset="https://cdn.unito.it/unito-loghi/logo_sigillo.svg" height="120" width="80">
<img src="https://cdn.unito.it/unito-loghi/logo_sigillo_orizzontale.svg" alt="Università degli Studi di Torino" height="80" width="140" >
</picture>
</a>
</div>
</div>
</header>
<div class="w-100 it-header-navbar-wrapper">
<div class="container">
<div class="row">
<div class="col-12 ps-0 pe-0">
<nav class="navbar navbar-expand-lg has-megamenu">
<div class="navbar-collapsable" id="navs2" aria-expanded="false">
<div class="menu-wrapper">
<ul class="navbar-nav pt-0">
<li class="nav-item" id="ateneo2"><a class="nav-link" href="#" data-focus-mouse="false"><span>Ateneo </span></a></li>
<li class="nav-item" id="didattica2"><a class="nav-link" href="#"><span>Didattica</span></a></li>
<li class="nav-item" id="ricerca2"><a class="nav-link" href="#"><span>Ricerca</span> <span class="visually-hidden">current</span></a></li>
<li class="nav-item" id="UniLavoro2"><a class="nav-link" href="#"><span>Università e Lavoro</span></a></li>
<li class="nav-item dropdown" id="Internazionalita">
<a class="nav-link dropdown-toggle d-none d-lg-flex" href="#" aria-controls="menu_internazionalita1" aria-expanded="false" ><span>Internazionalità</span></a>
<button type="button" aria-expanded="false" aria-controls="menu_internazionalita1" aria-label="Internazionalità" ><span class="d-flex d-lg-none">Internazionalità</span></button>
<div class="dropdown-menu" id="menu_internazionalita1">
<div class="link-list-wrapper">
<ul class="link-list">
<li><a class="list-item" href="#" ><span>Link list 1</span></a></li>
<li><a class="list-item" href="#" ><span>Link list 2</span></a></li>
<li><a class="list-item" href="#" ><span>Link list 3</span></a></li>
<li><a class="list-item" href="#" ><span>Link list 4</span></a></li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>Header Minimale
Header minimale con bottone di login
<div class="it-header-center-wrapper minimal theme-light shadow container">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="it-header-center-content-wrapper">
<div class="left-header">
<div class="it-brand-wrapper">
<a href="#">
<img src="https://cdn.unito.it/unito-loghi/unitoit.svg" alt="Unito.it" class="img-fluid" style="max-width: 100px;" width="100" height="22">
</a>
</div>
</div>
<div class="it-right-zone">
<div class="it-access-top-wrapper">
<a class="btn btn-primary btn-sm" href="#">Accedi</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Header minimale con utente loggato
<div class="it-header-center-wrapper minimal theme-light shadow container">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="it-header-center-content-wrapper">
<div class="left-header">
<div class="it-brand-wrapper">
<a href="#">
<img src="https://cdn.unito.it/unito-loghi/unitoit.svg" alt="Unito.it" class="img-fluid" style="max-width: 100px;" width="100" height="22">
</a>
</div>
</div>
<div class="it-right-zone">
<div class="avatar-wrapper avatar-extra-text">
<div class="avatar size-sm">
<img src="https://randomuser.me/api/portraits/women/33.jpg" alt="Giulia Neri">
</div>
<div class="extra-text">
<h4><a href="#">Michela Dotti</a></h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Header Minimale con navigazione a comparsa
In questa variante, la navigazione del sito in uso per la header completa, viene visualizzata a comparsa.
<div class="it-header-center-wrapper minimal theme-light shadow container">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="it-header-center-content-wrapper">
<div class="left-header">
<div class="it-brand-wrapper">
<button class="minimal-toggler navbar-toggle collapsed" type="button" aria-controls="mnav03" aria-expanded="false" aria-label="Toggle navigation" data-bs-target="#mnav03" data-bs-toggle="navbarcollapsible" data-focus-mouse="false">
<svg role="navigation" aria-describedby="my-title" class="icon">
<title id="my-title">my-title</title><use xlink:href="./dist/svg/sprite.svg#it-burger"></use>
</svg>
<span class="visually-hidden">Apri menù</span>
</button>
<a href="#">
<img src="https://cdn.unito.it/unito-loghi/unitoit.svg" alt="Unito.it" class="img-fluid" style="max-width: 100px;" width="100" height="22">
</a>
</div>
</div>
<div class="it-right-zone">
<div class="it-access-top-wrapper">
<a class="btn btn-primary btn-sm" href="#">Accedi</a>
</div>
</div>
</div>
</div>
<div class="it-header-navbar-wrapper mt-lg-2">
<div class="container">
<div class="row">
<div class="col-12 ps-0 pe-0">
<nav class="navbar navbar-expand-lg has-megamenu">
<div class="navbar-collapsable" id="mnav03" aria-expanded="false">
<div class="menu-wrapper">
<ul class="navbar-nav">
<li class="nav-item" id="ateneo2"><a class="nav-link" href="#" data-focus-mouse="false"><span>Ateneo </span></a></li>
<li class="nav-item" id="didattica2"><a class="nav-link" href="#"><span>Didattica</span></a></li>
<li class="nav-item" id="ricerca2"><a class="nav-link" href="#"><span>Ricerca</span> <span class="visually-hidden">current</span></a></li>
<li class="nav-item" id="UniLavoro2"><a class="nav-link" href="#"><span>Università e Lavoro</span></a></li>
<li class="nav-item dropdown" id="Internazionalita">
<a class="nav-link dropdown-toggle d-none d-lg-flex" href="#" aria-controls="menu_internazionalita" aria-expanded="false" ><span>Internazionalità</span></a>
<button type="button" aria-expanded="false" aria-controls="menu_internazionalita" aria-label="Internazionalità" ><span class="d-flex d-lg-none">Internazionalità</span></button>
<div class="dropdown-menu" id="menu_internazionalita">
<div class="link-list-wrapper">
<ul class="link-list">
<li><a class="list-item" href="#" ><span>Link list 1</span></a></li>
<li><a class="list-item" href="#" ><span>Link list 2</span></a></li>
<li><a class="list-item" href="#" ><span>Link list 3</span></a></li>
<li><a class="list-item" href="#" ><span>Link list 4</span></a></li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
</div> Header minimale con navigazione sidebar
In questa variante, la navigazione viene veicolata introducendo in pagina un componente di navigazione Sidebar.
La comparsa del menù viene affidata a un bottone introdotto alla sinistra del logo, qualificato con l'attributo data-bs-toggle="collapse".
L'attributo data-bs-target conterrà invece la ID dell'elemeno sidebar di riferimento.
Nell'ambiente della documentazione, che già presenta una sua sidebar, non è possibile una sua visualizzazione, si veda la pagina di esempio e relativo codice html.
<div class="it-header-center-wrapper minimal theme-light shadow container">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="it-header-center-content-wrapper">
<div class="left-header">
<div class="it-brand-wrapper">
<button class="minimal-toggler navbar-toggle collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#id_sidebar" data-focus-mouse="false">
<svg class="icon"><use xlink:href="./dist/svg/sprite.svg#it-burger"></use></svg>
</button>
<a href="#">
<img src="https://cdn.unito.it/unito-loghi/unitoit.svg" alt="Unito.it" class="img-fluid" style="max-width: 100px;" width="100" height="22">
</a>
</div>
</div>
<div class="it-right-zone">
<div class="avatar-wrapper avatar-extra-text">
<div class="avatar size-sm">
<img src="https://randomuser.me/api/portraits/women/33.jpg" alt="Giulia Neri">
</div>
<div class="extra-text">
<h4><a href="#">Michela Dotti</a></h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>