Timeline

Rappresentazione grafica di una serie di eventi in ordine cronologico per descrivere la storia di un’istituzione o il progresso di un progetto

Componenti
Utile per
Contenuti

Anteprima

Per visualizzare la modalità desktop è necessario uno schermo sufficientemente largo.

Anteprima:

Quando usarlo

Usa il componente timeline quando devi presentare una serie di eventi in ordine cronologico. È particolarmente utile per raccontare una sequenza di eventi storici o per evidenziare importanti traguardi o risultati.

Come usarlo

  • Identifica gli eventi chiave che desideri rappresentare sulla linea del tempo.
  • Organizza questi eventi in ordine cronologico.
  • Crea una linea o un percorso visivo che rappresenta il flusso del tempo.
  • Posiziona gli eventi lungo questa linea in base a quando si sono verificati.
  • Fornisci un breve riepilogo o una descrizione per ogni evento.

Attenzione a

  • Evitare di sovraccaricare la timeline con troppi dettagli: concentrati sui punti chiave e le informazioni più rilevanti.
  • Assicurare che la sequenza sia chiaramente identificabile anche navigando da tastiera o con strumenti assistivi come lettori di schermo.

Buone pratiche sui contenuti

  • Mantieni le descrizioni degli eventi brevi e concise per facilitare la lettura e la comprensione.
  • Se possibile, usa le icone per rappresentare gli eventi o le fasi.
  • Assicurati che gli eventi siano chiaramente distinti l'uno dall'altro sulla timeline.

Accessibilità

Lo stato delle verifiche di accessibilità effettuate sul componente Bootstrap Italia

CaratteristicaStatoDescrizione

Visivamente accessibile

Pronto

Uso e contrasto dei colori, leggibilità

Amichevole con lettori di schermo

Pronto

Struttura titolazioni, etichette e testi alternativi

Navigabile

Pronto

Focus, struttura, navigazione da tastiera o altri device

Comprensibile

Pronto

Comprensibile, prevedibile, gestione semplice dell’errore

Apri una issue sul repository Bootstrap Italia

Anatomia

Gli elementi che formano la Timeline

Il componente timeline è composto da:

  1. segnaposto, rappresenta l'evento sulla linea del tempo e può ospitare un icona;
  2. data, la data dell'evento che può essere scritta in diversi formati;
  3. linea del tempo, si sviluppa in verticale seguendo il numero di eventi presenti;
  4. titolo evento, descrizione sintetica dell'evento;
  5. descrizione, descrizione estesa dell'evento che può contenere altri elementi come link, immagini, pulsanti.

Comportamento

La disposizione degli eventi lungo la linea del tempo cambia a seconda dei dispositivi su cui viene visualizzata.

Specifiche di design

Tutte le misure indicate sono espresse in px.

Specifiche di design della timeline

Come iniziare

Scopri come utilizzare tutti gli strumenti pensati per progettare interfacce ed esperienze dei servizi pubblici

Vai alla scheda per designer

Anteprima

Per visualizzare la modalità desktop è necessario uno schermo sufficientemente largo.

Anteprima:

