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

Jump to bottom

feat: evolve component skiplinks #1249

Open
wants to merge 11 commits into
base: main
Choose a base branch
from
Open

feat: evolve component skiplinks #1249

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
b81d9fe
feat: evolve skiplinks
Fupete Oct 14, 2024
cb67723
fix: linting
Fupete Oct 14, 2024
5bddf12
chore: update docs
Fupete Oct 14, 2024
2b49029
content: update
Fupete Oct 15, 2024
c7cb699
content(fix): better footer component
Fupete Oct 15, 2024
196fb3b
content: update
Fupete Oct 15, 2024
ce313b7
content: update docs
Fupete Oct 15, 2024
ceaad52
content: update
Fupete Oct 15, 2024
f191696
content: update
Fupete Oct 15, 2024
5ad837f
content: update
Fupete Oct 15, 2024
fc5bbbf
Update docs/menu-di-navigazione/skiplinks.md
Fupete Oct 16, 2024
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
96 changes: 50 additions & 46 deletions docs/menu-di-navigazione/footer.md
View file
Open in desktop
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
Loading