Unito.it

Tema Unito v 3 / 3.1

Footer

Documentazione per l'inserimento del foooter nel tema Unito

Footer

ultimo aggiornamento 11/10/24

Questa variante del footer è caratterizzata dalla presenza, in associazione al container principale, della classe .footerv2


            <footer class="footerv2">
        <div class="container-fluid d-flex align-items-start pt-5 pb-5 nav-links flex-wrap">
            <div class="col-12 col-md-4 col-lg-3 text-center brand">
                <div>
                <img class="m-auto mb-3" src="https://cdn.unito.it/unito-loghi/logo_sigillo.svg" alt="Università di Torino">
                <p class="info">
                    Via Verdi, 8 - 10124 Torino<br>
                    Centralino +39 011 6706111<br>
                    
P.I. 02099550010<br>
                    C.F. 80088230018
                </p>
                </div>
            </div>
            <div class="col-12 col-md-8 col-lg-9 d-flex flex-wrap ">
                <div id="link_block1" class="col-12 col-md-6 col-lg-3  mt-sm-0 mt-3  mt-md-0 mt-lg-0">
                    <ul>
                        <li><a href="#link_block1">Portale</a></li>
                        <li><a href="#" title="Lorem Ipsum" data-focus-mouse="false">Lorem ipsum</a></li>
                        <li><a href="#" title="Lorem Ipsum">Dolor sit amet</a></li>
                        <li><a href="#" title="Lorem Ipsum">Consectetur adipiscing</a></li>
                        <li><a href="#" title="Lorem Ipsum" data-focus-mouse="false">Lorem ipsum</a></li>
                        <li><a href="#" title="Lorem Ipsum">Dolor sit amet</a></li>
                        <li><a href="#" title="Lorem Ipsum">Consectetur adipiscing</a></li>
                        <li><a href="#" title="Lorem Ipsum" data-focus-mouse="false">Lorem ipsum</a></li>
                        <li><a href="#" title="Lorem Ipsum">Dolor sit amet</a></li>
                        <li><a href="#" title="Lorem Ipsum">Consectetur adipiscing</a></li>
                    </ul>
                </div>
                <div id="link_block2" class="col-12 col-md-6 col-lg-3  mt-sm-0 mt-2  mt-md-0 mt-lg-0">
                    <ul>
                        <li><a href="#link_block2" id="accordion2">Studenti</a></li>
                        <li><a href="#" title="Lorem Ipsum" data-focus-mouse="false">Lorem ipsum</a></li>
                        <li><a href="#" title="Lorem Ipsum">Dolor sit amet</a></li>
                        <li><a href="#" title="Lorem Ipsum">Consectetur adipiscing</a></li>
                        <li><a href="#" title="Lorem Ipsum" data-focus-mouse="false">Lorem ipsum</a></li>
                        <li><a href="#" title="Lorem Ipsum">Dolor sit amet</a></li>
                        <li><a href="#" title="Lorem Ipsum">Consectetur adipiscing</a></li>
                        <li><a href="#" title="Lorem Ipsum" data-focus-mouse="false">Lorem ipsum</a></li>
                        <li><a href="#" title="Lorem Ipsum">Dolor sit amet</a></li>
                        <li><a href="#" title="Lorem Ipsum">Consectetur adipiscing</a></li>
                    </ul>
                </div>
                <div id="link_block3" class="col-12 col-md-6 col-lg-3  mt-2 mt-sm-0 mt-md-4 mt-lg-0">
                    <ul>
                        <li><a href="#link_block3" id="accordion3">Amministrazione</a></li>
                        <li><a href="#" title="Lorem Ipsum" data-focus-mouse="false">Lorem ipsum</a></li>
                        <li><a href="#" title="Lorem Ipsum">Dolor sit amet</a></li>
                        <li><a href="#" title="Lorem Ipsum">Consectetur adipiscing</a></li>
                        <li><a href="#" title="Lorem Ipsum" data-focus-mouse="false">Emergenze - Contatti - PEC- URP</a></li>
                        <li><a href="#" title="Lorem Ipsum">Dolor sit amet</a></li>
                        <li><a href="#" title="Lorem Ipsum">Consectetur adipiscing</a></li>
                        <li><a href="#" title="Lorem Ipsum" data-focus-mouse="false">Lorem ipsum</a></li>
                        <li><a href="#" title="Lorem Ipsum">Dolor sit amet</a></li>
                        <li><a href="#" title="Lorem Ipsum">Consectetur adipiscing</a></li>
                    </ul>
                </div>
                <div id="link_block4" class="col-12col-md-6 col-lg-3  mt-2 mt-sm-0 mt-md-4 mt-lg-0">
                    <ul>
                        <li><a href="#link_block4" id="accordion4">Riferimenti</a></li>
                        <li><a href="#" title="Lorem Ipsum" data-focus-mouse="false">Lorem ipsum</a></li>
                        <li><a href="#" title="Lorem Ipsum">Dolor sit amet</a></li>
                        <li><a href="#" title="Lorem Ipsum">Consectetur adipiscing</a></li>
                        <li><a href="#" title="Lorem Ipsum" data-focus-mouse="false">Lorem ipsum</a></li>
                        <li><a href="#" title="Lorem Ipsum">Dolor sit amet</a></li>
                        <li><a href="#" title="Lorem Ipsum">Consectetur adipiscing</a></li>
                        <li><a href="#" title="Lorem Ipsum" data-focus-mouse="false">Lorem ipsum</a></li>
                        <li><a href="#" title="Lorem Ipsum">Dolor sit amet</a></li>
                        <li><a href="#" title="Lorem Ipsum">Consectetur adipiscing</a></li>
                    </ul>
                </div>
            </div>

        </div>

        <div class="col-12 sub-footer d-flex align-items-center flex-column flex-md-row ">
            <div class="col-12 col-md-2 col-lg-3 d-flex order-1 order-md-0 justify-content-center justify-content-md-start" >
                <a href="#" class="" data-focus-mouse="false">
                    <svg role="img" aria-describedby="my-title2" class="icon icon-sm">
                        <title id="my-title2">Meta</title>
                        <use xlink:href="./dist/svg/sprite.svg#it-facebook"></use></svg>
                </a>
                <a href="#">
                    <svg role="img" aria-describedby="my-title4" class="icon icon-sm">
                        <title id="my-title4">X</title>
                        <use xlink:href="./dist/svg/sprite.svg#it-twitter"></use>
                    </svg>
                </a>
                <a href="#">
                    <svg role="img" aria-describedby="my-title5" class="icon icon-sm">
                        <title id="my-title5">Instagram</title>
                        <use xlink:href="./dist/svg/sprite.svg#it-instagram"></use>
                    </svg>
                </a>
                <a href="#">
                    <svg role="img" aria-describedby="my-title3" class="icon icon-sm">
                        <title id="my-title3">LinkedIn</title>
                        <use xlink:href="./dist/svg/sprite.svg#it-linkedin"></use>
                    </svg>
                </a>
                <a href="#">
                    <svg role="img" aria-describedby="my-title3_1" class="icon icon-sm">
                        <title id="my-title3_1">App</title>
                        <use xlink:href="./dist/svg/sprite.svg#it-app"></use>
                    </svg>
                </a>
            </div>
            <div class="col-12 col-md-10 col-lg-9 d-flex legal-links">
                <a href="#" title="Note Legali">Note Legali</a>
                <a href="#" title="Privacy Policy">Privacy Policy</a>
                <a href="#" title="Cookie Policy">Cookie Policy</a>
                <a href="#" title="Amministrazione trasparente">Amministrazione Trasparente</a>
                <a href="#" title="Mappa del sito">Mappa del Sito</a>
            </div>
        </div>
