Skip to content

Commit c0ecb15

Browse files
Virtute90Virtute90
authored
chore(docs): add footer documentation
1 parent 8ac1243 commit c0ecb15

File tree

2 files changed

+230
-0
lines changed

2 files changed

+230
-0
lines changed

‎_data/nav.yml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@
4343
- title: Breadcrumbs
4444
- title: Header # TODO Rewiew mobile version
4545
- title: Megamenu # TODO Review mobile version
46+
- title: Footer
4647
- title: Navscroll
4748
- title: Sidebar
4849
- title: Skiplinks

‎docs/menu-di-navigazione/footer.md

Lines changed: 229 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,229 @@
1+
---
2+
layout: docs
3+
title: Footer
4+
description: Documentazione ed esempi per la creazione di piè di pagina di navigazione.
5+
group: menu-di-navigazione
6+
toc: true
7+
---
8+
9+
## Introduzione
10+
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.
11+
12+
Potrebbe anche contenere riferimenti alle pagine social dell'amministrazione.
13+
14+
## Footer completo
15+
{% capture example %}
16+
<footer class="it-footer">
17+
<div class="it-footer-main">
18+
<div class="container">
19+
<section>
20+
<div class="row clearfix">
21+
<div class="col-sm-12">
22+
<div class="it-brand-wrapper">
23+
<a href="#" class="" data-focus-mouse="false">
24+
<svg class="icon">
25+
<use xlink:href="{{site.baseurl}}/dist/svg/sprites.svg#it-code-circle"></use>
26+
</svg>
27+
<div class="it-brand-text">
28+
<h2 class="no_toc">Lorem Ipsum</h2>
29+
<h3 class="no_toc d-none d-md-block">Inserire qui la tag line</h3>
30+
</div>
31+
</a>
32+
</div>
33+
</div>
34+
</div>
35+
</section>
36+
<section>
37+
<div class="row">
38+
<div class="col-lg-3 col-md-3 col-sm-6 pb-2">
39+
<h4>
40+
<a href="#" title="Vai alla pagina: Amministrazione">Amministrazione</a>
41+
</h4>
42+
<div class="link-list-wrapper">
43+
<ul class="footer-list link-list clearfix">
44+
<li><a class="list-item" href="#" title="Vai alla pagina: Giunta e consiglio">Giunta e consiglio</a></li>
45+
<li><a class="list-item" href="#" title="Vai alla pagina: Aree di competenza">Aree di competenza</a></li>
46+
<li><a class="list-item" href="#" title="Vai alla pagina: Dipendenti">Dipendenti</a></li>
47+
<li><a class="list-item" href="#" title="Vai alla pagina: Luoghi">Luoghi</a></li>
48+
<li><a class="list-item" href="#" title="Vai alla pagina: Associazioni e società partecipate">Associazioni e società partecipate</a></li>
49+
</ul>
50+
</div>
51+
</div>
52+
<div class="col-lg-3 col-md-3 col-sm-6 pb-2">
53+
<h4>
54+
<a href="#" title="Vai alla pagina: Servizi">Servizi</a>
55+
</h4>
56+
<div class="link-list-wrapper">
57+
<ul class="footer-list link-list clearfix">
58+
<li><a class="list-item" href="#" title="Vai alla pagina: Pagamenti">Pagamenti</a></li>
59+
<li><a class="list-item" href="#" title="Vai alla pagina: Sostegno">Sostegno</a></li>
60+
<li><a class="list-item" href="#" title="Vai alla pagina: Domande e iscrizioni">Domande e iscrizioni</a></li>
61+
<li><a class="list-item" href="#" title="Vai alla pagina: Segnalazioni">Segnalazioni</a></li>
62+
<li><a class="list-item" href="#" title="Vai alla pagina: Autorizzazioni e concessioni">Autorizzazioni e concessioni</a></li>
63+
<li><a class="list-item" href="#" title="Vai alla pagina: Certificati e dichiarazioni">Certificati e dichiarazioni</a></li>
64+
</ul>
65+
</div>
66+
</div>
67+
<div class="col-lg-3 col-md-3 col-sm-6 pb-2">
68+
<h4>
69+
<a href="#" title="Vai alla pagina: Novità">Novità</a>
70+
</h4>
71+
<div class="link-list-wrapper">
72+
<ul class="footer-list link-list clearfix">
73+
<li><a class="list-item" href="#" title="Vai alla pagina: Notizie">Notizie</a></li>
74+
<li><a class="list-item" href="#" title="Vai alla pagina: Eventi">Eventi</a></li>
75+
<li><a class="list-item" href="#" title="Vai alla pagina: Comunicati stampa">Comunicati stampa</a></li>
76+
</ul>
77+
</div>
78+
</div>
79+
<div class="col-lg-3 col-md-3 col-sm-6">
80+
<h4>
81+
<a href="#" title="Vai alla pagina: Documenti">Documenti</a>
82+
</h4>
83+
<div class="link-list-wrapper">
84+
<ul class="footer-list link-list clearfix">
85+
<li><a class="list-item" href="#" title="Vai alla pagina: Progetti e attività">Progetti e attività</a></li>
86+
<li><a class="list-item" href="#" title="Vai alla pagina: Delibere, determine e ordinanze">Delibere, determine e ordinanze</a></li>
87+
<li><a class="list-item" href="#" title="Vai alla pagina: Bandi">Bandi</a></li>
88+
<li><a class="list-item" href="#" title="Vai alla pagina: Concorsi">Concorsi</a></li>
89+
<li><a class="list-item" href="#" title="Vai alla pagina: Albo pretorio">Albo pretorio</a></li>
90+
</ul>
91+
</div>
92+
</div>
93+
</div>
94+
</section>
95+
<section class="py-4 border-white border-top">
96+
<div class="row">
97+
<div class="col-lg-4 col-md-4 pb-2">
98+
<h4><a href="#" title="Vai alla pagina: Contatti">Contatti</a></h4>
99+
<p>
100+
<strong>Comune di Lorem Ipsum</strong><br>
101+
Via Roma 0 - 00000 Lorem Ipsum Codice fiscale / P. IVA: 000000000
102+
</p>
103+
<div class="link-list-wrapper">
104+
<ul class="footer-list link-list clearfix">
105+
<li><a class="list-item" href="#" title="Vai alla pagina: Posta Elettronica Certificata">Posta Elettronica Certificata</a></li>
106+
<li>
107+
<a class="list-item" href="#" title="Vai alla pagina: URP - Ufficio Relazioni con il Pubblico">URP - Ufficio Relazioni con il Pubblico</a>
108+
</li>
109+
</ul>
110+
</div>
111+
</div>
112+
<div class="col-lg-4 col-md-4 pb-2">
113+
<h4><a href="#" title="Vai alla pagina: Lorem Ipsum">Lorem Ipsum</a></h4>
114+
</div>
115+
<div class="col-lg-4 col-md-4 pb-2">
116+
<div class="pb-2">
117+
<h4><a href="#" title="Vai alla pagina: Seguici su">Seguici su</a></h4>
118+
<ul class="list-inline text-left social">
119+
<li class="list-inline-item">
120+
<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>
121+
</li>
122+
<li class="list-inline-item">
123+
<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>
124+
</li>
125+
<li class="list-inline-item">
126+
<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>
127+
</li>
128+
<li class="list-inline-item">
129+
<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>
130+
</li>
131+
</ul>
132+
</div>
133+
</div>
134+
</div>
135+
</section>
136+
</div>
137+
</div>
138+
<div class="it-footer-small-prints clearfix">
139+
<div class="container">
140+
<!-- <h3 class="visually-hidden">Sezione Link Utili</h3> -->
141+
<ul class="it-footer-small-prints-list list-inline mb-0 d-flex flex-column flex-md-row">
142+
<li class="list-inline-item"><a href="#" title="Note Legali">Media policy</a></li>
143+
<li class="list-inline-item"><a href="#" title="Note Legali">Note legali</a></li>
144+
<li class="list-inline-item"><a href="#" title="Privacy-Cookies">Privacy policy</a></li>
145+
<li class="list-inline-item"><a href="#" title="Mappa del sito">Mappa del sito</a></li>
146+
</ul>
147+
</div>
148+
</div>
149+
</footer>
150+
{% endcapture %}{% include example.html content=example %}
151+
152+
## Footer solo contatti
153+
{% capture example %}
154+
<footer class="it-footer">
155+
<div class="it-footer-main">
156+
<div class="container">
157+
<section>
158+
<div class="row clearfix">
159+
<div class="col-sm-12">
160+
<div class="it-brand-wrapper">
161+
<a href="#" class="" data-focus-mouse="false">
162+
<svg class="icon">
163+
<use xlink:href="{{site.baseurl}}/dist/svg/sprites.svg#it-code-circle"></use>
164+
</svg>
165+
<div class="it-brand-text">
166+
<h2 class="no_toc">Lorem Ipsum</h2>
167+
<h3 class="no_toc d-none d-md-block">Inserire qui la tag line</h3>
168+
</div>
169+
</a>
170+
</div>
171+
</div>
172+
</div>
173+
</section>
174+
<section class="py-4 border-white border-top">
175+
<div class="row">
176+
<div class="col-lg-4 col-md-4 pb-2">
177+
<h4><a href="#" title="Vai alla pagina: Contatti">Contatti</a></h4>
178+
<p>
179+
<strong>Comune di Lorem Ipsum</strong><br>
180+
Via Roma 0 - 00000 Lorem Ipsum Codice fiscale / P. IVA: 000000000
181+
</p>
182+
<div class="link-list-wrapper">
183+
<ul class="footer-list link-list clearfix">
184+
<li><a class="list-item" href="#" title="Vai alla pagina: Posta Elettronica Certificata">Posta Elettronica Certificata</a></li>
185+
<li>
186+
<a class="list-item" href="#" title="Vai alla pagina: URP - Ufficio Relazioni con il Pubblico">URP - Ufficio Relazioni con il Pubblico</a>
187+
</li>
188+
</ul>
189+
</div>
190+
</div>
191+
<div class="col-lg-4 col-md-4 pb-2">
192+
<h4><a href="#" title="Vai alla pagina: Lorem Ipsum">Lorem Ipsum</a></h4>
193+
</div>
194+
<div class="col-lg-4 col-md-4 pb-2">
195+
<div class="pb-2">
196+
<h4><a href="#" title="Vai alla pagina: Seguici su">Seguici su</a></h4>
197+
<ul class="list-inline text-left social">
198+
<li class="list-inline-item">
199+
<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>
200+
</li>
201+
<li class="list-inline-item">
202+
<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>
203+
</li>
204+
<li class="list-inline-item">
205+
<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>
206+
</li>
207+
<li class="list-inline-item">
208+
<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>
209+
</li>
210+
</ul>
211+
</div>
212+
</div>
213+
</div>
214+
</section>
215+
</div>
216+
</div>
217+
<div class="it-footer-small-prints clearfix">
218+
<div class="container">
219+
<!-- <h3 class="visually-hidden">Sezione Link Utili</h3> -->
220+
<ul class="it-footer-small-prints-list list-inline mb-0 d-flex flex-column flex-md-row">
221+
<li class="list-inline-item"><a href="#" title="Note Legali">Media policy</a></li>
222+
<li class="list-inline-item"><a href="#" title="Note Legali">Note legali</a></li>
223+
<li class="list-inline-item"><a href="#" title="Privacy-Cookies">Privacy policy</a></li>
224+
<li class="list-inline-item"><a href="#" title="Mappa del sito">Mappa del sito</a></li>
225+
</ul>
226+
</div>
227+
</div>
228+
</footer>
229+
{% endcapture %}{% include example.html content=example %}

0 commit comments

Comments
 (0)