Web Toolkit

image/svg+xml GitHub

Page: Top 

<div id="cookie-bar" class="CookieBar js-CookieBar u-background-95 u-padding-r-all" aria-hidden="true">
    <p class="u-color-white u-text-r-xs u-lineHeight-m u-padding-r-bottom">Questo sito utilizza cookie tecnici, analytics e di terze parti.
        <br>Proseguendo nella navigazione accetti l’utilizzo dei cookie.<br>
    </p>
    <p>
        <button class="Button Button--default u-text-r-xxs js-cookieBarAccept u-inlineBlock u-margin-r-all">Accetto</button>
        <a href="" class="u-text-r-xs u-color-teal-50">Privacy policy</a>
    </p>
</div>

<ul class="Skiplinks js-fr-bypasslinks u-hiddenPrint">
    <li><a href="#main">Vai al Contenuto</a></li>
    <li><a class="js-fr-offcanvas-open" href="#menu" aria-controls="menu" aria-label="accedi al menu" title="accedi al menu">Vai alla navigazione del sito</a></li>
</ul>

<header class="Header Headroom--fixed js-Headroom u-hiddenPrint">

    <div class="Header-banner ">
        <div class="Header-owner Headroom-hideme ">
            <a href=""><span>Nome amministrazione afferente</span></a>
            <div class="Header-languages ">
                <a href="#languages" data-menu-trigger="languages" class="Header-language u-border-none u-zindex-max u-inlineBlock">
            <span class="u-hiddenVisually">lingua attiva:</span>
            <span class="">ITA</span>
            <!-- <span class="u-hidden u-md-inlineBlock u-lg-inlineBlock">Italiano</span> -->
            <span class="Icon Icon-expand u-padding-left-xs"></span>
          </a>
                <div id="languages" data-menu class="Dropdown-menu Header-language-other u-jsVisibilityHidden u-nojsDisplayNone">
                    <span class="Icon-drop-down Dropdown-arrow u-color-white"></span>
                    <ul>
                        <li><a href="#1" class="u-padding-r-all"><span lang="en">English</span></a></li>
                        <li><a href="#1" class="u-padding-r-all"><span lang="ar">عربي</span></a></li>
                        <li><a href="#2" class="u-padding-r-all"><span lang="ch">中文网</span></a></li>
                        <li><a href="#3" class="u-padding-r-all"><span lang="de">Deutsch</span></a></li>
                        <li><a href="#8" class="u-padding-r-all"><span lang="es">Español</span></a></li>
                        <li><a href="#4" class="u-padding-r-all"><span lang="fr">Français</span></a></li>
                        <li><a href="#5" class="u-padding-r-all"><span lang="ja">日本語</span></a></li>
                        <li><a href="#6" class="u-padding-r-all"><span lang="pt">Portuguese</span></a></li>
                        <li><a href="#7" class="u-padding-r-all"><span lang="ru">НА РУССКОМ</span></a></li>
                        <li><a href="#10" class="u-padding-r-all"><span lang="uk">УКРАЇНСЬКA</span></a></li>
                        <li><a href="#9" class="u-padding-r-all"><span lang="tr">TÜRKÇE</span></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="Header-navbar ">
        <div class="u-layout-wide Grid Grid--alignMiddle u-layoutCenter">
            <div class="Header-logo Grid-cell" aria-hidden="true">
                <a href="" tabindex="-1">
          <img src="//placehold.it/75x80" alt="">
        </a>
            </div>

            <div class="Header-title Grid-cell">
                <h1 class="Header-titleLink">
                    <a href="/">
            Nome della Pubblica Amministrazione<br>
            <small>eventuale sottotitolo</small>
          </a>
                </h1>
            </div>

            <div class="Header-searchTrigger Grid-cell">
                <button aria-controls="header-search" class="js-Header-search-trigger Icon Icon-search " title="attiva il form di ricerca" aria-label="attiva il form di ricerca" aria-hidden="false">
        </button>
                <button aria-controls="header-search" class="js-Header-search-trigger Icon Icon-close u-hidden " title="disattiva il form di ricerca" aria-label="disattiva il form di ricerca" aria-hidden="true">
        </button>
            </div>

            <div class="Header-utils Grid-cell">
                <div class="Header-social Headroom-hideme">
                    <p>Seguici su</p>
                    <ul class="Header-socialIcons">
                        <li><a href="" title="Facebook"><span class="Icon-facebook"></span><span class="u-hiddenVisually">Facebook</span></a></li>
                        <li><a href="" title="Twitter"><span class="Icon-twitter"></span><span class="u-hiddenVisually">Twitter</span></a></li>
                        <li><a href="" title="Youtube"><span class="Icon-youtube"></span><span class="u-hiddenVisually">Youtube</span></a></li>
                    </ul>
                </div>
                <div class="Header-search" id="header-search">
                    <form class="Form">
                        <div class="Form-field Form-field--withPlaceholder Grid u-background-white u-color-grey-30 u-borderRadius-s" role="search">
                            <input class="Form-input Form-input--ultraLean Grid-cell u-sizeFill u-text-r-s u-color-black u-text-r-xs u-borderRadius-s" required id="cerca">
                            <label class="Form-label u-color-grey-50 u-text-r-xxs" for="cerca">cerca nel sito</label>
                            <button class="Grid-cell u-sizeFit Icon-search Icon--rotated u-color-grey-50 u-padding-all-s u-textWeight-700" title="Avvia la ricerca" aria-label="Avvia la ricerca">
  </button>
                        </div>
                    </form>

                </div>
            </div>

            <div class="Header-toggle Grid-cell">
                <a class="Hamburger-toggleContainer js-fr-offcanvas-open u-nojsDisplayInlineBlock u-lg-hidden u-md-hidden" href="#menu" aria-controls="menu" aria-label="accedi al menu" title="accedi al menu">
          <span class="Hamburger-toggle" role="presentation"></span>
          <span class="Header-toggleText" role="presentation">Menu</span>
        </a>
            </div>

        </div>
    </div>
    <!-- Header-navbar -->

