Vai al contenuto principale

Bootstrap Italia

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

Liste

Liste

La lista è un componente flessibile per la visualizzazione di liste con testo, link o elementi correlati.

Tipologie di lista

Le liste, costituite da tag <ul> con classe .it-list all’interno di un wrapper con classe .it-list-wrapper, possono contenere testi, link, icone, avatar, immagini o una combinazione di questi elementi.

Lista semplice solo testo

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

<div class="it-list-wrapper">
  <ul class="it-list">
    <li>
      <div class="list-item">
        <div class="it-right-zone">
          <span class="text">Testo</span>
        </div>
      </div>
    </li>
    <li>
      <a href="#" class="list-item">
        <div class="it-right-zone">
          <span class="text">Link</span>
        </div>
      </a>
    </li>
    <li>
      <div class="list-item">
        <div class="it-right-zone">
          <span class="text">Testo</span>
        </div>
      </div>
    </li>
  </ul>
</div>

Lista con avatar

L’elemento .avatar precede l’elemento .it-right-zone che contiene il testo.

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

<div class="it-list-wrapper">
  <ul class="it-list">
    <li>
      <div class="list-item">
        <div class="avatar">
          <img src="https://randomuser.me/api/portraits/women/41.jpg" alt="Anna Barbieri">
        </div>
        <div class="it-right-zone">
          <span class="text">Testo</span>
        </div>
      </div>
    </li>
    <li>
      <a href="#" class="list-item">
        <div class="avatar">
          <img src="https://randomuser.me/api/portraits/women/41.jpg" alt="Anna Barbieri">
        </div>
        <div class="it-right-zone">
          <span class="text">Link</span>
        </div>
      </a>
    </li>
    <li>
      <div class="list-item">
        <div class="avatar">
          <img src="https://randomuser.me/api/portraits/women/41.jpg" alt="Anna Barbieri">
        </div>
        <div class="it-right-zone">
          <span class="text">Testo</span>
        </div>
      </div>
    </li>
  </ul>
</div>

Lista con icona

L’elemento .it-rounded-icon con all’interno la relativa icona, precede l’elemento .it-right-zone che contiene il testo.

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

<div class="it-list-wrapper">
  <ul class="it-list">
    <li>
      <div class="list-item">
        <div class="it-rounded-icon">
          <svg class="icon">
            <title>Cartella</title>
            <use href="/dist/svg/sprites.svg#it-folder"></use>
          </svg>
        </div>
        <div class="it-right-zone">
          <span class="text">Testo</span>
        </div>
      </div>
    </li>
    <li>
      <a href="#" class="list-item">
        <div class="it-rounded-icon">
          <svg class="icon">
            <title>Cartella</title>
            <use href="/dist/svg/sprites.svg#it-folder"></use>
          </svg>
        </div>
        <div class="it-right-zone">
          <span class="text">Link</span>
        </div>
      </a>
    </li>
    <li>
      <div class="list-item">
        <div class="it-rounded-icon">
          <svg class="icon">
            <title>Cartella</title>
            <use href="/dist/svg/sprites.svg#it-folder"></use>
          </svg>
        </div>
        <div class="it-right-zone">
          <span class="text">Testo</span>
        </div>
      </div>
    </li>
  </ul>
</div>

Lista con immagine

L’elemento .it-thumb con all’interno la relativa immagine, precede l’elemento .it-right-zone che contiene il testo. Ha una dimensione massima di 5rem che corrispondono a 80px. La proporzione dell’immagine può essere modificata utilizzando le classi specifiche per le proporzioni

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

<div class="it-list-wrapper">
  <ul class="it-list">
    <li>
      <div class="list-item">
        <div class="it-thumb ratio ratio-16x9">
          <img src="https://placehold.co/400x300.png?text=thumb" alt="descrizione immagine">
        </div>
        <div class="it-right-zone">
          <span class="text">Testo</span>
        </div>
      </div>
    </li>
    <li>
      <a href="#" class="list-item">
        <div class="it-thumb ratio ratio-4x3">
          <img src="https://placehold.co/400x300.png?text=thumb" alt="descrizione immagine">
        </div>
        <div class="it-right-zone">
          <span class="text">Link</span>
        </div>
      </a>
    </li>
    <li>
      <div class="list-item">
        <div class="it-thumb ratio ratio-1x1">
          <img src="https://placehold.co/400x300.png?text=thumb" alt="descrizione immagine">
        </div>
        <div class="it-right-zone">
          <span class="text">Testo</span>
        </div>
      </div>
    </li>
  </ul>
