Vai al contenuto principale

Bootstrap Italia

Il tema Bootstrap 5 per lo sviluppo di applicazioni web per la PA
Cerca nella documentazione

Footer

Footer

Documentazione ed esempi per la creazione di piè di pagina di navigazione.

Introduzione

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.

Nel footer completo sono presenti i seguenti elementi:

  • Logo dell’ente con nome e tagline;
  • Sezioni di primo livello e relative sotto-sezioni; il nome della sezione è un link che porta alla pagina principale della sezione;
  • Contatti dell’ente;
  • Link utili (Media policy, Note legali, Privacy policy, Mappa del sito);
  • Dichiarazione di accessibilità (link esterno su form AgID);
  • Profili Social dell’ente;
  • Iscrizione Newsletter (opzionale).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137

<footer class="it-footer">
  <div class="it-footer-main">
    <div class="container">
      <section class="pb-4">
        <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="/dist/svg/sprites.svg#it-code-circle"></use></svg>
                <div class="it-brand-text">
                  <h2>Nome Ente</h2>
                  <h3>Tagline</h3>
                </div>
              </a>
            </div>
          </div>
        </div>
      </section>
      <section class="pt-2">
        <div class="row">
          <div class="col-lg-3 col-sm-6 pb-3">
            <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="#">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>
          <div class="col-lg-3 col-sm-6 pb-3">
            <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="#">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>
          <div class="col-lg-3 col-sm-6 pb-3">
            <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="#">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>
          <div class="col-lg-3 col-sm-6 pb-3">
            <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="#">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>
        </div>
      </section>
      <section class="pt-4 border-white border-top">
        <div class="row">
          <div class="col-lg-4 col-md-4 mt-2">
            <h4>Contatti</h4>
            <p>
              <strong>Nome Ente</strong><br>
              Via Roma 0 - 00000 Città - Codice fiscale / P. IVA: 000000000
            </p>
            <div class="link-list-wrapper">
              <ul class="footer-list link-list clearfix">
                <li><a class="list-item" href="#">Posta Elettronica Certificata</a></li>
                <li>
                  <a class="list-item" href="#">URP - Ufficio Relazioni con il Pubblico</a>
                </li>
              </ul>
            </div>
          </div>
          <div class="col-lg-4 col-md-4 mt-2">
            <div class="pb-2">
              <h4>Seguici su</h4>
              <ul class="list-inline text-left social">
                <li class="list-inline-item">
                  <a class="p-2 text-white" href="#"><svg class="icon icon-sm icon-inverse align-top"><use xlink:href="/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="#"><svg class="icon icon-sm icon-inverse align-top"><use xlink:href="/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="#"><svg class="icon icon-sm icon-inverse align-top"><use xlink:href="/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="#"><svg class="icon icon-sm icon-inverse align-top"><use xlink:href="/dist/svg/sprites.svg#it-behance"></use></svg><span class="visually-hidden">Behance (link esterno)</span></a>
                </li>
              </ul>
            </div>
          </div>
          <div class="col-lg-4 col-md-4 mt-2">
            <h4>Newsletter</h4>
            <div class="form-group d-flex gap-1">
              <input type="text" class="form-control form-control-sm" id="exampleFormGroup1" placeholder="Inserisci la tua email" aria-label="Inserisci la tua email">
              <button type="submit" class="btn btn-primary">Iscriviti</button>
            </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="#">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>
</footer>

Il footer compatto è una versione semplificata del footer completo.

Contiene i contatti dell’ente, collegamenti ai profili social, form di iscrizione alla newsletter (se presente) e i link utili. Può essere utilizzato nei casi in cui non è necessario mostrare le sezioni di navigazione di primo livello.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78

<footer class="it-footer">
  <div class="it-footer-main">
    <div class="container">
      <section class="pb-4">
        <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="/dist/svg/sprites.svg#it-pa"></use></svg>
                <div class="it-brand-text">
                  <h2>Nome Ente</h2>
                  <h3>Tagline</h3>
                </div>
              </a>
            </div>
          </div>
        </div>
      </section>
      <section class="pt-4 border-white border-top">
        <div class="row">
          <div class="col-lg-4 col-md-4 mt-2">
            <h4>Contatti</h4>
            <p>
              <strong>Nome Ente</strong><br>
              Via Roma 0 - 00000 Città - Codice fiscale / P. IVA: 000000000
            </p>
            <div class="link-list-wrapper">
              <ul class="footer-list link-list clearfix">
                <li><a class="list-item" href="#">Posta Elettronica Certificata</a></li>
                <li>
                  <a class="list-item" href="#">URP - Ufficio Relazioni con il Pubblico</a>
                </li>
              </ul>
            </div>
          </div>
          <div class="col-lg-4 col-md-4 mt-2">
            <div class="pb-2">
              <h4>Seguici su</h4>
              <ul class="list-inline text-left social">
                <li class="list-inline-item">
                  <a class="p-2 text-white" href="#"><svg class="icon icon-sm icon-inverse align-top"><use xlink:href="/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="#"><svg class="icon icon-sm icon-inverse align-top"><use xlink:href="/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="#"><svg class="icon icon-sm icon-inverse align-top"><use xlink:href="/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="#"><svg class="icon icon-sm icon-inverse align-top"><use xlink:href="/dist/svg/sprites.svg#it-behance"></use></svg><span class="visually-hidden">Behance (link esterno)</span></a>
                </li>
              </ul>
            </div>
          </div>
          <div class="col-lg-4 col-md-4 mt-2">
            <h4>Newsletter</h4>
            <div class="form-group d-flex gap-1">
              <input type="text" class="form-control form-control-sm" id="exampleFormGroup2" placeholder="Inserisci la tua email" aria-label="Inserisci la tua email">
              <button type="submit" class="btn btn-primary">Iscriviti</button>
            </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="#">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>
</footer>

Properties

Variabile CSS Descrizione (Inglese) Predefinito
--bsi-footer-bottom-background Controls the bottom background for the footer, using color tokens. var(--bsi-color-background-primary-deep)
--bsi-footer-brand-icon-color Controls the brand icon color for the footer, using icon tokens. var(--bsi-icon-inverse)
--bsi-footer-brand-icon-size Controls the brand icon size for the footer. 3rem
--bsi-footer-top-background Controls the top background for the footer, using color tokens. var(--bsi-color-background-primary-muted)
--bsi-footer-brand-icon-size 56px 3.5rem

Breaking change

  • Per la <section> di branding dell’ente: aggiunta classe .pb-4.
  • Per la <section> che ospita sitemap o link: aggiunta classe .pt-2.
    • Per i <div> interni di questa seconda sezione è stato corretto il responsive: rimossa classe .col-md-3 e aggiunta la classe .pb-3.
  • Per la <section> che presenta dati dell’ente e contatti: cambiato da .py-4 a .pt-4.
    • Per i <div> interni di questa terza sezione sono state corrette le spaziature verticali: cambiato da .pb-2 a .mt-2
  • La classe che controlla il colore delle icone social ha cambiato nome: .icon-white diventa .icon-inverse.
  • Aggiunto il markup per mostrare il campo input per l’iscrizione alla newsletter.