1<div class="it-timeline-wrapper">
2  <div class="row">
3    <div class="col-12">
4      <div class="timeline-element">
5        <h3 class="it-pin-wrapper it-evidence">
6          <div class="pin-icon">
7            <svg class="icon" role="img"><title>Segnaposto</title><use href="/dist/svg/sprites.svg#it-bookmark"></use></svg>
8          </div>
9          <div class="pin-text"><span>maggio 2025</span></div>
10        </h3>
11        <div class="card-wrapper">
12          <div class="card">
13            <div class="card-body">
14              <h4 class="card-title h5">Lorem ipsum dolor sit amet</h4>
15              <div class="category-top">
16                <span class="visually-hidden">Categoria evento:</span> <a class="category" href="#">Categoria</a>
17                <span class="visually-hidden">Data evento:</span> <span class="data">10/12/2025</span>
18              </div>
19              <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
20              <span class="card-signature">di Federico De Paolis</span>
21              <a class="read-more" href="#">
22                <span class="text">Leggi di più</span>
23                <svg class="icon"><use href="/dist/svg/sprites.svg#it-arrow-right"></use></svg>
24              </a>
25            </div>
26          </div>
27        </div>
28      </div>
29    </div>
30    <div class="col-12">
31      <div class="timeline-element">
32        <h3 class="it-pin-wrapper it-evidence">
33          <div class="pin-icon">
34            <svg class="icon" role="img"><title>Segnaposto</title><use href="/dist/svg/sprites.svg#it-bookmark"></use></svg>
35          </div>
36          <div class="pin-text"><span>giugno 2025</span></div>
37        </h3>
38        <div class="card-wrapper">
39          <div class="card">
40            <div class="card-body">
41              <h4 class="card-title h5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</h4>
42              <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
43            </div>
44          </div>
45        </div>
46      </div>
47    </div>
48    <div class="col-12">
49      <div class="timeline-element">
50        <h3 class="it-pin-wrapper it-evidence">
51          <div class="pin-icon">
52            <svg class="icon" role="img"><title>Risultato</title><use href="/dist/svg/sprites.svg#it-flag"></use></svg>
53          </div>
54          <div class="pin-text"><span>luglio 2025</span></div>
55        </h3>
56        <div class="card-wrapper">
57          <div class="card">
58            <div class="card-body">
59              <h4 class="card-title h5">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h4>
60              <div class="category-top">
61                <span class="visually-hidden">Categoria evento:</span> <a class="category" href="#">Categoria</a>
62                <span class="visually-hidden">Data evento:</span> <span class="data">10/12/2025</span>
63              </div>
64              <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
65              <span class="card-signature">di Federico De Paolis</span>
66              <a class="read-more" href="#">
67                <span class="text">Leggi di più</span>
68                <span class="visually-hidden">su Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
69                <svg class="icon"><use href="/dist/svg/sprites.svg#it-arrow-right"></use></svg>
70              </a>
71            </div>
72          </div>
73        </div>
74      </div>
75    </div>
76    <div class="col-12">
77      <div class="timeline-element">
78        <span class="it-now-label d-none d-lg-flex">Oggi</span>
79        <h3 class="it-pin-wrapper it-now">
80          <div class="pin-icon">
81            <svg class="icon" role="img"><title>Successo</title><use href="/dist/svg/sprites.svg#it-check"></use></svg>
82          </div>
83          <div class="pin-text"><span>agosto 2025</span></div>
84        </h3>
85        <div class="card-wrapper">
86          <div class="card">
87            <div class="card-body">
88              <h4 class="card-title h5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</h4>
89              <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
90            </div>
91          </div>
92        </div>
93      </div>
94    </div>
95    <div class="col-12">
96      <div class="timeline-element">
97        <h3 class="it-pin-wrapper">
98          <div class="pin-icon">
99            <svg class="icon" role="img"><title>Evento</title><use href="/dist/svg/sprites.svg#it-calendar"></use></svg>
100          </div>
101          <div class="pin-text"><span>settembre 2025</span></div>
102        </h3>
103        <div class="card-wrapper">
104          <div class="card">
105            <div class="card-body">
106              <h4 class="card-title h5">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h4>
107              <div class="category-top">
108                <span class="visually-hidden">Categoria evento:</span> <a class="category" href="#">Categoria</a>
109                <span class="visually-hidden">Data evento:</span> <span class="data">10/12/2025</span>
110              </div>
111              <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
112              <span class="card-signature">di Federico De Paolis</span>
113              <a class="read-more" href="#">
114                <span class="text">Leggi di più</span>
115                <span class="visually-hidden">su Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
116                <svg class="icon"><use href="/dist/svg/sprites.svg#it-arrow-right"></use></svg>
117              </a>
118            </div>
119          </div>
120        </div>
121      </div>
122    </div>
123    <div class="col-12">
124      <div class="timeline-element">
125        <h3 class="it-pin-wrapper">
126          <div class="pin-icon">
127            <svg class="icon" role="img"><title>Successo</title><use href="/dist/svg/sprites.svg#it-check"></use></svg>
128          </div>
129          <div class="pin-text"><span>ottobre 2025</span></div>
130        </h3>
131        <div class="card-wrapper">
132          <div class="card">
133            <div class="card-body">
134              <h4 class="card-title h5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</h4>
135              <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
136            </div>
137          </div>
138        </div>
139      </div>
140    </div>
141    <div class="col-12">
142      <div class="timeline-element">
143        <h3 class="it-pin-wrapper">
144          <div class="pin-icon">
145            <svg class="icon" role="img"><title>Milestone</title><use href="/dist/svg/sprites.svg#it-flag"></use></svg>
146          </div>
147          <div class="pin-text"><span>novembre 2025</span></div>
148        </h3>
149        <div class="card-wrapper">
150          <div class="card">
151            <div class="card-body">
152              <h4 class="card-title h5">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h4>
153              <div class="category-top">
154                <span class="visually-hidden">Categoria evento:</span> <a class="category" href="#">Categoria</a>
155                <span class="visually-hidden">Data evento:</span> <span class="data">10/12/2025</span>
156              </div>
157              <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
158              <span class="card-signature">di Federico De Paolis</span>
159              <a class="read-more" href="#">
160                <span class="text">Leggi di più</span>
161                <span class="visually-hidden">su Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
162                <svg class="icon"><use href="/dist/svg/sprites.svg#it-arrow-right"></use></svg>
163              </a>
164            </div>
165          </div>
166        </div>
167      </div>
168    </div>
169    <div class="col-12">
170      <div class="timeline-element">
171        <h3 class="it-pin-wrapper">
172          <div class="pin-icon">
173            <svg class="icon" role="img"><title>Milestone</title><use href="/dist/svg/sprites.svg#it-flag"></use></svg>
174          </div>
175          <div class="pin-text"><span>dicembre 2025</span></div>
176        </h3>
177        <div class="card-wrapper">
178          <div class="card">
179            <div class="card-body">
180              <h4 class="card-title h5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</h4>
181              <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
182            </div>
183          </div>
184        </div>
185      </div>
186    </div>
187  </div>
188</div>

Come iniziare

Scopri come utilizzare tutti gli strumenti pensati per progettare interfacce ed esperienze dei servizi pubblici

Vai alla scheda per sviluppatori
Ultimo aggiornamento: Licenza CC BY-SA 4.0
Proponi una modifica a questa pagina