</div>

Lista con azioni

Le liste con azioni hanno al loro interno icone o elementi interattivi da associare ad azioni specifiche decise in base alle esigenze.

Con freccia

L’elemento .icon con all’interno la relativa icona segue l’elemento .text che contiene il testo.

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

<div class="it-list-wrapper">
  <ul class="it-list">
    <li>
      <a href="#" class="list-item">
        <div class="it-right-zone">
          <span class="text">Link</span>
          <svg class="icon icon-primary icon-sm">
            <title>Freccia destra</title>
            <use href="/dist/svg/sprites.svg#it-chevron-right"></use>
          </svg>
        </div>
      </a>
    </li>
    <li>
      <a href="#" class="list-item">
        <div class="it-right-zone">
          <span class="text">Link</span>
          <svg class="icon icon-primary icon-sm">
            <title>Freccia destra</title>
            <use href="/dist/svg/sprites.svg#it-chevron-right"></use>
          </svg>
        </div>
      </a>
    </li>
  </ul>
</div>

Con azioni multiple

L’elemento .it-multiple con all’interno le relative icone, segue l’elemento .text.

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

<div class="it-list-wrapper">
  <ul class="it-list">
    <li>
      <div class="list-item">
        <div class="it-right-zone">
          <span class="text">Testo</span>
          <span class="it-multiple">
            <a href="#" aria-label="Testo - Azione 1">
              <svg class="icon icon-primary">
                <title>Codice</title>
                <use href="/dist/svg/sprites.svg#it-code-circle"></use>
              </svg>
            </a>
            <a href="#" aria-label="Testo - Azione 2">
              <svg class="icon icon-primary">
                <title>Codice</title>
                <use href="/dist/svg/sprites.svg#it-code-circle"></use>
              </svg>
            </a>
            <a href="#" aria-label="Testo - Azione 3">
              <svg class="icon icon-primary">
                <title>Codice</title>
                <use href="/dist/svg/sprites.svg#it-code-circle"></use>
              </svg>
            </a>
          </span>
        </div>
      </div>
    </li>
    <li>
      <div class="list-item">
        <div class="it-right-zone">
          <a href="#">
            <span class="text">Link</span>
          </a>
          <span class="it-multiple">
            <a href="#" aria-label="Link - Azione 1">
              <svg class="icon icon-primary">
                <title>Codice</title>
                <use href="/dist/svg/sprites.svg#it-code-circle"></use>
              </svg>
            </a>
            <a href="#" aria-label="Link - Azione 2">
              <svg class="icon icon-primary">
                <title>Codice</title>
                <use href="/dist/svg/sprites.svg#it-code-circle"></use>
              </svg>
            </a>
            <a href="#" aria-label="Link - Azione 3">
              <svg class="icon icon-primary">
                <title>Codice</title>
                <use href="/dist/svg/sprites.svg#it-code-circle"></use>
              </svg>
            </a>
          </span>
        </div>
      </div>
    </li>
    <li>
      <div class="list-item" href="#">
        <div class="it-right-zone">
          <a href="#">
            <span class="text">Link</span>
          </a>
          <span class="it-multiple">
            <a href="#" aria-label="Link - Azione 1">
              <svg class="icon icon-primary">
                <title>Codice</title>
                <use href="/dist/svg/sprites.svg#it-code-circle"></use>
              </svg>
            </a>
            <a href="#" aria-label="Link - Azione 2">
              <svg class="icon icon-primary">
                <title>Codice</title>
                <use href="/dist/svg/sprites.svg#it-code-circle"></use>
              </svg>
            </a>
            <a href="#" aria-label="Link - Azione 3">
              <svg class="icon icon-primary">
                <title>Codice</title>
                <use href="/dist/svg/sprites.svg#it-code-circle"></use>
              </svg>
            </a>
          </span>
        </div>
      </div>
    </li>
  </ul>
</div>

Altre variazioni

Con metadata

Ad ogni lista si può aggiungere un campo testuale metadata, come nell’esempio seguente. L’elemento .metadata, segue l’elemento .text.

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