</header>

<section class="Offcanvas Offcanvas--right Offcanvas--modal js-fr-offcanvas u-jsVisibilityHidden u-nojsDisplayNone u-hiddenPrint" id="menu">
    <h2 class="u-hiddenVisually">Menu di navigazione</h2>
    <div class="Offcanvas-content u-background-white">
        <div class="Offcanvas-toggleContainer u-background-70 u-jsHidden">
            <a class="Hamburger-toggleContainer u-block u-color-white u-padding-bottom-xxl u-padding-left-s u-padding-top-xxl js-fr-offcanvas-close" aria-controls="menu" aria-label="esci dalla navigazione" title="esci dalla navigazione" href="#">
        <span class="Hamburger-toggle is-active" aria-hidden="true"></span>
      </a>
        </div>
        <nav>
            <ul class="Linklist Linklist--padded Treeview Treeview--default js-Treeview u-text-r-xs">
                <li><a href="https://example.com">Nulla rerum magni</a>
                    <ul>
                        <li><a href="https://example.com">Earum rem culpa</a></li>
                        <li><a href="https://example.com">Numquam sit veniam</a></li>
                        <li>
                            <a href="https://example.com">Voluptatem quia cum</a>
                            <ul>
                                <li><a href="https://example.com">Totam et amet</a></li>
                                <li><a href="https://example.com">Quo illo molestiae</a>
                                    <ul>
                                        <li><a href="https://example.com">Quo illo molestiae</a></li>
                                        <li><a href="https://example.com">Dolorum quod quia</a></li>
                                        <li><a href="https://example.com">Aliquid deleniti quae</a></li>
                                    </ul>
                                </li>
                                <li><a href="https://example.com">Aut illum aliquid</a></li>
                            </ul>
                        </li>
                        <li><a href="https://example.com">Consequatur eius molestiae</a></li>
                        <li><a href="https://example.com">Nulla rerum magni</a></li>
                    </ul>
                </li>
                <li><a href="https://example.com">Aut illum aliquid</a>
                    <ul>
                        <li><a href="https://example.com">Voluptatem quia cum</a></li>
                        <li><a href="https://example.com">Numquam sit veniam</a></li>
                        <li><a href="https://example.com">Earum rem culpa</a>
                            <ul>
                                <li><a href="https://example.com">Dolorum quod quia</a></li>
                                <li><a href="https://example.com">Quo illo molestiae</a></li>
                                <li><a href="https://example.com">Totam et amet</a></li>
                            </ul>
                        </li>
                        <li><a href="https://example.com">Aliquid deleniti quae</a></li>
                        <li><a href="https://example.com">Aut illum aliquid</a>
                            <ul>
                                <li><a href="https://example.com">Consequatur eius molestiae</a></li>
                                <li><a href="https://example.com">Earum rem culpa</a></li>
                                <li><a href="https://example.com">Numquam sit veniam</a></li>
                                <li><a href="https://example.com">Voluptatem quia cum</a></li>
                                <li><a href="https://example.com">Totam et amet</a></li>
                                <li><a href="https://example.com">Quo illo molestiae</a></li>
                                <li><a href="https://example.com">Dolorum quod quia</a></li>
                                <li><a href="https://example.com">Aliquid deleniti quae</a></li>
                                <li><a href="https://example.com">Aut illum aliquid</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li data-megamenu-class="u-hidden">
                    <a class="Button u-border-none u-color-95 u-background-compl u-text-r-xxs" href="#">Accedi</a>
                </li>
            </ul>

        </nav>
    </div>
</section>

There are no notes for this item.