</footer>

Footer Standard - Solo Versione 3

A questa variante del footer viene associata la classe .standard assieme a .it-footer

Opzionalmente è possibile utilizzare la classe .sticky assieme alle precedenti, se presente questa ha impatto sul posizionamento del footer.


            <footer class="it-footer standard">
                    <div class="it-footer-small-prints clearfix">
                        <div class="container">
                            <h3 class="sr-only">Sezione Link Utili</h3>
                            <div class="col-6 col-md-3 float-start">
                                <ul class="it-footer-small-prints-list list-inline mb-0 ">
                                    <li class="list-inline-item list-inline-title">Titolo</li>
                                    <li class="list-inline-item"><a href="#" title="Note Legali">Lorem ipsum</a></li>
                                    <li class="list-inline-item"><a href="#" title="Privacy-Cookies">Dolor sit amet</a></li>
                                    <li class="list-inline-item"><a href="#" title="Mappa del sito">Consectetur adipiscing</a></li>
                                </ul></div>
                            <div class="col-6 col-md-3 float-start">
                                <ul class="it-footer-small-prints-list list-inline mb-0 ">
                                    <li class="list-inline-item list-inline-title">Titolo</li>
                                    <li class="list-inline-item"><a href="#" title="Note Legali">Lorem ipsum</a></li>
                                    <li class="list-inline-item"><a href="#" title="Privacy-Cookies">Dolor sit amet</a></li>
                                    <li class="list-inline-item"><a href="#" title="Mappa del sito">Consectetur adipiscing</a></li>
                                </ul>
                            </div>
                            <div class="col-6 col-md-3 float-start">
                                <ul class="it-footer-small-prints-list list-inline mb-0 ">
                                    <li class="list-inline-item list-inline-title">Titolo</li>
                                    <li class="list-inline-item"><a href="#" title="Note Legali">Lorem ipsum</a></li>
                                    <li class="list-inline-item"><a href="#" title="Privacy-Cookies">Dolor sit amet</a></li>
                                    <li class="list-inline-item"><a href="#" title="Mappa del sito">Consectetur adipiscing</a></li>
                                </ul>
                            </div>
                            <div class="col-6 col-md-3 float-start">
                                <div class="footer-plain-text">
                                    <b>Università degli Studi di Torino</b><br>
                                    Via Verdi, 8 - 10124 Torino<br>
                                    <svg role="img" aria-describedby="my-title" class="icon icon-xs"><title id="my-title">Telefono</title><use xlink:href="./dist/svg/sprite.svg#it-telephone"></use></svg> +39 011 6706111<br>
                                    <svg role="img" aria-describedby="my-title1" class="icon icon-xs"><title id="my-title1">Email</title><use xlink:href="./dist/svg/sprite.svg#it-mail"></use></svg> lorem@ipsum.com<br>
                                    P.I. 02099550010<br>
                                    <div class="mt-2">
                                    <a href="#"><svg role="img" aria-describedby="my-title2" class="icon icon-xs"><title id="my-title2">Facebook</title><use xlink:href="./dist/svg/sprite.svg#it-facebook"></use></svg></a>
                                    <a href="#"><svg role="img" aria-describedby="my-title3" class="icon icon-xs"><title id="my-title3">LinkedIn</title><use xlink:href="./dist/svg/sprite.svg#it-linkedin"></use></svg></a>
                                    <a href="#"><svg role="img" aria-describedby="my-title4" class="icon icon-xs"><title id="my-title4">Twitter</title><use xlink:href="./dist/svg/sprite.svg#it-twitter"></use></svg></a>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </footer>