<div class="it-list-wrapper">
  <ul class="it-list">
    <li>
      <div class="list-item">
        <div class="avatar">
          <img src="https://randomuser.me/api/portraits/women/41.jpg" alt="Anna Barbieri">
        </div>
        <div class="it-right-zone">
          <span class="text">Testo</span>
          <span class="metadata">metadata testo</span>
        </div>
      </div>
    </li>
    <li>
      <div class="list-item">
        <div class="avatar">
          <img src="https://randomuser.me/api/portraits/women/41.jpg" alt="Anna Barbieri">
        </div>
        <div class="it-right-zone">
          <span class="text">Testo</span>
          <span class="metadata"><a href="#">metadata link</a></span>
        </div>
      </div>
    </li>
    <li>
      <a href="#" class="list-item">
        <div class="avatar">
          <img src="https://randomuser.me/api/portraits/women/41.jpg" alt="Anna Barbieri">
        </div>
        <div class="it-right-zone">
          <span class="text">Link</span>
          <span class="metadata">metadata testo</span>
        </div>
      </a>
    </li>
    <li>
      <div class="list-item">
        <div class="avatar">
          <img src="https://randomuser.me/api/portraits/women/41.jpg" alt="Anna Barbieri">
        </div>
        <div class="it-right-zone">
          <a href="#">
            <span class="text">Link</span>
          </a>
          <span class="metadata"><a href="#">metadata link</a></span>
        </div>
      </div>
    </li>
    <li>
      <a class="list-item" href="#">
        <div class="avatar">
          <img src="https://randomuser.me/api/portraits/women/41.jpg" alt="Anna Barbieri">
        </div>
        <div class="it-right-zone">
          <span class="text">Link</span>
          <span class="metadata">metadata testo</span>
        </div>
      </a>
    </li>
  </ul>
</div>

Con testo aggiuntivo, azioni multiple e metadata

Per avere una lista che permetta paragrafi di testo aggiuntivo per ogni elemento, bisogna utilizzare un approccio con titolo (heading) e paragrafo <p>, mantenendo la classe .text per l’elementi titolo. Entrambi devono essere inclusi in un elemento <div> per il corretto allineamento.

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

<div class="it-list-wrapper">
  <ul class="it-list">
    <li>
      <div class="list-item">
        <div class="it-right-zone">
          <div>
            <h4 class="text m-0">Testo</h4>
            <p class="small m-0">Lorem ipsum dolor sit amet.</p>
          </div>
          <span class="it-multiple">
            <span class="metadata">metadata testo</span>
            <a href="#" aria-label="Testo - Azione 1">
              <svg class="icon icon-primary">
                <title>Codice</title>
                <use href="/dist/svg/sprites.svg#it-code-circle"></use>
              </svg>
            </a>
            <a href="#" aria-label="Testo - Azione 2">
              <svg class="icon icon-primary">
                <title>Codice</title>
                <use href="/dist/svg/sprites.svg#it-code-circle"></use>
              </svg>
            </a>
            <a href="#" aria-label="Testo - Azione 3">
              <svg class="icon icon-primary">
                <title>Codice</title>
                <use href="/dist/svg/sprites.svg#it-code-circle"></use>
              </svg>
            </a>
          </span>
        </div>
      </div>
    </li>
    <li>
      <div  class="list-item">
        <div class="it-right-zone">
          <div>
            <h4 class="text m-0">Testo</h4>
            <p class="small m-0">Lorem ipsum dolor sit amet.</p>
          </div>
          <span class="it-multiple">
            <span class="metadata"><a href="#">metadata link</a></span>
            <a href="#" aria-label="Testo 2 - Azione 1">
              <svg class="icon icon-primary">
                <title>Codice</title>
                <use href="/dist/svg/sprites.svg#it-code-circle"></use>
              </svg>
            </a>
            <a href="#" aria-label="Testo 2 - Azione 2">
              <svg class="icon icon-primary">
                <title>Codice</title>
                <use href="/dist/svg/sprites.svg#it-code-circle"></use>
              </svg>
            </a>
            <a href="#" aria-label="Testo 2 - Azione 3">
              <svg class="icon icon-primary">
                <title>Codice</title>
                <use href="/dist/svg/sprites.svg#it-code-circle"></use>
              </svg>
            </a>
          </span>
        </div>
      </div>
    </li>
    <li>
      <div  class="list-item">
        <div class="it-right-zone">
          <div>
            <h4 class="text m-0"><a href="#">Link</a></h4>
            <p class="small m-0">Lorem ipsum dolor sit amet.</p>
          </div>
          <span class="it-multiple">
            <span class="metadata"><a href="#">metadata link</a></span>
            <a href="#" aria-label="Link - Azione 1">
              <svg class="icon icon-primary">
                <title>Codice</title>
                <use href="/dist/svg/sprites.svg#it-code-circle"></use>
              </svg>
            </a>
            <a href="#" aria-label="Link - Azione 2">
              <svg class="icon icon-primary">
                <title>Codice</title>
                <use href="/dist/svg/sprites.svg#it-code-circle"></use>
              </svg>
            </a>
            <a href="#" aria-label="Link - Azione 3">
              <svg class="icon icon-primary">
                <title>Codice</title>
                <use href="/dist/svg/sprites.svg#it-code-circle"></use>
              </svg>
            </a>
          </span>
        </div>
      </div>
    </li>
    <li>
      <div class="list-item">
        <div class="it-right-zone">
          <div>
            <h4 class="text m-0"><a href="#">Link</a></h4>
            <p class="small m-0">Lorem ipsum dolor sit amet.</p>
          </div>
          <span class="it-multiple">
            <span class="metadata">metadata testo</span>
            <a href="#" aria-label="Link - Azione 1">
              <svg class="icon icon-primary">
                <title>Codice</title>
                <use href="/dist/svg/sprites.svg#it-code-circle"></use>
              </svg>
            </a>
            <a href="#" aria-label="Link - Azione 2">
              <svg class="icon icon-primary">
                <title>Codice</title>
                <use href="/dist/svg/sprites.svg#it-code-circle"></use>
              </svg>
            </a>
            <a href="#" aria-label="Link - Azione 3">
              <svg class="icon icon-primary">
                <title>Codice</title>
                <use href="/dist/svg/sprites.svg#it-code-circle"></use>
              </svg>
            </a>
          </span>
        </div>
      </div>
    </li>
  </ul>
