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>.