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

<div id="main">
    <div class="u-layout-wide u-layoutCenter u-layout-withGutter u-padding-r-bottom u-padding-r-top">
        <nav aria-label="sei qui:" role="navigation">
            <ul class="Breadcrumb">
                <li class="Breadcrumb-item"><a class="Breadcrumb-link u-color-50" href="/">Home</a></li>
                <li class="Breadcrumb-item"><a class="Breadcrumb-link u-color-50" href="/">pagina interna</a></li>
                <li class="Breadcrumb-item"><a class="Breadcrumb-link u-color-50" href="/">pagina interna</a></li>
                <li class="Breadcrumb-item"><a class="Breadcrumb-link u-color-50" href="#main">pagina corrente</a></li>
            </ul>
        </nav>

    </div>

    <section class="u-layout-wide u-layout-withGutter u-layoutCenter u-padding-r-top">
        <h1 class="u-text-h2">Home di sezione</h1>
        <div class="Grid Grid--withGutter">

            <div class="Grid-cell u-sm-size1of2 u-md-size1of2 u-lg-size1of3 u-padding-r-all">
                <div class="u-border-top-l u-color-70 u-text-r-l u-padding-r-bottom">
                    <h2 class="u-text-h3 u-padding-r-top">Area tematica</h2>
                    <p class="Prose u-padding-r-top u-padding-r-bottom">
                        Quis molestiae ullam et. Quia inventore sint qui. Fugiat et consequatur sapiente est cum suscipit alias aut. Saepe est porro amet qui amet ut. Dolor ut voluptatem voluptas quasi animi iste rem accusantium. Beatae iure veritatis voluptatem ut eum consequatur
                        et perferendis.
                        <ul class="Linklist Prose u-text-r-xs">
                            <li><a href="">earum rem culpa</a></li>
                            <li><a href="">numquam sit veniam</a></li>
                            <li><a href="">voluptatem quia cum</a></li>
                            <li><a href="">totam et amet</a></li>
                        </ul>
                    </p>
                </div>
            </div>

            <div class="Grid-cell u-sm-size1of2 u-md-size1of2 u-lg-size1of3 u-padding-r-all">
                <div class="u-border-top-l u-color-70 u-text-r-l u-padding-r-bottom">
                    <h2 class="u-text-h3 u-padding-r-top">Area tematica</h2>
                    <p class="Prose u-padding-r-top u-padding-r-bottom">
                        Mollitia laborum voluptas consequatur aliquid aut voluptatem. Sit nisi veritatis eius velit expedita deserunt. Distinctio iste quo eligendi error sint officiis. Ullam aut sit voluptatem. Quis est quaerat provident modi quo ut aspernatur.
                        <ul class="Linklist Prose u-text-r-xs">
                            <li><a href="">earum rem culpa</a></li>
                            <li><a href="">numquam sit veniam</a></li>
                            <li><a href="">voluptatem quia cum</a></li>
                            <li><a href="">totam et amet</a></li>
                        </ul>
                    </p>
                </div>
            </div>

            <div class="Grid-cell u-sm-size1of2 u-md-size1of2 u-lg-size1of3 u-padding-r-all">
                <div class="u-border-top-l u-color-70 u-text-r-l u-padding-r-bottom">
                    <h2 class="u-text-h3 u-padding-r-top">Area tematica</h2>
                    <p class="Prose u-padding-r-top u-padding-r-bottom">
                        Minus maxime qui saepe. Quis qui molestiae. Nisi mollitia quod qui mollitia perferendis asperiores dolorem sed dolorum. Quisquam laborum suscipit aut aut dicta nihil et illum. Quia voluptatem rem explicabo asperiores ea. Cupiditate reiciendis nulla minima
                        id expedita quia.
                        <ul class="Linklist Prose u-text-r-xs">
                            <li><a href="">earum rem culpa</a></li>
                            <li><a href="">numquam sit veniam</a></li>
                            <li><a href="">voluptatem quia cum</a></li>
                            <li><a href="">totam et amet</a></li>
                        </ul>
                    </p>
                </div>
            </div>

            <div class="Grid-cell u-sm-size1of2 u-md-size1of2 u-lg-size1of3 u-padding-r-all">
                <div class="u-border-top-l u-color-70 u-text-r-l u-padding-r-bottom">
                    <h2 class="u-text-h3 u-padding-r-top">Area tematica</h2>
                    <p class="Prose u-padding-r-top u-padding-r-bottom">
                        Quo assumenda magni repellat nostrum voluptatem quaerat dicta dolorum et. Iste hic natus et est. Et nam odio sapiente. Quod sit nihil unde eum doloremque.
                        <ul class="Linklist Prose u-text-r-xs">
                            <li><a href="">earum rem culpa</a></li>
                            <li><a href="">numquam sit veniam</a></li>
                            <li><a href="">voluptatem quia cum</a></li>
                            <li><a href="">totam et amet</a></li>
                        </ul>
                    </p>
                </div>
            </div>

            <div class="Grid-cell u-sm-size1of2 u-md-size1of2 u-lg-size1of3 u-padding-r-all">
                <div class="u-border-top-l u-color-70 u-text-r-l u-padding-r-bottom">
                    <h2 class="u-text-h3 u-padding-r-top">Area tematica</h2>
                    <p class="Prose u-padding-r-top u-padding-r-bottom">
                        Quo fugit eum est fugit dolores in quas. Molestiae a sit sequi eum distinctio ut. Quasi id quisquam est illum quia quasi aut. Voluptatum assumenda voluptates temporibus aut consequatur iste. Porro et quia nesciunt ducimus magnam nobis.
                        <ul class="Linklist Prose u-text-r-xs">
                            <li><a href="">earum rem culpa</a></li>
                            <li><a href="">numquam sit veniam</a></li>
                            <li><a href="">voluptatem quia cum</a></li>
                            <li><a href="">totam et amet</a></li>
                        </ul>
                    </p>
                </div>
            </div>

            <div class="Grid-cell u-sm-size1of2 u-md-size1of2 u-lg-size1of3 u-padding-r-all">
                <div class="u-border-top-l u-color-70 u-text-r-l u-padding-r-bottom">
                    <h2 class="u-text-h3 u-padding-r-top">Area tematica</h2>
                    <p class="Prose u-padding-r-top u-padding-r-bottom">
                        Consequatur facere earum quo commodi non pariatur et. Quibusdam qui est est accusamus. Nam est laudantium id neque. Autem tenetur dolorem. Vel mollitia harum nihil. Voluptatem perspiciatis in nihil aut est iusto.
                        <ul class="Linklist Prose u-text-r-xs">
                            <li><a href="">earum rem culpa</a></li>
                            <li><a href="">numquam sit veniam</a></li>
                            <li><a href="">voluptatem quia cum</a></li>
                            <li><a href="">totam et amet</a></li>
                        </ul>
                    </p>
                </div>
            </div>

            <div class="Grid-cell u-sm-size1of2 u-md-size1of2 u-lg-size1of3 u-padding-r-all">
                <div class="u-border-top-l u-color-70 u-text-r-l u-padding-r-bottom">
                    <h2 class="u-text-h3 u-padding-r-top">Area tematica</h2>
                    <p class="Prose u-padding-r-top u-padding-r-bottom">
                        Labore suscipit qui omnis at sed sed reiciendis. Laborum optio delectus voluptatem. Reprehenderit et tenetur nihil laborum a laborum itaque. Adipisci rerum est voluptas delectus maxime nihil fugiat commodi velit. Aut occaecati magnam ipsam odit ea. Asperiores
                        omnis asperiores distinctio nisi odio in reiciendis.
                        <ul class="Linklist Prose u-text-r-xs">
                            <li><a href="">earum rem culpa</a></li>
                            <li><a href="">numquam sit veniam</a></li>
                            <li><a href="">voluptatem quia cum</a></li>
                            <li><a href="">totam et amet</a></li>
                        </ul>
                    </p>
                </div>
            </div>

            <div class="Grid-cell u-sm-size1of2 u-md-size1of2 u-lg-size1of3 u-padding-r-all">
                <div class="u-border-top-l u-color-70 u-text-r-l u-padding-r-bottom">
                    <h2 class="u-text-h3 u-padding-r-top">Area tematica</h2>
                    <p class="Prose u-padding-r-top u-padding-r-bottom">
                        Sunt quas expedita dolore natus accusantium assumenda ut et et. Amet impedit fugit est inventore sunt iure voluptatum. Optio architecto aliquid eius.
                        <ul class="Linklist Prose u-text-r-xs">
                            <li><a href="">earum rem culpa</a></li>
                            <li><a href="">numquam sit veniam</a></li>
                            <li><a href="">voluptatem quia cum</a></li>
                            <li><a href="">totam et amet</a></li>
                        </ul>
                    </p>
                </div>
            </div>

        </div>
    </section>

    <div class="u-background-95 u-hiddenPrint">
        <div class="u-layout-wide u-layoutCenter u-layout-r-withGutter">
            <footer class="Footer u-background-95">

                <div class="u-cf">
                    <img class="Footer-logo" src="//placehold.it/75x80?text=placeholder" alt="">
                    <p class="Footer-siteName">
                        Nome della pubblica amministrazione
                    </p>
                </div>

                <div class="Grid Grid--withGutter">

                    <div class="Footer-block Grid-cell u-md-size1of4 u-lg-size1of4">
                        <h2 class="Footer-blockTitle">Argomento 1</h2>
                        <ul>
                            <li><a href="">numquam sit veniam</a></li>
                            <li><a href="">voluptatem quia cum</a></li>
                            <li><a href="">totam et amet</a></li>
                            <li><a href="">quo illo molestiae</a></li>
                        </ul>
                    </div>

                    <div class="Footer-block Grid-cell u-md-size1of4 u-lg-size1of4">
                        <h2 class="Footer-blockTitle">Argomento 2</h2>
                        <ul>
                            <li><a href="">numquam sit veniam</a></li>
                            <li><a href="">voluptatem quia cum</a></li>
                            <li><a href="">totam et amet</a></li>
                            <li><a href="">quo illo molestiae</a></li>
                        </ul>
                    </div>

                    <div class="Footer-block Grid-cell u-md-size1of4 u-lg-size1of4">
                        <h2 class="Footer-blockTitle">Argomento 3</h2>
                        <ul>
                            <li><a href="">numquam sit veniam</a></li>
                            <li><a href="">voluptatem quia cum</a></li>
                            <li><a href="">totam et amet</a></li>
                            <li><a href="">quo illo molestiae</a></li>
                        </ul>
                    </div>

                    <div class="Footer-block Grid-cell u-md-size1of4 u-lg-size1of4">
                        <h2 class="Footer-blockTitle">Argomento 4</h2>
                        <ul>
                            <li><a href="">numquam sit veniam</a></li>
                            <li><a href="">voluptatem quia cum</a></li>
                            <li><a href="">totam et amet</a></li>
                            <li><a href="">quo illo molestiae</a></li>
                        </ul>
                    </div>

                    <div class="Footer-block Grid-cell u-md-size1of4 u-lg-size1of4">
                        <h2 class="Footer-blockTitle">Contatti</h2>
                        <div class="Footer-subBlock">
                            <h3 class="Footer-subTitle">Recapiti</h3>
                            <address>
          Via earum rem culpa<br>
          earum rem culpa<br>
          Tel. (+00) 00.0000.0000
        </address>
                        </div>
                    </div>

                    <div class="Footer-block Grid-cell u-md-size1of4 u-lg-size1of4">
                        <h2 class="Footer-blockTitle">Contatti</h2>
                        <div class="Footer-subBlock">
                            <h3 class="Footer-subTitle">Recapiti</h3>
                            <address>
          Via numquam sit veniam<br>
          numquam sit veniam<br>
          Tel. (+00) 00.0000.0000
        </address>
                        </div>
                    </div>

                    <div class="Footer-block Grid-cell u-md-size1of4 u-lg-size1of4">
                        <h2 class="Footer-blockTitle">Contatti</h2>
                        <div class="Footer-subBlock">
                            <h3 class="Footer-subTitle">Indirizzo PEC</h3>
                            <p><a href="">indirizzo.pec@gov.it</a></p>
                        </div>
                    </div>

                    <div class="Footer-block Grid-cell u-md-size1of4 u-lg-size1of4">
                        <h2 class="Footer-blockTitle">Seguici su</h2>
                        <div class="Footer-subBlock">
                            <ul class="Footer-socialIcons">
                                <li><a href=""><span class="Icon Icon-facebook"></span><span class="u-hiddenVisually">Facebook</span></a></li>
                                <li><a href=""><span class="Icon Icon-twitter"></span><span class="u-hiddenVisually">Twitter</span></a></li>
                                <li><a href=""><span class="Icon Icon-youtube"></span><span class="u-hiddenVisually">Youtube</span></a></li>
                            </ul>
                        </div>
                    </div>

                </div>

                <ul class="Footer-links u-cf">
                    <li><a href="" title="Privacy policy">Privacy</a></li>
                    <li><a href="" title="Note legali">Note legali</a></li>
                    <li><a href="" title="Contatti">Contatti</a></li>
                    <li><a href="" title="nulla rerum magni">nulla rerum magni</a></li>
                    <li>earum rem culpa</li>
                </ul>

            </footer>

        </div>
    </div>

    <a href="#" title="torna all'inizio del contenuto" class="ScrollTop js-scrollTop js-scrollTo">
  <i class="ScrollTop-icon Icon-collapse" aria-hidden="true"></i>
  <span class="u-hiddenVisually">torna all'inizio del contenuto</span>
</a>

</div>