<section>
    <p class="u-md-hidden u-lg-hidden u-padding-r-all u-text-m u-background-grey-20">
        <span class="Icon-list u-text-r-xl u-alignMiddle u-padding-r-right" aria-hidden="true"></span>
        <a href="#subnav" class="js-scrollTo u-text-r-s u-textClean u-color-grey-50 u-alignMiddle">
      Esplora contenuti correlati
    </a>
    </p>

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

    <div class="u-layout-wide u-layoutCenter u-layout-withGutter u-padding-r-top u-padding-bottom-xxl">

        <h1 class="u-text-h2">
            Nome del servizio
        </h1>

        <div class="Grid Grid--withGutter">
            <div class="Grid-cell u-md-size8of12 u-lg-size8of12">
                <article class="Prose u-layout-prose">
                    <p>
                        Una breve descrizione del servizio. Ex omnis rerum saepe quibusdam facilis rerum. Officiis perspiciatis est rerum harum consequatur et debitis molestiae illum. Aut omnis tenetur sed repellendus autem eos. Qui sed vitae aut explicabo et ad sit. Qui consequatur
                        sunt. Iusto ad officiis sunt.
                    </p>
                    <p>
                        Questo servizio serve per:
                    </p>
                    <ul>
                        <li>fare qualcosa</li>
                        <li>verificare lo stato della propria pratica</li>
                    </ul>
                    <h2 class="u-text-h3">A chi è rivolto</h2>
                    <p>
                        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.
                    </p>
                    <h2 class="u-text-h3">Come funziona</h2>
                    <p>
                        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.
                    </p>
                    <h2 class="u-text-h3">Prima di iniziare</h2>
                    <p>
                        Accertati di aver già...
                        <ul>
                            <li>azione 1</li>
                            <li>azione 2</li>
                            <li>azione 3</li>
                        </ul>
                    </p>
                    <p>
                        <button type="button" class="Button Button--default u-text-r-xs">Accedi al servizio</button>
                    </p>
                </article>
            </div>

            <aside class="Grid-cell u-md-size4of12 u-lg-size4of12">
                <div class="u-cf u-padding-bottom-xxl u-hidden u-md-block u-lg-block">
                    <button type="button" class="Button Button--default u-text-r-xs">Accedi al servizio</button>
                </div>
                <h3 class="u-text-h4">Altri servizi</h3>
                <div class="u-sizeFull" id="subnav">
                    <ul class="Linklist Linklist--padded u-layout-prose u-text-r-xs">
                        <li>
                            <a class="Linklist-link Linklist-link--lev1" href="">Tempore voluptatem ut aut.</a>
                        </li>
                        <li><a class="Linklist-link Linklist-link--lev2 is-expanded" href="">A architecto qui et veritatis.</a>
                            <ul>
                                <li><a href="" class="Linklist-link Linklist-link--lev3">Sequi quo rerum velit saepe.</a></li>
                                <li><a href="">Rerum est laborum quis distinctio.</a></li>
                                <li><a href="">Praesentium beatae totam iste atque sit quae.</a></li>
                                <li><a href="">Dolores et itaque voluptas quas laudantium molestias.</a></li>
                            </ul>
                        </li>
                        <li><a href="">Aut exercitationem magni minus eum temporibus.</a></li>
                        <li><a href="">Officiis dolores dolore.</a></li>
                        <li><a href="" class="Linklist-link is-collapsed">Iusto inventore asperiores deserunt eum est ut dolores.</a></li>
                        <li><a href="">Exercitationem quia deserunt sequi.</a></li>
                    </ul>

                </div>
                <a href="#" title="torna all'inizio del contenuto" class="u-hiddenVisually">torna all'inizio del contenuto</a>
            </aside>
        </div>

    </div>
</section>