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

Liste

Liste

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.

Lorem ipsum

Liste base

Default

1
2
3
4
5
6
7
8
9

<div class="link-list-wrapper it25-linklist-default">
  <ul class="link-list">
    <li><a class="list-item" href="#"><span>Lorem ipsum dolor</span></a></li>
    <li><a class="list-item active" href="#"><span>Lorem ipsum dolor</span></a></li>
    <li><a class="list-item" href="#"><span>Lorem ipsum dolor</span></a></li>
    <li><a class="list-item disabled" href="#"><span>Lorem ipsum dolor</span></a></li>
    <li><a class="list-item" href="#"><span>Lorem ipsum dolor</span></a></li>
  </ul>
</div>
Senza divider

1
2
3
4
5
6
7
8
9

<div class="link-list-wrapper">
  <ul class="link-list">
    <li><a class="list-item" href="#"><span>Lorem ipsum dolor</span></a></li>
    <li><a class="list-item active" href="#"><span>Lorem ipsum dolor</span></a></li>
    <li><a class="list-item" href="#"><span>Lorem ipsum dolor</span></a></li>
    <li><a class="list-item disabled" href="#"><span>Lorem ipsum dolor</span></a></li>
    <li><a class="list-item" href="#"><span>Lorem ipsum dolor</span></a></li>
  </ul>
</div>
Con Header
Lorem ipsum

1
2
3
4
5
6
7
8
9

<div class="link-list-wrapper">
  <div class="link-list-heading">Lorem ipsum</div>
  <ul class="link-list">
    <li><a class="list-item" href="#"><span>Lorem ipsum dolor</span></a></li>
    <li><a class="list-item active" href="#"><span>Lorem ipsum dolor</span></a></li>
    <li><a class="list-item disabled" href="#"><span>Lorem ipsum dolor</span></a></li>
    <li><a class="list-item" href="#"><span>Lorem ipsum dolor</span></a></li>
  </ul>
</div>
Nested

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

<div class="link-list-wrapper">
  <ul class="link-list">
    <li>
      <a
        class="list-item large medium icon-right border-bottom"
        href="#collapseOne25"
        role="button"
        data-bs-toggle="collapse"
        aria-expanded="false"
        aria-controls="collapseOne25"
      >
        <span class="list-item-title-icon-wrapper">
          <span class="list-item-title">Lorem ipsum dolor</span>
          <svg class="icon"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-expand"></use></svg>
        </span>
      </a>
      <ul class="link-sublist collapse" id="collapseOne25">
        <li>
          <a class="list-item" href="#"><span>Lorem ipsum dolor</span></a>
        </li>
        <li>
          <a class="list-item" href="#"><span>Lorem ipsum dolor</span></a>
        </li>
        <li>
          <a class="list-item" href="#"><span>Lorem ipsum dolor</span></a>
        </li>
      </ul>
    </li>
    <li>
      <a
        class="list-item large medium icon-right border-bottom"
        href="#collapseTwo25"
        role="button"
        data-bs-toggle="collapse"
        aria-expanded="false"
        aria-controls="collapseTwo25"
      >
        <span class="list-item-title-icon-wrapper">
          <span class="list-item-title">Lorem ipsum dolor</span>
          <svg class="icon"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-expand"></use></svg>
        </span>
      </a>
      <ul class="link-sublist collapse" id="collapseTwo25">
        <li>
          <a class="list-item" href="#"><span>Lorem ipsum dolor</span></a>
        </li>
        <li>
          <a class="list-item" href="#"><span>Lorem ipsum dolor</span></a>
        </li>
        <li>
          <a class="list-item" href="#"><span>Lorem ipsum dolor</span></a>
        </li>
      </ul>
    </li>
    <li>
      <a
        class="list-item large medium icon-right border-bottom"
        href="#collapseThree25"
        role="button"
        data-bs-toggle="collapse"
        aria-expanded="false"
        aria-controls="collapseThree25"
      >
        <span class="list-item-title-icon-wrapper">
          <span class="list-item-title">Lorem ipsum dolor</span>
          <svg class="icon"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-expand"></use></svg>
        </span>
      </a>
      <ul class="link-sublist collapse" id="collapseThree25">
        <li>
          <a class="list-item" href="#"><span>Lorem ipsum dolor</span></a>
        </li>
        <li>
          <a class="list-item" href="#"><span>Lorem ipsum dolor</span></a>
        </li>
        <li>
          <a class="list-item" href="#"><span>Lorem ipsum dolor</span></a>
        </li>
      </ul>
    </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

<div class="it-list-wrapper">
  <ul class="it-list">
    <li>
      <a href="#" class="list-item">
        <div class="avatar size-lg"><svg class="icon align-top" aria-hidden="true"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-user"></use></svg></div>
        <div class="it-right-zone"><span>Lorem ipsum dolor</span></div>
      </a>
    </li>
    <li>
      <a href="#" class="list-item active">
        <div class="avatar size-lg"><svg class="icon align-top" aria-hidden="true"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-user"></use></svg></div>
        <div class="it-right-zone"><span>Lorem ipsum dolor</span></div>
      </a>
    </li>
    <li>
      <a href="#" class="list-item disabled">
        <div class="avatar size-lg"><svg class="icon align-top" aria-hidden="true"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-user"></use></svg></div>
        <div class="it-right-zone"><span>Lorem ipsum dolor</span></div>
      </a>
    </li>
  </ul>
</div>

Lista con icone

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>
      <a href="#" class="list-item">
        <div class="it-rounded-icon">
          <svg class="icon  icon-primary">
            <use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-folder"></use>
          </svg>
        </div>
        <div class="it-right-zone"><span>Lorem ipsum dolor</span></div>
      </a>
    </li>
    <li>
      <a href="#" class="list-item active">
        <div class="it-rounded-icon">
          <svg class="icon  icon-primary">
            <use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-folder"></use>
          </svg>
        </div>
        <div class="it-right-zone"><span>Lorem ipsum dolor</span></div>
      </a>
    </li>
    <li>
      <a href="#" class="list-item disabled">
        <div class="it-rounded-icon">
          <svg class="icon  icon-primary">
            <use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-folder"></use>
          </svg>
        </div>
        <div class="it-right-zone"><span>Lorem ipsum dolor</span></div>
      </a>
    </li>
  </ul>
</div>

Lista con “more”

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>
      <a href="#" class="list-item" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <div class="it-right-zone">
          <span class="text">Lorem ipsum dolor</span>
          <svg class="icon">
            <use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-more-actions"></use>
          </svg>
        </div>
      </a>
    </li>
    <li>
      <a href="#" class="list-item active">
        <div class="it-right-zone">
          <span class="text">Lorem ipsum dolor</span>
          <svg class="icon">
            <use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-more-actions"></use>
          </svg>
        </div>
      </a>
    </li>
    <li>
      <a href="#" class="list-item disabled">
        <div class="it-right-zone">
          <span class="text">Lorem ipsum dolor</span>
          <svg class="icon">
            <use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-more-actions"></use>
          </svg>
        </div>
      </a>
    </li>
  </ul>
</div>