</div>

Liste per menu di navigazione

Le liste per menu di navigazione, costituite da tag <ul> con classe .link-list all’interno di un wrapper con classe .link-list-wrapper, vengono utilizzate per creare le voci dei menu Dropdown, Megamenu, Sidebar e Navscroll.

Linea singola

1
2
3
4
5
6
7
8
9
10
11
12
13

<div class="link-list-wrapper">
  <ul class="link-list">
    <li>
      <a class="list-item" href="#"><span>Link lista 1</span></a>
    </li>
    <li>
      <a class="list-item" href="#"><span>Link lista 2</span></a>
    </li>
   <li>
      <a class="list-item" href="#"><span>Link lista 3</span></a>
    </li>
  </ul>
</div>

Elemento con stato attivo

Per rendere attivo un elemento è sufficiente aggiungere la classe .active al relativo link.

1
2
3
4
5
6
7
8
9
10
11
12
13

<div class="link-list-wrapper">
  <ul class="link-list">
    <li>
      <a class="list-item" href="#"><span>Link lista 1</span></a>
    </li>
    <li>
      <a class="list-item active" href="#"><span>Link lista 2 attivo</span></a>
    </li>
    <li>
      <a class="list-item" href="#"><span>Link lista 3</span></a>
    </li>
  </ul>
</div>

Elemento con stato disabilitato

Per disabilitare un elemento è sufficiente aggiungere la classe .disabled al relativo link.

1
2
3
4
5
6
7
8
9
10
11
12
13

<div class="link-list-wrapper">
  <ul class="link-list">
    <li>
      <a class="list-item" href="#"><span>Link lista 1</span></a>
    </li>
    <li>
      <a class="list-item disabled" href="#" aria-disabled="true"><span>Link lista 2 disabilitato</span></a>
    </li>
    <li>
      <a class="list-item" href="#"><span>Link lista 3</span></a>
    </li>
  </ul>
</div>

Intestazione e divisore

Le liste di link possono avere un’intestazione (con o senza link) e/o divisori per separare gruppi di link.

L’intestazione è costituita dall’elemento .link-list-heading che precede il tag <ul>.
Il divisore è costituito dal tag <span> con classe .divider e attributo role="separator" all’interno del tag <li>.

