Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: documentazione per footer #969

Merged
merged 2 commits into from
Oct 2, 2023
Merged

feat: documentazione per footer #969

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0baf636
Creazione documento per footer
Virtute90 Sep 28, 2023
d2add96
Merge branch 'main' into feat/add-footer-doc
Virtute90 Sep 28, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions _data/nav.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@
- title: Breadcrumbs
- title: Header # TODO Rewiew mobile version
- title: Megamenu # TODO Review mobile version
- title: Footer
- title: Navscroll
- title: Sidebar
- title: Skiplinks
Expand Down
229 changes: 229 additions & 0 deletions docs/menu-di-navigazione/footer.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,229 @@
---
layout: docs
title: Footer
description: Documentazione ed esempi per la creazione di piè di pagina di navigazione.
group: menu-di-navigazione
toc: true
---

## Introduzione
Il **footer** (in italiano piè di pagina) è una sezione che contiene tutte le informazioni inerenti al sito web e alla società che lo ha costruito. Per una PA potrebbe contenere tutte i riferimenti ai vari **servizi**, a varie **pagine utili** al cittadino, rifimenti alla **privacy**, all'**accessibilità** e a come **contattare** gli uffici.

Potrebbe anche contenere riferimenti alle pagine social dell'amministrazione.

## Footer completo
{% capture example %}
<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="#" class="" data-focus-mouse="false">
<svg class="icon">
<use xlink:href="{{site.baseurl}}/dist/svg/sprites.svg#it-code-circle"></use>
</svg>
<div class="it-brand-text">
<h2 class="no_toc">Lorem Ipsum</h2>
<h3 class="no_toc 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="{{site.baseurl}}/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="{{site.baseurl}}/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="{{site.baseurl}}/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="{{site.baseurl}}/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>
{% endcapture %}{% include example.html content=example %}

## Footer solo contatti
{% capture example %}
<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="#" class="" data-focus-mouse="false">
<svg class="icon">
<use xlink:href="{{site.baseurl}}/dist/svg/sprites.svg#it-code-circle"></use>
</svg>
<div class="it-brand-text">
<h2 class="no_toc">Lorem Ipsum</h2>
<h3 class="no_toc 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="{{site.baseurl}}/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="{{site.baseurl}}/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="{{site.baseurl}}/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="{{site.baseurl}}/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>
{% endcapture %}{% include example.html content=example %}