Liste di eventi
La lista di eventi è un componente flessibile per la visualizzazione di liste ordinate cronologicamente.
Introduzione
La lista di eventi o point list è un componente che organizza i contenuti cronologicamente.
Il componente ha due layout: calendario e passo passo (step-by-step). In entrambi i
layout il componente è composto da una sezione primaria .point-list-content e
da una sezione secondaria .point-list-aside. La sezione primaria è preposta alla
presentazione del contenuto ed è possibile innestare altri componenti; la sezione
secondaria viene usata per mettere in risalto la sequenza temporale.
Infine, il componente può essere implementato usando l’elenco non ordinato ul
oppure usando il contenitore generico div.
Esempio come elenco
-
14Ottobre
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-
14Dicembre
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<ul class="point-list-wrapper">
<li class="point-list">
<div class="point-list-aside point-list-primary">
<div class="point-date font-monospace" aria-label="giorno">14</div>
<div class="point-month font-monospace" aria-label="mese"><span aria-hidden="true">OTT</span><span class="visually-hidden">Ottobre</span></div>
</div>
<div class="point-list-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</li>
<li class="point-list">
<div class="point-list-aside point-list-primary">
<div class="point-date font-monospace" aria-label="giorno">14</div>
<div class="point-month font-monospace" aria-label="mese"><span aria-hidden="true">DIC</span><span class="visually-hidden">Dicembre</span></div>
</div>
<div class="point-list-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</li>
</ul>
Esempio con il contenitore generico
14
Ottobre
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
1
2
3
4
5
6
7
8
9
10
11
<div class="point-list-wrapper" role="list">
<div class="point-list" role="listitem">
<div class="point-list-aside point-list-primary">
<div class="point-date font-monospace" aria-label="giorno">14</div>
<div class="point-month font-monospace" aria-label="mese"><span aria-hidden="true">OTT</span><span class="visually-hidden">Ottobre</span></div>
</div>
<div class="point-list-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
Layout calendario
Il layout calendario permette di esplicitare delle date nella sezione secondaria .point-list-aside.
Esempio base
Nella sezione secondaria il contenitore .point-date viene usato per evidenziare il giorno,
il contenitore .point-month per il mese.
14
Ottobre
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
1
2
3
4
5
6
7
8
9
10
11
<div class="point-list-wrapper" role="list">
<div class="point-list" role="listitem">
<div class="point-list-aside point-list-primary">
<div class="point-date font-monospace" aria-label="giorno">14</div>
<div class="point-month font-monospace" aria-label="mese"><span aria-hidden="true">OTT</span><span class="visually-hidden">Ottobre</span></div>
</div>
<div class="point-list-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
Con anno
Tramite il contenitore .point-year è possibile specificare l’anno.
-
202514Ottobre
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
1
2
3
4
5
6
7
8
9
10
11
12
<ul class="point-list-wrapper">
<li class="point-list">
<div class="point-list-aside point-list-primary">
<div class="point-year font-monospace" aria-label="anno">2025</div>
<div class="point-date font-monospace" aria-label="giorno">14</div>
<div class="point-month font-monospace" aria-label="mese"><span aria-hidden="true">OTT</span><span class="visually-hidden">Ottobre</span></div>
</div>
<div class="point-list-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</li>
</ul>
Layout passo passo
Il layout passo passo (o step-by-step) evidenzia l’ordine temporale dei contenuti tramite icone o con del breve testo. Nella sezione secondaria è possibile usare un testo breve (2 caratteri massimo) o un’icona. La differenza con il layout calendario sta nelle minori dimensioni della sezione secondaria.
Step-by-step con testo
Viene usato il contenitore .point-date per inserire un testo brevissimo (2 caratteri
massimo). È possibile usare .point-month e .point-year per aggiungere ulteriori
informazioni.
-
01
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-
01/3
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-
AB01/3
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
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
<ul class="point-list-wrapper">
<li class="point-list point-list-step">
<div class="point-list-aside point-list-primary">
<div class="point-date font-monospace" aria-label="passo">01</div>
</div>
<div class="point-list-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</li>
<li class="point-list point-list-step">
<div class="point-list-aside point-list-primary">
<div class="point-date font-monospace" aria-label="passo">01</div>
<div class="point-month font-monospace" aria-label="passi totali">/3</div>
</div>
<div class="point-list-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</li>
<li class="point-list point-list-step">
<div class="point-list-aside point-list-primary">
<div class="point-year font-monospace" aria-label="categoria">AB</div>
<div class="point-date font-monospace" aria-label="passo">01</div>
<div class="point-month font-monospace" aria-label="passi totali">/3</div>
</div>
<div class="point-list-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</li>
</ul>
Step con icona
In questa variante viene inserita un’icona nel contenitore .point-date. Inoltre, è
possibile usare .point-month e .point-year.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
DOC
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
v2
JS
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
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
<div class="point-list-wrapper" role="list">
<div class="point-list point-list-step" role="listitem">
<div class="point-list-aside point-list-primary">
<div class="point-date font-monospace">
<svg class="icon icon-primary" role="img"><title>Milestone</title><use href="/dist/svg/sprites.svg#it-flag"></use></svg>
</div>
</div>
<div class="point-list-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="point-list point-list-step" role="listitem">
<div class="point-list-aside point-list-primary">
<div class="point-date font-monospace">
<svg class="icon icon-primary" role="img"><title>Milestone</title><use href="/dist/svg/sprites.svg#it-file"></use></svg>
</div>
<div class="point-month font-monospace" aria-label="documento">DOC</div>
</div>
<div class="point-list-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="point-list point-list-step" role="listitem">
<div class="point-list-aside point-list-primary">
<div class="point-year font-monospace" aria-label="versione">v2</div>
<div class="point-date font-monospace">
<svg class="icon icon-primary" role="img"><title>Milestone</title><use href="/dist/svg/sprites.svg#it-code-circle"></use></svg>
</div>
<div class="point-month font-monospace" aria-label="linguaggio">JS</div>
</div>
<div class="point-list-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
Varianti colore
Modificando opportunamente .point-list-{suffisso} è possibile personalizzare il
colore della sezione secondaria. Ad esempio: .point-list-primary userà il
colore primary.
-
202514Ottobre
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-
202514Ottobre
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-
202514Ottobre
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-
202514Ottobre
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-
202514Ottobre
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-
202514Ottobre
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
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
<ul class="point-list-wrapper">
<li class="point-list">
<div class="point-list-aside point-list-primary">
<div class="point-year font-monospace" aria-label="anno">2025</div>
<div class="point-date font-monospace" aria-label="giorno">14</div>
<div class="point-month font-monospace" aria-label="mese"><span aria-hidden="true">OTT</span><span class="visually-hidden">Ottobre</span></div>
</div>
<div class="point-list-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</li>
<li class="point-list">
<div class="point-list-aside point-list-success">
<div class="point-year font-monospace" aria-label="anno">2025</div>
<div class="point-date font-monospace" aria-label="giorno">14</div>
<div class="point-month font-monospace" aria-label="mese"><span aria-hidden="true">OTT</span><span class="visually-hidden">Ottobre</span></div>
</div>
<div class="point-list-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</li>
<li class="point-list">
<div class="point-list-aside point-list-info">
<div class="point-year font-monospace" aria-label="anno">2025</div>
<div class="point-date font-monospace" aria-label="giorno">14</div>
<div class="point-month font-monospace" aria-label="mese"><span aria-hidden="true">OTT</span><span class="visually-hidden">Ottobre</span></div>
</div>
<div class="point-list-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</li>
<li class="point-list">
<div class="point-list-aside point-list-warning">
<div class="point-year font-monospace" aria-label="anno">2025</div>
<div class="point-date font-monospace" aria-label="giorno">14</div>
<div class="point-month font-monospace" aria-label="mese"><span aria-hidden="true">OTT</span><span class="visually-hidden">Ottobre</span></div>
</div>
<div class="point-list-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</li>
<li class="point-list">
<div class="point-list-aside point-list-danger">
<div class="point-year font-monospace" aria-label="anno">2025</div>
<div class="point-date font-monospace" aria-label="giorno">14</div>
<div class="point-month font-monospace" aria-label="mese"><span aria-hidden="true">OTT</span><span class="visually-hidden">Ottobre</span></div>
</div>
<div class="point-list-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</li>
<li class="point-list">
<div class="point-list-aside point-list-dark">
<div class="point-year font-monospace" aria-label="anno">2025</div>
<div class="point-date font-monospace" aria-label="giorno">14</div>
<div class="point-month font-monospace" aria-label="mese"><span aria-hidden="true">OTT</span><span class="visually-hidden">Ottobre</span></div>
</div>
<div class="point-list-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</li>
</ul>
Esempio complesso
Di seguito un esempio un po’ più complesso.
-
14Ottobre
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
di Federico De Paolis Leggi di più -
31Ottobre
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
di Federico De Paolis Leggi di più -
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
di Federico De Paolis Leggi di più -
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
di Federico De Paolis Leggi di più
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
<ul class="point-list-wrapper">
<li class="point-list">
<div class="point-list-aside point-list-dark">
<div class="point-date font-monospace" aria-label="giorno">14</div>
<div class="point-month font-monospace" aria-label="mese"><span aria-hidden="true">OTT</span><span class="visually-hidden">Ottobre</span></div>
</div>
<div class="point-list-content">
<div class="row mb-5">
<div class="col-lg-7">
<div class="card-wrapper">
<div class="card">
<div class="card-body">
<h4 class="card-title h5">Lorem ipsum dolor sit amet</h4>
<div class="category-top">
<span class="visually-hidden">Categoria evento:</span> <a class="category" href="#">Categoria</a>
<span class="visually-hidden">Data evento:</span> <span class="data">10/12/2025</span>
</div>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<span class="card-signature">di Federico De Paolis</span>
<a class="read-more" href="#">
<span class="text">Leggi di più</span>
<svg class="icon"><use href="/dist/svg/sprites.svg#it-arrow-right"></use></svg>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="point-list">
<div class="point-list-aside point-list-danger">
<div class="point-date font-monospace" aria-label="giorno">31</div>
<div class="point-month font-monospace" aria-label="mese"><span aria-hidden="true">OTT</span><span class="visually-hidden">Ottobre</span></div>
</div>
<div class="point-list-content">
<div class="row mb-5">
<div class="col-lg-7">
<div class="card-wrapper">
<div class="card">
<div class="card-body">
<h4 class="card-title h5">Lorem ipsum dolor sit amet</h4>
<div class="category-top">
<span class="visually-hidden">Categoria evento:</span> <a class="category" href="#">Categoria</a>
<span class="visually-hidden">Data evento:</span> <span class="data">10/12/2025</span>
</div>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<span class="card-signature">di Federico De Paolis</span>
<a class="read-more" href="#">
<span class="text">Leggi di più</span>
<svg class="icon"><use href="/dist/svg/sprites.svg#it-arrow-right"></use></svg>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="point-list">
<div class="point-list-aside point-list-info">
<div class="point-date font-monospace">
<svg class="icon icon-info icon-lg" role="img"><title>Milestone</title><use href="/dist/svg/sprites.svg#it-clock"></use></svg>
</div>
</div>
<div class="point-list-content">
<div class="row mb-5">
<div class="col-lg-7">
<div class="card-wrapper">
<div class="card">
<div class="card-body">
<h4 class="card-title h5">Lorem ipsum dolor sit amet</h4>
<div class="category-top">
<span class="visually-hidden">Categoria evento:</span> <a class="category" href="#">Categoria</a>
<span class="visually-hidden">Data evento:</span> <span class="data">10/12/2025</span>
</div>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<span class="card-signature">di Federico De Paolis</span>
<a class="read-more" href="#">
<span class="text">Leggi di più</span>
<svg class="icon"><use href="/dist/svg/sprites.svg#it-arrow-right"></use></svg>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="point-list">
<div class="point-list-aside point-list-success">
<div class="point-date font-monospace">
<svg class="icon icon-success icon-lg" role="img"><title>Milestone</title><use href="/dist/svg/sprites.svg#it-flag"></use></svg>
</div>
</div>
<div class="point-list-content">
<div class="row mb-5">
<div class="col-lg-7">
<div class="card-wrapper">
<div class="card">
<div class="card-body">
<h4 class="card-title h5">Lorem ipsum dolor sit amet</h4>
<div class="category-top">
<span class="visually-hidden">Categoria evento:</span> <a class="category" href="#">Categoria</a>
<span class="visually-hidden">Data evento:</span> <span class="data">10/12/2025</span>
</div>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<span class="card-signature">di Federico De Paolis</span>
<a class="read-more" href="#">
<span class="text">Leggi di più</span>
<svg class="icon"><use href="/dist/svg/sprites.svg#it-arrow-right"></use></svg>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>