Intestazione senza link

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<div class="link-list-wrapper">
  <h4 class="link-list-heading">Intestazione senza link</h4>
  <ul class="link-list">
    <li>
      <a class="list-item" href="#"><span>Link lista 1</span></a>
    </li>
    <li>
      <a class="list-item" href="#"><span>Link lista 2</span></a>
    </li>
    <li>
      <a class="list-item" href="#"><span>Link lista 3</span></a>
    </li>
    <li>
      <span class="divider" role="separator"></span>
    </li>
    <li>
      <a class="list-item" href="#"><span>Link lista 4</span></a>
    </li>
  </ul>
</div>

Intestazione con link

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<div class="link-list-wrapper">
  <h4 class="link-list-heading"><a href="#">Intestazione con link</a></h4>
  <ul class="link-list">
    <li>
      <a class="list-item" href="#"><span>Link lista 1</span></a>
    </li>
    <li>
      <a class="list-item" href="#"><span>Link lista 2</span></a>
    </li>
    <li>
      <a class="list-item" href="#"><span>Link lista 3</span></a>
    </li>
    <li>
      <span class="divider" role="separator"></span>
    </li>
    <li>
      <a class="list-item" href="#"><span>Link lista 4</span></a>
    </li>
  </ul>
</div>

Dimensioni

Per ogni elemento di una lista di link è possibile definire una variante di dimensione maggiore utilizzando la classe .large applicata al tag <a>.

Intestazione

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<div class="link-list-wrapper">
  <h4 class="link-list-heading">Intestazione</h4>
  <ul class="link-list">
    <li>
      <a class="list-item large" href="#"><span>Link lista 1</span></a>
    </li>
    <li>
      <a class="list-item large" href="#"><span>Link lista 2</span></a>
    </li>
    <li>
      <a class="list-item large" href="#"><span>Link lista 3</span></a>
    </li>
    <li>
      <span class="divider" role="separator"></span>
    </li>
    <li>
      <a class="list-item large" href="#"><span>Link lista 4</span></a>
    </li>
  </ul>
</div>

Multiline con icona

Ogni elemento di una lista di link può avere un’icona (a destra o sinistra del testo) ed un abstract.

Per includere un’icona bisogna aggiungere al tag <a> una delle seguenti classi:

  • icon-right: se si vuole posizionare l’icona a destra del testo
  • icon-left: se si vuole posizionare l’icona a sinistra del testo

All’interno del tag <span class="list-item-title-icon-wrapper"> subito dopo lo <span class="list-item-title"> contenente il testo, puoi inserire l’icona necessaria.

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

<div class="link-list-wrapper multiline">
  <ul class="link-list">
    <li>
      <a class="list-item active icon-right" href="#">
        <span class="list-item-title-icon-wrapper">
          <h4 class="list-item-title">Link lista 1 attivo</h4>
          <svg class="icon icon-primary">
            <title>Codice</title>
            <use href="/dist/svg/sprites.svg#it-code-circle"></use>
          </svg>
        </span>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit…</p>
      </a>
    </li>
    <li>
      <span class="divider" role="separator"></span>
    </li>
    <li>
      <a class="list-item icon-right" href="#">
        <span class="list-item-title-icon-wrapper">
          <h4 class="list-item-title">Link lista 2</h4>
          <svg class="icon icon-primary">
            <title>Codice</title>
            <use href="/dist/svg/sprites.svg#it-code-circle"></use>
          </svg>
        </span>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit…</p>
      </a>
    </li>
    <li><span class="divider"></span>
    </li>
    <li>
      <a class="list-item disabled icon-right" href="#" aria-disabled="true">
        <span class="list-item-title-icon-wrapper">
          <h4 class="list-item-title">Link lista 3 disabilitato</h4>
          <svg class="icon icon-primary">
            <title>Codice</title>
            <use href="/dist/svg/sprites.svg#it-code-circle"></use>
          </svg>
        </span>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit…</p>
      </a>
    </li>
    <li>
      <span class="divider"></span> 
    </li>
  </ul>
</div>

Lista con controlli

Le liste di link con controlli sono caratterizzate da icone a destra e sinistra del testo.
Quella di destra è descrittiva mentre quella di sinistra può essere un’eventuale azione aggiuntiva da gestire in Javascript.

