Skip to main content

Bootstrap Italia

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

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.

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

<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="#" data-focus-mouse="false">
                <svg class="icon"><use xlink:href="/bootstrap-italia/dist/svg/sprites.svg#it-code-circle"></use></svg>
                <div class="it-brand-text">
                  <h2>Lorem Ipsum</h2>
                  <h3 class="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="#">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-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="#">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-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="#">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-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="#">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="py-4 border-white border-top">
        <div class="row">
          <div class="col-lg-4 col-md-4 pb-2">
            <h4>Contatti</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="#">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 pb-2">
            <h4>Lorem Ipsum</h4>
          </div>
          <div class="col-lg-4 col-md-4 pb-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-white align-top"><use xlink:href="/bootstrap-italia/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-white align-top"><use xlink:href="/bootstrap-italia/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-white align-top"><use xlink:href="/bootstrap-italia/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-white align-top"><use xlink:href="/bootstrap-italia/dist/svg/sprites.svg#it-behance"></use></svg><span class="visually-hidden">Behance (link esterno)</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="#">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>

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

<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="#" data-focus-mouse="false">
                <svg class="icon"><use xlink:href="/bootstrap-italia/dist/svg/sprites.svg#it-code-circle"></use></svg>
                <div class="it-brand-text">
                  <h2>Lorem Ipsum</h2>
                  <h3 class="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>Contatti</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="#">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 pb-2">
            <h4>Lorem Ipsum</h4>
          </div>
          <div class="col-lg-4 col-md-4 pb-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-white align-top"><use xlink:href="/bootstrap-italia/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-white align-top"><use xlink:href="/bootstrap-italia/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-white align-top"><use xlink:href="/bootstrap-italia/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-white align-top"><use xlink:href="/bootstrap-italia/dist/svg/sprites.svg#it-behance"></use></svg><span class="visually-hidden">Behance (link esterno)</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="#">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>