Footer minimale - Solo Versione 3

Per la variante minimale del footer, utilizzare la classe .minimal assieme a .it-footer

Opzionalmente è possibile utilizzare la classe .sticky assieme alle precedenti, se presente questa ha impatto sul posizionamento del footer.

Pagina di esempio con footer.minimal.sticky

Sezione Footer

Università degli Studi di Torino - Via Verdi, 8 - 10124 Torino
P.I. 02099550010 - C.F. 80088230018 - IBAN: IT07N0306909217100000046985 


            <footer class="it-footer minimal sticky">
                    <div class="it-footer-small-prints clearfix">
                        <div class="container">
                            <h3 class="sr-only">Sezione Footer</h3>
                            <div class="col-12 text-center">
                                <p>
                                Università degli Studi di Torino - Via Verdi, 8 - 10124 Torino<br>
                                <span class="fs-sclale08">P.I. 02099550010 - C.F. 80088230018 - IBAN: IT07N0306909217100000046985</span>
                                </p>
                             </div>
                        </div>
                    </div>
            </footer>

Posizionamento del footer - Solo Versione 3

Se viene assegnata al footer la classe .sticky assieme a .it-footer e una fra le classi .standard e .minimal il footer viene posizionato in modo fisso a piede, anche in caso di scarso contenuto all'interno della pagina.

Questo viene gestito dal css del tema come segue:

  • Al footer in versione minimal o standard viene assegnata una altezza fissa, espressa proporzionalmente all'altezza pagina in vh.
    Si noti che il footer minimal ha in ogni caso - quindi anche in assenza della classe .sticky - un'altezza fissa in quanto il contenuto del footer è definito a priori e di conseguenza la sua dimensione verticale.
  • Al container con classe .ContentContainer descritto in questa pagina viene assegnata un'altezza minima tale che la somma di questa e dell'altezza del footer sia equivalente a 100vh; i due elementi vanno così a riempire l'intero spazio disponibile verticale.
    L'altezza del container è definita da due classi, .StickyFooterMinimal e .StickyFooterStandard innestate dal tema via javascript se e solo se è associata al footer la classe .sticky risultando nei seguenti dimensionamenti rispetto ai breakpoint:

Selettore / elemento < Small
<576px 		Medium
≥768px 		≥ Large
≥992px
footer.minimal 9vh 7vh 12vh
.ContentContainer.StickyFooterMinimal 91vh 93vh 88vh
footer.standard.sticky 36vh 24vh 30vh
.ContentContainer.StickyFooterStandard 64vh 76vh 70vh

Nota sul footer standard sticky - Solo Versione 3

L'implementazione css del footer standard sticky è a titolo esemplificativo: la sua implementazione puntuale andrà rivista alla luce della definizione dei contenuti effettivamente presenti nel footer e la loro implementazione della responsività. Questo rende possibile definire l'altezza del footer ai diversi breakpoint e adattare di conseguenza il codice css.

Lo sviluppatore dovrà quindi sovrascrivere le altezze css degli elementi footer.standard.sticky e .ContentContainer.StickyFooterStandard per i diversi breakpoint come opportuno.

Torna su