È necessario aggiungere al tag <a> la classe .icon-right se si vuole posizionare l’icona a destra del testo, oppure la classe .icon-left se si vuole posizionare l’icona a sinistra del testo.

Azione primaria

Icona a sinistra

All’interno del tag <span class="list-item-title-icon-wrapper"> subito prima del tag <span class="list-item-title"> contenente il testo, puoi inserire l’icona necessaria.
Per posizionare correttamente l’icona a sinistra del testo bisogna aggiungere al tag <a> la classe: .icon-left.

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

<div class="link-list-wrapper">
  <ul class="link-list">
    <li>
      <a class="list-item active icon-left" href="#">
        <span class="list-item-title-icon-wrapper">
          <svg class="icon icon-primary">
            <title>Freccia destra</title>
            <use href="/dist/svg/sprites.svg#it-chevron-right"></use>
          </svg>
          <span class="list-item-title">Link lista 1 attivo</span>
        </span>
      </a>
    </li>
    <li>
      <a class="list-item icon-left" href="#">
       <span class="list-item-title-icon-wrapper">
          <svg class="icon icon-primary">
            <title>Freccia destra</title>
            <use href="/dist/svg/sprites.svg#it-chevron-right"></use>
          </svg>
          <span class="list-item-title">Link lista 2</span>
        </span>
      </a>
    </li>
    <li>
      <a class="list-item icon-left disabled" href="#" aria-disabled="true">
       <span class="list-item-title-icon-wrapper">
          <svg class="icon icon-primary">
            <title>Freccia destra</title>
            <use href="/dist/svg/sprites.svg#it-chevron-right"></use>
          </svg>
          <span class="list-item-title">Link lista 3 disabilitato</span>
        </span>
      </a>
    </li>
  </ul>
</div>

Azione secondaria

Icona a destra

All’interno del tag <span class="list-item-title-icon-wrapper"> subito dopo il tag <span class="list-item-title"> contenente il testo, puoi inserire l’icona necessaria.
Per posizionare correttamente l’icona a destra del testo bisogna aggiungere al tag <a> la classe: .icon-right

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

<div class="link-list-wrapper">
  <ul class="link-list">
    <li>
      <a class="list-item active icon-right" href="#">
        <span class="list-item-title-icon-wrapper">
          <span class="list-item-title">Link lista 1 attivo</span>
          <svg class="icon icon-primary icon-sm">
            <title>Link</title>
            <use href="/dist/svg/sprites.svg#it-link"></use>
          </svg>
        </span>
      </a>
    </li>
    <li>
      <a class="list-item icon-right" href="#">
        <span class="list-item-title-icon-wrapper">
          <span class="list-item-title">Link lista 2</span>
          <svg class="icon icon-primary icon-sm">
            <title>Link</title>
            <use href="/dist/svg/sprites.svg#it-link"></use>
          </svg>
        </span>
      </a>
    </li>
    <li>
      <a class="list-item icon-right disabled" href="#" aria-disabled="true">
        <span class="list-item-title-icon-wrapper">
          <span class="list-item-title">Link lista 3 disabilitato</span>
          <svg class="icon icon-primary icon-sm">
            <title>Link</title>
            <use href="/dist/svg/sprites.svg#it-link"></use>
          </svg>
        </span>
      </a>
    </li>
  </ul>
</div>

Azioni primaria e secondaria

Icona a sinistra

Per aggiungere un’icona a sinistra del testo bisogna aggiungere al tag <a> la classe: .icon-left.
Inserisci l’icona all’interno del tag <span class="list-item-title-icon-wrapper"> subito prima del tag <span class="list-item-title"> contenente il testo.

Icona a destra

Per aggiungere un’icona a destra del testo bisogna aggiungere al tag <a> la classe: .icon-right.
Inserisci l’icona all’interno del tag <span class="list-item-title-icon-wrapper"> subito prima del tag <span class="list-item-title"> contenente il testo.

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

