Skip to content

Commit

Permalink
feat: evolve component skiplinks
Browse files Browse the repository at this point in the history 
Co-authored-by: Andrea Stagi <stagi.andrea@gmail.com>
  • Loading branch information
@Fupete @astagi
Fupete and astagi authored Nov 4, 2024
1 parent be8ed50 commit 17230b2
Show file tree
Hide file tree
Showing 3 changed files with 102 additions and 59 deletions.
96 changes: 50 additions & 46 deletions docs/menu-di-navigazione/footer.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,9 @@ 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.
Il **footer** (in italiano piè di pagina o piede di pagina) è una sezione che contiene tutte le informazioni inerenti al sito web e alla società o organizzazione che rappresenta.

Per una Pubblica Amministrazione potrebbe contenere tutte i riferimenti ai vari **servizi**, a varie **pagine utili** alla cittadinanza, riferimenti alla **privacy**, il collegamento alla **Dichiarazione di accessibilità sul form AgID** e informazioni su come **contattare** l'amministrazione.

Potrebbe anche contenere riferimenti alle pagine social dell'amministrazione.

Expand Down Expand Up @@ -40,11 +42,11 @@ Potrebbe anche contenere riferimenti alle pagine social dell'amministrazione.
</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>
<li><a class="list-item" href="#">Giunta e consiglio</a></li>
<li><a class="list-item" href="#">Aree di competenza</a></li>
<li><a class="list-item" href="#">Dipendenti</a></li>
<li><a class="list-item" href="#">Luoghi</a></li>
<li><a class="list-item" href="#">Associazioni e società partecipate</a></li>
</ul>
</div>
</div>
Expand All @@ -54,12 +56,12 @@ Potrebbe anche contenere riferimenti alle pagine social dell'amministrazione.
</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>
<li><a class="list-item" href="#">Pagamenti</a></li>
<li><a class="list-item" href="#">Sostegno</a></li>
<li><a class="list-item" href="#">Domande e iscrizioni</a></li>
<li><a class="list-item" href="#">Segnalazioni</a></li>
<li><a class="list-item" href="#">Autorizzazioni e concessioni</a></li>
<li><a class="list-item" href="#">Certificati e dichiarazioni</a></li>
</ul>
</div>
</div>
Expand All @@ -69,9 +71,9 @@ Potrebbe anche contenere riferimenti alle pagine social dell'amministrazione.
</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>
<li><a class="list-item" href="#">Notizie</a></li>
<li><a class="list-item" href="#">Eventi</a></li>
<li><a class="list-item" href="#">Comunicati stampa</a></li>
</ul>
</div>
</div>
Expand All @@ -81,11 +83,11 @@ Potrebbe anche contenere riferimenti alle pagine social dell'amministrazione.
</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>
<li><a class="list-item" href="#">Progetti e attività</a></li>
<li><a class="list-item" href="#">Delibere, determine e ordinanze</a></li>
<li><a class="list-item" href="#">Bandi</a></li>
<li><a class="list-item" href="#">Concorsi</a></li>
<li><a class="list-item" href="#">Albo pretorio</a></li>
</ul>
</div>
</div>
Expand All @@ -94,38 +96,38 @@ Potrebbe anche contenere riferimenti alle pagine social dell'amministrazione.
<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>
<h4><a href="#">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="#">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>
<a class="list-item" href="#">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>
<h4><a href="#">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>
<h4><a href="#">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>
<a class="p-2 text-white" href="#"><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 (link esterno)</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>
<a class="p-2 text-white" href="#"><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">X (link esterno)</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>
<a class="p-2 text-white" href="#"><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 (link esterno)</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>
<a class="p-2 text-white" href="#"><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 (link esterno)</span></a>
</li>
</ul>
</div>
Expand All @@ -138,10 +140,11 @@ Potrebbe anche contenere riferimenti alle pagine social dell'amministrazione.
<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>
<li class="list-inline-item"><a href="#">Media policy</a></li>
<li class="list-inline-item"><a href="#">Note legali</a></li>
<li class="list-inline-item"><a href="#">Privacy policy</a></li>
<li class="list-inline-item"><a href="#">Mappa del sito</a></li>
<li class="list-inline-item"><a href="https://form.agid.gov.it/view/xyz">Dichiarazione di accessibilità <span class="visually-hidden">(link esterno su sito AgID)</span></a></li>
</ul>
</div>
</div>
Expand Down Expand Up @@ -172,38 +175,38 @@ Potrebbe anche contenere riferimenti alle pagine social dell'amministrazione.
<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>
<h4><a href="#">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="#">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>
<a class="list-item" href="#">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>
<h4><a href="#">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>
<h4><a href="#">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>
<a class="p-2 text-white" href="#"><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 (link esterno)</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>
<a class="p-2 text-white" href="#"><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">X (link esterno)</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>
<a class="p-2 text-white" href="#"><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 (link esterno)</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>
<a class="p-2 text-white" href="#"><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 (link esterno)</span></a>
</li>
</ul>
</div>
Expand All @@ -216,10 +219,11 @@ Potrebbe anche contenere riferimenti alle pagine social dell'amministrazione.
<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>
<li class="list-inline-item"><a href="#">Media policy</a></li>
<li class="list-inline-item"><a href="#">Note legali</a></li>
<li class="list-inline-item"><a href="#">Privacy policy</a></li>
<li class="list-inline-item"><a href="#">Mappa del sito</a></li>
<li class="list-inline-item"><a href="https://form.agid.gov.it/view/xyz">Dichiarazione di accessibilità <span class="visually-hidden">(link esterno su sito AgID)</span></a></li>
</ul>
</div>
</div>
Expand Down
Loading

0 comments on commit 17230b2

Please sign in to comment.