4.71
Guida e istruzioni per la creazione dei piè di pagina di navigazione.
Introduzione Il footer (piè di pagina in italiano) rappresenta una sezione che racchiude tutte le informazioni relative al sito web e all’azienda o ente che lo ha sviluppato. Nel contesto di un’Amministrazione Pubblica, potrebbe includere riferimenti ai vari servizi offerti, link a pagine utili per i cittadini, indicazioni sulla privacy, sull’accessibilità e sui modi per contattare gli uffici.
Inoltre, potrebbe contemplare collegamenti alle pagine social dell’amministrazione.
<footer class=”it-footer”>
<div class=”it-footer-main”>
<div class=”container”>
<section>
<div class=”row clearfix”>
<div class=”col-sm-12″>
<div class=”it-brand-wrapper”>
<a href=”#” data-focus-mouse=”false”>
<svg class=”icon”>
<use xlink:href=”/bootstrap-italia/dist/svg/sprites.svg#it-code-circle”></use>
</svg>
<div class=”it-brand-text”>
<h2>Lorem Ipsum</h2>
<h3 class=”d-none d-md-block”>Inserire qui la tag line</h3>
</div>
</a>
</div>
</div>
</div>
</section>
<section>
<div class=”row”>
<div class=”col-lg-3 col-md-3 col-sm-6 pb-2″>
<h4>
<a href=”#” title=”Vai alla pagina: Amministrazione”>Amministrazione</a>
</h4>
<div class=”link-list-wrapper”>
<ul class=”footer-list link-list clearfix”>
<li><a class=”list-item” href=”#” title=”Vai alla pagina: Giunta e consiglio”>Giunta e consiglio</a></li>
<li><a class=”list-item” href=”#” title=”Vai alla pagina: Aree di competenza”>Aree di competenza</a></li>
<li><a class=”list-item” href=”#” title=”Vai alla pagina: Dipendenti”>Dipendenti</a></li>
<li><a class=”list-item” href=”#” title=”Vai alla pagina: Luoghi”>Luoghi</a></li>
<li><a class=”list-item” href=”#” title=”Vai alla pagina: Associazioni e società partecipate”>Associazioni e società partecipate</a></li>
</ul>
</div>
</div>
<div class=”col-lg-3 col-md-3 col-sm-6 pb-2″>
<h4>
<a href=”#” title=”Vai alla pagina: Servizi”>Servizi</a>
</h4>
<div class=”link-list-wrapper”>
<ul class=”footer-list link-list clearfix”>
<li><a class=”list-item” href=”#” title=”Vai alla pagina: Pagamenti”>Pagamenti</a></li>
<li><a class=”list-item” href=”#” title=”Vai alla pagina: Sostegno”>Sostegno</a></li>
<li><a class=”list-item” href=”#” title=”Vai alla pagina: Domande e iscrizioni”>Domande e iscrizioni</a></li>
<li><a class=”list-item” href=”#” title=”Vai alla pagina: Segnalazioni”>Segnalazioni</a></li>
<li><a class=”list-item” href=”#” title=”Vai alla pagina: Autorizzazioni e concessioni”>Autorizzazioni e concessioni</a></li>
<li><a class=”list-item” href=”#” title=”Vai alla pagina: Certificati e dichiarazioni”>Certificati e dichiarazioni</a></li>
</ul>
</div>
</div>
<div class=”col-lg-3 col-md-3 col-sm-6 pb-2″>
<h4>
<a href=”#” title=”Vai alla pagina: Novità”>Novità</a>
</h4>
<div class=”link-list-wrapper”>
<ul class=”footer-list link-list clearfix”>
<li><a class=”list-item” href=”#” title=”Vai alla pagina: Notizie”>Notizie</a></li>
<li><a class=”list-item” href=”#” title=”Vai alla pagina: Eventi”>Eventi</a></li>
<li><a class=”list-item” href=”#” title=”Vai alla pagina: Comunicati stampa”>Comunicati stampa</a></li>
</ul>
</div>
</div>
<div class=”col-lg-3 col-md-3 col-sm-6″>
<h4>
<a href=”#” title=”Vai alla pagina: Documenti”>Documenti</a>
</h4>
<div class=”link-list-wrapper”>
<ul class=”footer-list link-list clearfix”>
<li><a class=”list-item” href=”#” title=”Vai alla pagina: Progetti e attività”>Progetti e attività</a></li>
<li><a class=”list-item” href=”#” title=”Vai alla pagina: Delibere, determine e ordinanze”>Delibere, determine e ordinanze</a></li>
<li><a class=”list-item” href=”#” title=”Vai alla pagina: Bandi”>Bandi</a></li>
<li><a class=”list-item” href=”#” title=”Vai alla pagina: Concorsi”>Concorsi</a></li>
<li><a class=”list-item” href=”#” title=”Vai alla pagina: Albo pretorio”>Albo pretorio</a></li>
</ul>
</div>
</div>
</div>
</section>
<section class=”py-4 border-white border-top”>
<div class=”row”>
<div class=”col-lg-4 col-md-4 pb-2″>
<h4><a href=”#” title=”Vai alla pagina: Contatti”>Contatti</a></h4>
<p>
<strong>Comune di Lorem Ipsum</strong><br>
Via Roma 0 – 00000 Lorem Ipsum Codice fiscale / P. IVA: 000000000
</p>
<div class=”link-list-wrapper”>
<ul class=”footer-list link-list clearfix”>
<li><a class=”list-item” href=”#” title=”Vai alla pagina: Posta Elettronica Certificata”>Posta Elettronica Certificata</a></li>
<li>
<a class=”list-item” href=”#” title=”Vai alla pagina: URP – Ufficio Relazioni con il Pubblico”>URP – Ufficio Relazioni con il Pubblico</a>
</li>
</ul>
</div>
</div>
<div class=”col-lg-4 col-md-4 pb-2″>
<h4><a href=”#” title=”Vai alla pagina: Lorem Ipsum”>Lorem Ipsum</a></h4>
</div>
<div class=”col-lg-4 col-md-4 pb-2″>
<div class=”pb-2″>
<h4><a href=”#” title=”Vai alla pagina: Seguici su”>Seguici su</a></h4>
<ul class=”list-inline text-left social”>
<li class=”list-inline-item”>
<a class=”p-2 text-white” href=”#” target=”_blank”><svg class=”icon icon-sm icon-white align-top”><use xlink:href=”/bootstrap-italia/dist/svg/sprites.svg#it-designers-italia”></use></svg><span class=”visually-hidden”>Designers Italia</span></a>
</li>
<li class=”list-inline-item”>
<a class=”p-2 text-white” href=”#” target=”_blank”><svg class=”icon icon-sm icon-white align-top”><use xlink:href=”/bootstrap-italia/dist/svg/sprites.svg#it-twitter”></use></svg><span class=”visually-hidden”>Twitter</span></a>
</li>
<li class=”list-inline-item”>
<a class=”p-2 text-white” href=”#” target=”_blank”><svg class=”icon icon-sm icon-white align-top”><use xlink:href=”/bootstrap-italia/dist/svg/sprites.svg#it-medium”></use></svg><span class=”visually-hidden”>Medium</span></a>
</li>
<li class=”list-inline-item”>
<a class=”p-2 text-white” href=”#” target=”_blank”><svg class=”icon icon-sm icon-white align-top”><use xlink:href=”/bootstrap-italia/dist/svg/sprites.svg#it-behance”></use></svg><span class=”visually-hidden”>Behance</span></a>
</li>
</ul>
</div>
</div>
</div>
</section>
</div>
</div>
<div class=”it-footer-small-prints clearfix”>
<div class=”container”>
<!– <h3 class=”visually-hidden”>Sezione Link Utili</h3> –>
<ul class=”it-footer-small-prints-list list-inline mb-0 d-flex flex-column flex-md-row”>
<li class=”list-inline-item”><a href=”#” title=”Note Legali”>Media policy</a></li>
<li class=”list-inline-item”><a href=”#” title=”Note Legali”>Note legali</a></li>
<li class=”list-inline-item”><a href=”#” title=”Privacy-Cookies”>Privacy policy</a></li>
<li class=”list-inline-item”><a href=”#” title=”Mappa del sito”>Mappa del sito</a></li>
</ul>
</div>
</div>
</footer>
Footer solo Contatti
<footer class=”it-footer”>
<div class=”it-footer-main”>
<div class=”container”>
<section>
<div class=”row clearfix”>
<div class=”col-sm-12″>
<div class=”it-brand-wrapper”>
<a href=”#” data-focus-mouse=”false”>
<svg class=”icon”>
<use xlink:href=”/bootstrap-italia/dist/svg/sprites.svg#it-code-circle”></use>
</svg>
<div class=”it-brand-text”>
<h2>Lorem Ipsum</h2>
<h3 class=”d-none d-md-block”>Inserire qui la tag line</h3>
</div>
</a>
</div>
</div>
</div>
</section>
<section class=”py-4 border-white border-top”>
<div class=”row”>
<div class=”col-lg-4 col-md-4 pb-2″>
<h4><a href=”#” title=”Vai alla pagina: Contatti”>Contatti</a></h4>
<p>
<strong>Comune di Lorem Ipsum</strong><br>
Via Roma 0 – 00000 Lorem Ipsum Codice fiscale / P. IVA: 000000000
</p>
<div class=”link-list-wrapper”>
<ul class=”footer-list link-list clearfix”>
<li><a class=”list-item” href=”#” title=”Vai alla pagina: Posta Elettronica Certificata”>Posta Elettronica Certificata</a></li>
<li>
<a class=”list-item” href=”#” title=”Vai alla pagina: URP – Ufficio Relazioni con il Pubblico”>URP – Ufficio Relazioni con il Pubblico</a>
</li>
</ul>
</div>
</div>
<div class=”col-lg-4 col-md-4 pb-2″>
<h4><a href=”#” title=”Vai alla pagina: Lorem Ipsum”>Lorem Ipsum</a></h4>
</div>
<div class=”col-lg-4 col-md-4 pb-2″>
<div class=”pb-2″>
<h4><a href=”#” title=”Vai alla pagina: Seguici su”>Seguici su</a></h4>
<ul class=”list-inline text-left social”>
<li class=”list-inline-item”>
<a class=”p-2 text-white” href=”#” target=”_blank”><svg class=”icon icon-sm icon-white align-top”><use xlink:href=”/bootstrap-italia/dist/svg/sprites.svg#it-designers-italia”></use></svg><span class=”visually-hidden”>Designers Italia</span></a>
</li>
<li class=”list-inline-item”>
<a class=”p-2 text-white” href=”#” target=”_blank”><svg class=”icon icon-sm icon-white align-top”><use xlink:href=”/bootstrap-italia/dist/svg/sprites.svg#it-twitter”></use></svg><span class=”visually-hidden”>Twitter</span></a>
</li>
<li class=”list-inline-item”>
<a class=”p-2 text-white” href=”#” target=”_blank”><svg class=”icon icon-sm icon-white align-top”><use xlink:href=”/bootstrap-italia/dist/svg/sprites.svg#it-medium”></use></svg><span class=”visually-hidden”>Medium</span></a>
</li>
<li class=”list-inline-item”>
<a class=”p-2 text-white” href=”#” target=”_blank”><svg class=”icon icon-sm icon-white align-top”><use xlink:href=”/bootstrap-italia/dist/svg/sprites.svg#it-behance”></use></svg><span class=”visually-hidden”>Behance</span></a>
</li>
</ul>
</div>
</div>
</div>
</section>
</div>
</div>
<div class=”it-footer-small-prints clearfix”>
<div class=”container”>
<!– <h3 class=”visually-hidden”>Sezione Link Utili</h3> –>
<ul class=”it-footer-small-prints-list list-inline mb-0 d-flex flex-column flex-md-row”>
<li class=”list-inline-item”><a href=”#” title=”Note Legali”>Media policy</a></li>
<li class=”list-inline-item”><a href=”#” title=”Note Legali”>Note legali</a></li>
<li class=”list-inline-item”><a href=”#” title=”Privacy-Cookies”>Privacy policy</a></li>
<li class=”list-inline-item”><a href=”#” title=”Mappa del sito”>Mappa del sito</a></li>
</ul>
</div>
</div>
</footer>