Header
L’header è il primo incontro tra il portale e l’utente.
Qui troverai User
Interface, snippet e modalità di utilizzo per ogni tipologia di header presente nell’Ecosistema
digitale Turismo Cultura: generica, con login e area riservata.
<header class="dms-header">
<a href="http://www.regione.puglia.it/" class="widget-rp"
title="Vai al sito della Regione Puglia">
<i class="dms-wk-icon-logo-regione"></i>
</a>
<div class="dms-header--level-1">
<div class="top-header">
<div class="container">
<div
class="top-header--tematic-area d-flex flex-column flex-lg-row justify-content-lg-between justify-content-start">
<nav class="dms-breadcrumb white-clr--txt"
aria-label="breadcrumb">
<ul class="align-self-center">
<li><a href="https://www.regione.puglia.it"
target="_blank"
title="Vai al sito della Regione Puglia"
class="text-uppercase">Regione
Puglia</a></li>
<li><a href="https://www.regione.puglia.it/web/turismo-e-cultura"
target="_blank"
title="Vai al sito di Turismo e Cultura"
class="text-uppercase">Turismo e
Cultura</a></li>
<li class="text-uppercase active"
aria-current="page">dms Puglia</li>
</ul>
</nav>
<div class="text-right">
<a href="#"
class="dms-accessibility--zoom-font decrease"
title="diminuisci la grandezza del carattere">A-</a>
<a href="#"
class="dms-accessibility--zoom-font increase"
title="aumenta la grandezza del carattere">A+</a>
</div>
</div>
</div>
</div>
<div class="main-header">
<div class="container">
<div class="d-lg-flex justify-content-between">
<div class="main-header--logo mr-auto">
<a href="#" title="DMS Puglia Logo" accesskey="h">
<img src="assets/img/loghi/dms-logo.png"
alt="DMS Puglia Logo" class="img-fluid">
</a>
<div>
<span class="text-uppercase">Digital Management System</span>Turismo e cultura in Puglia
</div>
</div>
<div class="main-header--region-logo">
<a href="https://europa.eu/european-union/index_it" target="_blank" title="vai a Unione Europea">
<img src="assets/img/loghi/logo-ue.svg"
alt="Logo Unione Europea" class="img-fluid">
</a>
<a href="http://www.governo.it/" target="_blank" title="vai a Repubblica Italiana">
<img src="assets/img/loghi/logo-rep.svg"
alt="Logo Repubblica Italiana"
class="img-fluid">
</a>
<a href="https://por.regione.puglia.it/" target="_blank" title="vai a POR Regione Puglia">
<img src="assets/img/loghi/logo-puglia-fesr-fe.svg"
alt="Logo Puglia FESR-FE" class="img-fluid">
</a>
</div>
</div>
</div>
</div>
</div>
</header>
<header class="dms-header">
<a href="http://www.regione.puglia.it/" class="widget-rp"
title="Vai al sito della Regione Puglia">
<i class="dms-wk-icon-logo-regione"></i>
</a>
<div class="dms-header--level-1">
<div class="top-header">
<div class="container">
<div
class="top-header--tematic-area d-flex flex-column flex-lg-row justify-content-lg-between justify-content-start">
<nav class="dms-breadcrumb white-clr--txt"
aria-label="breadcrumb">
<ul class="align-self-center">
<li><a href="https://www.regione.puglia.it"
target="_blank"
title="Vai al sito della Regione Puglia"
class="text-uppercase">Regione
Puglia</a></li>
<li><a href="https://www.regione.puglia.it/web/turismo-e-cultura"
target="_blank"
title="Vai al sito di Turismo e Cultura"
class="text-uppercase">Turismo e
Cultura</a></li>
<li class="text-uppercase active"
aria-current="page">dms Puglia</li>
</ul>
</nav>
<div class="text-right">
<a href="#"
class="dms-accessibility--zoom-font decrease"
title="diminuisci la grandezza del carattere">A-</a>
<a href="#"
class="dms-accessibility--zoom-font increase"
title="aumenta la grandezza del carattere">A+</a>
</div>
</div>
</div>
</div>
<div class="main-header">
<div class="container">
<div class="d-lg-flex justify-content-between">
<div class="main-header--logo mr-auto">
<a href="#" title="DMS Puglia Logo" accesskey="h">
<img src="assets/img/loghi/dms-logo.png"
alt="DMS Puglia Logo" class="img-fluid">
</a>
<div>
<span class="text-uppercase">Digital Management System</span>Turismo e cultura in Puglia
</div>
</div>
<div class="main-header--region-logo">
<a href="https://europa.eu/european-union/index_it" target="_blank" title="vai a Unione Europea">
<img src="assets/img/loghi/logo-ue.svg"
alt="Logo Unione Europea" class="img-fluid">
</a>
<a href="http://www.governo.it/" target="_blank" title="vai a Repubblica Italiana">
<img src="assets/img/loghi/logo-rep.svg"
alt="Logo Repubblica Italiana"
class="img-fluid">
</a>
<a href="https://por.regione.puglia.it/" target="_blank" title="vai a POR Regione Puglia">
<img src="assets/img/loghi/logo-puglia-fesr-fe.svg"
alt="Logo Puglia FESR-FE" class="img-fluid">
</a>
</div>
</div>
</div>
</div>
</div>
<div class="dms-header--level-2">
<div class="container">
<nav class="dms-navbar d-flex align-items-center justify-content-end">
<div class="dms-header--nav--login">
<button
class="btn dms-btn dms-btn--primary dms-btn--icon">
<i class="dms-wk-icon-login"></i><span>Accedi</span></button>
</div>
</nav>
</div>
</div>
</header>
<header class="dms-header">
<a href="http://www.regione.puglia.it/" class="widget-rp"
title="Vai al sito della Regione Puglia">
<i class="dms-wk-icon-logo-regione"></i>
</a>
<div class="dms-header--level-1">
<div class="top-header">
<div class="container">
<div
class="top-header--tematic-area d-flex flex-column flex-lg-row justify-content-lg-between justify-content-start">
<nav class="dms-breadcrumb white-clr--txt"
aria-label="breadcrumb">
<ul class="align-self-center">
<li><a href="https://www.regione.puglia.it"
target="_blank"
title="Vai al sito della Regione Puglia"
class="text-uppercase">Regione
Puglia</a></li>
<li><a href="https://www.regione.puglia.it/web/turismo-e-cultura"
target="_blank"
title="Vai al sito di Turismo e Cultura"
class="text-uppercase">Turismo e
Cultura</a></li>
<li class="text-uppercase active"
aria-current="page">dms Puglia</li>
</ul>
</nav>
<div class="text-right">
<a href="#"
class="dms-accessibility--zoom-font decrease"
title="diminuisci la grandezza del carattere">A-</a>
<a href="#"
class="dms-accessibility--zoom-font increase"
title="aumenta la grandezza del carattere">A+</a>
</div>
</div>
</div>
</div>
<div class="main-header">
<div class="container">
<div class="d-lg-flex justify-content-between">
<div class="main-header--logo mr-auto">
<a href="#" title="DMS Puglia Logo" accesskey="h">
<img src="assets/img/loghi/dms-logo.png"
alt="DMS Puglia Logo" class="img-fluid">
</a>
<div>
<span class="text-uppercase">Digital Management System</span>Turismo e cultura in Puglia
</div>
</div>
<div class="main-header--region-logo">
<a href="https://europa.eu/european-union/index_it" title="vai a Unione Europea">
<img src="assets/img/loghi/logo-ue.svg"
alt="Logo Unione Europea" class="img-fluid">
</a>
<a href="http://www.governo.it/" title="vai a Repubblica Italiana">
<img src="assets/img/loghi/logo-rep.svg"
alt="Logo Repubblica Italiana"
class="img-fluid">
</a>
<a href="https://por.regione.puglia.it/" title="vai a POR Regione Puglia">
<img src="assets/img/loghi/logo-puglia-fesr-fe.svg"
alt="Logo Puglia FESR-FE" class="img-fluid">
</a>
</div>
</div>
</div>
</div>
</div>
<div class="dms-header--level-2">
<div class="container">
<nav class="dms-navbar d-flex align-items-center">
<a href="#" class="text-uppercase" title="Torna indietro">
<i class="dms-wk-icon-arrow-left"></i>
<span>torna indietro</span>
</a>
<a href="#" class="mr-5 ml-auto" title="Messaggi">
<i class="dms-wk-icon-email-2"></i>
<span>Messaggi</span>
</a>
<a href="#" title="Come fare per">
<i class="dms-wk-icon-faq"></i>
<span>Come fare per</span>
</a>
<div class="nav-separator"></div>
<a href="#" class="dms--user">
<i class="dms-wk-icon-user"></i>
<span>Mario Rossi</span>
</a>
<div class="dms-header--nav--login">
<button
class="btn dms-btn dms-btn--primary dms-btn--icon">
<i class="dms-wk-icon-logout"></i><span>Esci</span></button>
</div>
</nav>
</div>
</div>
</header>
<header class="dms-header">
<a href="http://www.regione.puglia.it/" class="widget-rp"
title="Vai al sito della Regione Puglia">
<i class="dms-wk-icon-logo-regione"></i>
</a>
<div class="dms-header--level-1">
<div class="top-header">
<div class="container">
<div
class="top-header--tematic-area d-flex flex-column flex-lg-row justify-content-lg-between justify-content-start">
<nav class="dms-breadcrumb white-clr--txt"
aria-label="breadcrumb">
<ul class="align-self-center">
<li><a href="https://www.regione.puglia.it"
target="_blank"
title="Vai al sito della Regione Puglia"
class="text-uppercase">Regione
Puglia</a></li>
<li><a href="https://www.regione.puglia.it/web/turismo-e-cultura"
target="_blank"
title="Vai al sito di Turismo e Cultura"
class="text-uppercase">Turismo e
Cultura</a></li>
<li class="text-uppercase active"
aria-current="page">dms Puglia</li>
</ul>
</nav>
<div class="text-right">
<a href="#"
class="dms-accessibility--zoom-font decrease"
title="diminuisci la grandezza del carattere">A-</a>
<a href="#"
class="dms-accessibility--zoom-font increase"
title="aumenta la grandezza del carattere">A+</a>
</div>
</div>
</div>
</div>
<div class="main-header">
<div class="container">
<div class="d-lg-flex justify-content-between">
<div class="main-header--logo mr-auto">
<a href="#" title="DMS Puglia Logo" accesskey="h">
<img src="assets/img/loghi/dms-logo.png"
alt="DMS Puglia Logo" class="img-fluid">
</a>
<div>
<span class="text-uppercase">Digital Management System</span>Turismo e cultura in Puglia
</div>
</div>
<div class="main-header--region-logo">
<a href="https://europa.eu/european-union/index_it" target="_blank" title="vai a Unione Europea">
<img src="assets/img/loghi/logo-ue.svg"
alt="Logo Unione Europea" class="img-fluid">
</a>
<a href="http://www.governo.it/" target="_blank" title="vai a Repubblica Italiana">
<img src="assets/img/loghi/logo-rep.svg"
alt="Logo Repubblica Italiana"
class="img-fluid">
</a>
<a href="https://por.regione.puglia.it/" target="_blank" title="vai a POR Regione Puglia">
<img src="assets/img/loghi/logo-puglia-fesr-fe.svg"
alt="Logo Puglia FESR-FE" class="img-fluid">
</a>
</div>
</div>
</div>
</div>
</div>
<div class="dms-header--level-2">
<div class="container">
<nav class="dms-navbar d-flex align-items-center">
<a href="#" class="text-uppercase" title="Torna indietro">
<i class="dms-wk-icon-arrow-left"></i>
<span>torna indietro</span>
</a>
<a href="#" class="mr-5 ml-auto" title="Messaggi">
<i class="dms-wk-icon-email-2"></i>
<span>Messaggi</span>
</a>
<a href="#" title="Come fare per">
<i class="dms-wk-icon-faq"></i>
<span>Come fare per</span>
</a>
<div class="nav-separator"></div>
<a href="#" class="dms--user">
<i class="dms-wk-icon-user"></i>
<span>Mario Rossi</span>
</a>
<div class="dms-header--nav--login">
<button
class="btn dms-btn dms-btn--primary dms-btn--icon">
<i class="dms-wk-icon-logout"></i><span>Esci</span>
</button>
</div>
</nav>
<div class="dms-menu">
<button type="button" class="open-menu justify-content-between align-items-center">
<span>MENU</span>
<i class="dms-wk-icon-hamburger"></i>
</button>
<nav class="dms-menu--navigation align-items-center d-md-flex flex-column flex-md-row">
<div class="close-menu-wrapper d-flex justify-content-end d-lg-none">
<button class="close-menu">
<i class="dms-wk-icon-close"></i>
</button>
</div>
<a href="#" class="active" title="Pagina principale">
<span class="text-uppercase">Pagina principale</span>
</a>
<div class="menu-separator"></div>
<a href="#" title="Pagina secondaria 1">
<i class="dms-wk-icon-ricevuta-spot"></i>
<span> Pagina secondaria 1</span>
</a>
<a href="#" title="Pagina secondaria 2">
<i class="dms-wk-icon-monitora-spot"></i>
<span>Pagina secondaria 2</span>
</a>
</nav>
</div>
</div>
</div>
</header>
Utilizzo
Il tag <header> ha tre varianti che differiscono l'una
dall'altra solamente per la
presenza del componente <nav> posto al di sotto del
main-header.
Per un corretto utilizzo dell'elemento, posizionare il componente subito
dopo l'apertura del tag <body>.