<div class="link-list-wrapper">
  <ul class="link-list">
    <li>
      <a class="list-item active icon-left" href="#">
        <span class="list-item-title-icon-wrapper">
          <svg class="icon icon-primary icon-sm">
            <title>Link</title>
            <use href="/dist/svg/sprites.svg#it-link"></use>
          </svg>
          <span class="list-item-title">Link lista 1 attivo</span>
        </span>
      </a>
    </li>
    <li>
      <a class="list-item icon-left" href="#">
        <span class="list-item-title-icon-wrapper">
          <svg class="icon icon-primary icon-sm">
            <title>Link</title>
            <use href="/dist/svg/sprites.svg#it-link"></use>
          </svg>
          <span class="list-item-title">Link lista 2</span>
        </span>
      </a>
    </li>
    <li>
      <a class="list-item disabled icon-right" href="#" aria-disabled="true">
        <span class="list-item-title-icon-wrapper">
          <span class="list-item-title">Link lista 3 disabilitato con icona a destra</span>
          <svg class="icon icon-primary icon-sm">
            <title>Link</title>
            <use href="/dist/svg/sprites.svg#it-link"></use>
          </svg>
        </span>
      </a>
    </li>
  </ul>
</div>

Lista con toggle

Una lista di link può contenere anche elementi appartenenti ai form, di seguito un esempio contenente un toggle.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

 <div class="link-list-wrapper">
  <ul class="link-list">
    <li>
      <div class="toggles">
        <label for="toggle1">Label per toggle
          <input type="checkbox" id="toggle1"><span class="lever"></span>
        </label>
      </div>
    </li>
    <li>
      <div class="toggles">
        <label for="toggle2">Label per toggle disabilitato
          <input type="checkbox" id="toggle2" disabled aria-disabled="true"><span class="lever"></span>
        </label>
      </div>
    </li>
  </ul>
</div>

List con checkbox

Lista di link contenente un checkbox.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<div class="link-list-wrapper">
  <ul class="link-list">
    <li>
      <div class="form-check form-check-group" aria-describedby="">
        <input type="checkbox" id="checkbox6" checked>
        <label for="checkbox6">Checkbox selezionato</label>
      </div>
    </li>
    <li>
      <div class="form-check form-check-group" aria-describedby="">
        <input type="checkbox" id="checkbox7">
        <label for="checkbox7">Checkbox non selezionato</label>
      </div>
    </li>
    <li>
      <div class="form-check form-check-group disabled" aria-disabled="true">
        <input type="checkbox" id="checkbox8" disabled aria-disabled="true">
        <label for="checkbox8">Checkbox disabilitato non selezionato</label>
      </div>
    </li>
  </ul>
</div>

Liste annidate

Le liste di link possono contenere link con sottosezioni espanse o collassabili.

Espansa

Di seguito un esempio di navigazione annidata espansa.

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

<div class="link-list-wrapper">
  <ul class="link-list">
    <li>
      <a class="list-item large medium icon-right" href="#">
        <span class="list-item-title-icon-wrapper">
          <span class="list-item-title">Link lista 1</span>
          <svg class="icon icon-primary icon-sm">
            <title>Link</title>
            <use href="/dist/svg/sprites.svg#it-link"></use>
          </svg>
        </span>
      </a>
    </li>
    <li>
      <a class="list-item large medium icon-right" href="#">
        <span class="list-item-title-icon-wrapper">
          <span class="list-item-title">Link lista 2</span>
          <svg class="icon icon-primary icon-sm">
            <title>Link</title>
            <use href="/dist/svg/sprites.svg#it-link"></use>
          </svg>
        </span>
      </a>
      <ul class="link-sublist" id="">
        <li><a class="list-item" href="#"><span>Link lista 1</span></a>
        </li>
        <li><a class="list-item" href="#"><span>Link lista 2</span></a>
        </li>
        <li><a class="list-item" href="#"><span>Link lista 3</span></a>
        </li>
      </ul>
    </li>
    <li>
      <a class="list-item large medium icon-right" href="#">
        <span class="list-item-title-icon-wrapper">
          <span class="list-item-title">Link lista 3</span>
          <svg class="icon icon-primary icon-sm">
            <title>Link</title>
            <use href="/dist/svg/sprites.svg#it-link"></use>
          </svg>
        </span>
      </a>
    </li>
  </ul>
</div>

Collassabile

Di seguito un esempio di navigazione annidata collassabile.
Per questo tipo di link list sono state utilizzate, oltre alle classi custom, le classi e gli attributi di Bootstrap per l’attivazione del comportamento collapse.

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

