Skip to main content
logo regione lombardia

Bootstrap Regione Lombardia

Versione di Bootstrap Italia per la Regione Lombardia per lo sviluppo di applicazioni web per la PA

List

List

Le Liste sono composte da voci attraverso le quali è possibile effettuare sessioni di navigazione all’interno di un’interfaccia.
Troviamo spesso questo elemento all’interno dei menu verticali, ma possono essere presenti in diverse modalità, come ad esempio all’interno di menu fissi laterali.

Semplice

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

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 size-lg">
          <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 size-lg">
          <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 size-lg">
          <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="/bootstrap-lombardia/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="/bootstrap-lombardia/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="/bootstrap-lombardia/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 azioni

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">
            <title>Freccia destra</title>
            <use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-arrow-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">
            <title>Freccia destra</title>
            <use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-arrow-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">
                <title>Modifica</title>
                <use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-pencil"></use>
              </svg>
            </a>
            <a href="#" aria-label="Testo - Azione 2">
              <svg class="icon">
                <title>Copia</title>
                <use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-copy"></use>
              </svg>
            </a>
            <a href="#" aria-label="Testo - Azione 3">
              <svg class="icon">
                <title>Elimina</title>
                <use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-delete"></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">
                <title>Modifica</title>
                <use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-pencil"></use>
              </svg>
            </a>
            <a href="#" aria-label="Link - Azione 2">
              <svg class="icon">
                <title>Copia</title>
                <use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-copy"></use>
              </svg>
            </a>
            <a href="#" aria-label="Link - Azione 3">
              <svg class="icon">
                <title>Elimina</title>
                <use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-delete"></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">
                <title>Modifica</title>
                <use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-pencil"></use>
              </svg>
            </a>
            <a href="#" aria-label="Link - Azione 2">
              <svg class="icon">
                <title>Copia</title>
                <use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-copy"></use>
              </svg>
            </a>
            <a href="#" aria-label="Link - Azione 3">
              <svg class="icon">
                <title>Elimina</title>
                <use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-delete"></use>
              </svg>
            </a>
          </span>
        </div>
      </div>
    </li>
  </ul>
</div>

Semplice

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>

Annidata

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 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">Link lista 1</span>
          <svg class="icon icon-primary"><use href="/bootstrap-lombardia/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 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">Link lista 2</span>
          <svg class="icon icon-primary"><use href="/bootstrap-lombardia/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 2</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 2</span></a>
        </li>
      </ul>
    </li>
    <li>
      <a class="list-item large 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">Link lista 3</span>
          <svg class="icon icon-primary"><use href="/bootstrap-lombardia/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 3</span></a>
        </li>
        <li><a class="list-item" href="#"><span>Link lista 3</span></a>
        </li>
        <li><a class="list-item" href="#"><span>Link lista 3</span></a>
        </li>
      </ul>
    </li>
  </ul>
</div>

Descrittiva

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, è possibile 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 icon-right" href="#">
        <span class="list-item-title-icon-wrapper">
          <h4 class="list-item-title fw-normal">Link lista 1</h4>
          <svg class="icon icon-primary">
            <title>Vai al link</title>
            <use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-arrow-right"></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 fw-normal">Link lista 2</h4>
          <svg class="icon icon-primary">
            <title>Vai al link</title>
            <use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-arrow-right"></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 fw-normal">Link lista 3 disabilitato</h4>
          <svg class="icon icon-primary">
            <title>Vai al link</title>
            <use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-arrow-right"></use>
          </svg>
        </span>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit…</p>
      </a>
    </li>
    <li>
      <span class="divider"></span> 
    </li>
  </ul>
</div>