<div class="link-list-wrapper">
  <ul class="link-list">
    <li>
      <a class="list-item large medium icon-right" href="#collapseOne" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="collapseOne">
        <span class="list-item-title-icon-wrapper">
          <span class="list-item-title">Link lista 1</span>
          <svg class="icon icon-primary"><use href="/dist/svg/sprites.svg#it-expand"></use></svg>
        </span>
      </a>
      <ul class="link-sublist collapse" id="collapseOne">
        <li><a class="list-item" href="#"><span>Link lista 1</span></a>
        </li>
        <li><a class="list-item" href="#"><span>Link lista 1</span></a>
        </li>
        <li><a class="list-item" href="#"><span>Link lista 1</span></a>
        </li>
      </ul>
    </li>
    <li>
      <a class="list-item large medium icon-right" href="#collapseTwo" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="collapseTwo">
        <span class="list-item-title-icon-wrapper">
          <span class="list-item-title">Link lista 2</span>
          <svg class="icon icon-primary"><use href="/dist/svg/sprites.svg#it-expand"></use></svg>
        </span>
      </a>
      <ul class="link-sublist collapse" id="collapseTwo">
        <li><a class="list-item" href="#"><span>Link lista 1</span></a>
        </li>
        <li><a class="list-item" href="#"><span>Link lista 1</span></a>
        </li>
        <li><a class="list-item" href="#"><span>Link lista 1</span></a>
        </li>
      </ul>
    </li>
    <li>
      <a class="list-item large medium icon-right" href="#collapseThree" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="collapseThree">
        <span class="list-item-title-icon-wrapper">
          <span class="list-item-title">Link lista 3</span>
          <svg class="icon icon-primary"><use href="/dist/svg/sprites.svg#it-expand"></use></svg>
        </span>
      </a>
      <ul class="link-sublist collapse" id="collapseThree">
        <li><a class="list-item" href="#"><span>Link lista 1</span></a>
        </li>
        <li><a class="list-item" href="#"><span>Link lista 1</span></a>
        </li>
        <li><a class="list-item" href="#"><span>Link lista 1</span></a>
        </li>
      </ul>
    </li>
  </ul>
</div>

Properties

Variabile CSS Descrizione (Inglese) Predefinito
--bsi-linklist-divider-size Controls the height of the divider between list items 1px
--bsi-linklist-heading-color Controls the color of the linklist heading, using text color tokens var(--bsi-color-text-secondary)
--bsi-linklist-heading-font-size Controls the font size of the linklist heading, using text tokens var(--bsi-heading-6-font-size)
--bsi-linklist-item-font-size Controls the font size of the list items, using text tokens var(--bsi-label-font-size)
--bsi-linklist-item-line-height Controls the line height of the list items, using text tokens var(--bsi-label-leading)
--bsi-linklist-item-spacing Controls the vertical spacing of the list items, using spacing tokens var(--bsi-spacing-xxs)
--bsi-linklist-nested-spacing Controls the left padding of nested linklists, using spacing tokens var(--bsi-spacing-s)

Breaking change

  • Negli esempi di varianti lista con avatar è stata rimossa la classe .size-lg dai <div> con classe .avatar.
  • Nelle liste con immagini sono state aggiunge le classi per controllare la dimensione dell’immagine sui <div> con classe .it-thumb: .ratio e .ratio-16x9 con istruzioni su come cambiare quest’ultima con le classi specifiche per cambiare le proporzioni.
  • Nelle liste con azioni e freccia è definita esplicitamente la dimensione e il colore delle icone freccia aggiungendo le classi .icon-primary e .icon-sm rispettivamente dove necessario.

Gli elementi di tipo <a> dei collapse necessitano l’aggiunta dell’attributo role="button".

Il codice markup è stato rivisto in chiave accessibilità e robustezza. In particolare cosa cambia:

  • L’elemento .link-list-heading è ora implementato come heading h e non semplice <span>. Dovrà avere il livello intestazione corretto a seconda della gerarchia in pagina.
  • L’elemento .list-item-title è ora implementato come heading h e non semplice <span>. Dovrà avere il livello intestazione corretto a seconda della gerarchia in pagina.

Il codice markup è stato rivisto in chiave accessibilità e robustezza. In particolare cosa cambia:

  • L’elemento .text è ora implementato come heading h e non semplice <span>. Dovrà avere il livello intestazione corretto a seconda della gerarchia in pagina.