Componente
Timeline
La linea del tempo di bootstrap-italia: pin rotondi con icona, data accanto al pin, card con titolo e link, e l'indicatore «Oggi» fra passato e futuro. daisyUI timeline verticale.
- Riferimento
<it-timeline>, <it-timeline-item>- Classi
ita-timelineita-timeline-nowita-timeline-futureita-timeline-evidenceita-timeline-badge- Basato su (daisyUI)
timelinetimeline-verticaltimeline-snap-icontimeline-compacttimeline-starttimeline-middletimeline-endbadge- Solo CSS
- È un elenco ordinato: l'ordine è quello della lettura. La linea è piena fino all'evento corrente e chiara dopo; il presente ha aria-current="step". Sotto md la timeline diventa compatta, con data e card sullo stesso lato.
- Storybook
- Apri le storie di Timeline
Esempio base
Mostra il codice HTMLNascondi il codice HTML
<ol class="timeline timeline-vertical timeline-snap-icon max-md:timeline-compact ita-timeline">
<li>
<div class="timeline-start">
<p>Gennaio 2024</p>
</div>
<div class="timeline-middle"><span><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M17.1,8l3.3-5H5V2H4v20h1v-9h15.4L17.1,8z M5,4h13.6l-2.7,4l2.7,4H5V4z" /></svg></span></div>
<div class="timeline-end">
<h3>Avvio del progetto</h3>
<p>Approvato il piano di rinnovo della rete dei servizi digitali.</p>
</div>
<hr>
</li>
<li>
<hr>
<div class="timeline-start">
<p>Maggio 2024</p>
</div>
<div class="timeline-middle"><span><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M19,3H5C3.9,3,3,3.9,3,5v10c0,1.1,0.9,2,2,2h2v5.4l1.7-1.7l3.7-3.7H19c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M20,15 c0.1,0.5-0.3,0.9-0.8,1c-0.1,0-0.1,0-0.2,0h-7l-4,4v-4H5c-0.5,0.1-0.9-0.3-1-0.8c0-0.1,0-0.1,0-0.2V5C3.9,4.5,4.3,4.1,4.8,4 C4.9,4,4.9,4,5,4h14c0.5-0.1,0.9,0.3,1,0.8c0,0.1,0,0.1,0,0.2V15z M9,10c0.1,0.5-0.3,0.9-0.8,1c-0.1,0-0.1,0-0.2,0 c-0.5,0.1-0.9-0.3-1-0.8c0-0.1,0-0.1,0-0.2C6.9,9.5,7.3,9.1,7.8,9C7.9,9,7.9,9,8,9c0.5-0.1,0.9,0.3,1,0.8C9,9.9,9,9.9,9,10z M13,10 c0,0.6-0.4,1-1,1s-1-0.4-1-1s0.4-1,1-1S13,9.4,13,10z M17,10c0,0.6-0.4,1-1,1c-0.6,0-1-0.4-1-1s0.4-1,1-1C16.6,9,17,9.4,17,10z" /></svg></span></div>
<div class="timeline-end">
<h3>Consultazione pubblica</h3>
<p>Cittadini e associazioni hanno inviato oltre 1.200 contributi.</p>
<a href="#">Leggi il report<svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M13.9,5.4l-0.7,0.7l5.3,5.4H3v1h15.5l-5.3,5.4l0.7,0.7l6.6-6.6L13.9,5.4z" /></svg></a>
</div>
<hr>
</li>
<li class="ita-timeline-now ita-timeline-evidence" aria-current="step">
<hr>
<div class="timeline-start">
<p>Settembre 2026</p>
<span class="ita-timeline-badge">Oggi</span>
</div>
<div class="timeline-middle"><span><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M7.7,5c0.6,0,1.2,0.2,1.7,0.5c1.1,0.6,1.7,1.8,1.6,3c-0.1,0.9,0.2,1.8,0.8,2.4l6.3,6.3c0.4,0.3,0.5,0.9,0.2,1.3 c-0.2,0.3-0.5,0.5-0.8,0.5c-0.3,0-0.5-0.1-0.7-0.3l-6.4-6.4c-0.6-0.5-1.3-0.8-2.1-0.8H7.7c-0.8,0-1.7-0.4-2.2-1h2.7V6.4H5.1 c0.3-0.4,0.6-0.8,1.1-1C6.7,5.1,7.2,5,7.7,5 M7.7,4C7,4,6.3,4.2,5.7,4.5C4.6,5.1,3.8,6.2,3.6,7.4h3.6v2.1H3.7 c0.2,0.7,0.6,1.3,1,1.8c0.8,0.8,1.9,1.2,3,1.2h0.6c0.5,0,1,0.2,1.4,0.5l6.4,6.4c0.4,0.4,0.9,0.6,1.4,0.6c0.7,0,1.3-0.3,1.6-0.9 c0.6-0.8,0.4-1.9-0.3-2.6l-6.3-6.3c-0.4-0.4-0.6-1-0.5-1.6c0.1-1.6-0.7-3.1-2-4C9.3,4.2,8.5,4,7.7,4z" /></svg></span></div>
<div class="timeline-end">
<h3>Apertura del cantiere</h3>
<p>I lavori sono in corso nei quartieri nord.</p>
</div>
<hr>
</li>
<li class="ita-timeline-future">
<hr>
<div class="timeline-start">
<p>Marzo 2027</p>
</div>
<div class="timeline-middle"><span><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M17.1,7.9l0.7,0.7L10,16.2l-4.7-4.6L6,10.9l4,3.9L17.1,7.9z M22,12c0,5.5-4.5,10-10,10S2,17.5,2,12S6.5,2,12,2S22,6.5,22,12z M21,12c0-5-4-9-9-9s-9,4-9,9s4,9,9,9S21,17,21,12z" /></svg></span></div>
<div class="timeline-end">
<h3>Collaudo</h3>
<p>Verifica tecnica delle nuove infrastrutture.</p>
</div>
<hr>
</li>
<li class="ita-timeline-future">
<hr>
<div class="timeline-start">
<p>Giugno 2027</p>
</div>
<div class="timeline-middle"><span><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M20.5,4H17V3h-1v1H8V3H7v1H3.5C2.7,4,2,4.7,2,5.5v13C2,19.3,2.7,20,3.5,20h17c0.8,0,1.5-0.7,1.5-1.5v-13 C22,4.7,21.3,4,20.5,4z M21,18.5c0,0.3-0.2,0.5-0.5,0.5h-17C3.2,19,3,18.8,3,18.5v-13C3,5.2,3.2,5,3.5,5H7v1h1V5h8v1h1V5h3.5 C20.8,5,21,5.2,21,5.5V18.5z M4,8h16v1H4V8z" /></svg></span></div>
<div class="timeline-end">
<h3>Inaugurazione</h3>
</div>
</li>
</ol>Compatta
Mostra il codice HTMLNascondi il codice HTML
<ol class="timeline timeline-vertical timeline-snap-icon timeline-compact ita-timeline">
<li>
<div class="timeline-start">
<p>3 marzo</p>
</div>
<div class="timeline-middle"><span><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M20.5,5h-17C2.7,5,2,5.7,2,6.5v11C2,18.3,2.7,19,3.5,19h17c0.8,0,1.5-0.7,1.5-1.5v-11C22,5.7,21.3,5,20.5,5z M20.2,6 l-7.1,7.2c-0.6,0.6-1.6,0.6-2.2,0L3.8,6H20.2z M3,17.3V6.6L8.3,12L3,17.3z M3.7,18L9,12.7l1.2,1.2c1,0.9,2.6,0.9,3.6,0l1.2-1.2l0,0 l5.3,5.3H3.7z M15.7,12L21,6.6v10.7L15.7,12z" /></svg></span></div>
<div class="timeline-end">
<h3>Domanda inviata</h3>
<p>Protocollo n. 2026/1234.</p>
</div>
<hr>
</li>
<li class="ita-timeline-now" aria-current="step">
<hr>
<div class="timeline-start">
<p>10 marzo</p>
<span class="ita-timeline-badge">Oggi</span>
</div>
<div class="timeline-middle"><span><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M15.7,2H7.5C6.7,2,6,2.7,6,3.5V4H5.5C4.7,4,4,4.7,4,5.5v15C4,21.3,4.7,22,5.5,22h11c0.8,0,1.5-0.7,1.5-1.5V20h0.5 c0.8,0,1.5-0.7,1.5-1.5V6.3L15.7,2z M16,3.7L18.3,6h-1.8C16.2,6,16,5.8,16,5.5V3.7z M17,20.5c0,0.3-0.2,0.5-0.5,0.5h-11 C5.2,21,5,20.8,5,20.5v-15C5,5.2,5.2,5,5.5,5H6v13.5C6,19.3,6.7,20,7.5,20H17V20.5z M18.5,19h-11C7.2,19,7,18.8,7,18.5v-15 C7,3.2,7.2,3,7.5,3H15v2.5C15,6.3,15.7,7,16.5,7H19v11.5C19,18.8,18.8,19,18.5,19z M9,9h8v1H9V9z M9,11h8v1H9V11z M9,13h4v1H9V13z" /></svg></span></div>
<div class="timeline-end">
<h3>Istruttoria</h3>
<p>L'ufficio sta verificando i documenti.</p>
</div>
<hr>
</li>
<li class="ita-timeline-future">
<hr>
<div class="timeline-start">
<p>entro 30 aprile</p>
</div>
<div class="timeline-middle"><span><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M17.1,7.9l0.7,0.7L10,16.2l-4.7-4.6L6,10.9l4,3.9L17.1,7.9z M22,12c0,5.5-4.5,10-10,10S2,17.5,2,12S6.5,2,12,2S22,6.5,22,12z M21,12c0-5-4-9-9-9s-9,4-9,9s4,9,9,9S21,17,21,12z" /></svg></span></div>
<div class="timeline-end">
<h3>Esito</h3>
</div>
</li>
</ol>Su sfondo primario
Il contenitore ha la classe it-surface-primary: i token si scambiano (base diventa primary, primary diventa primary-content) e il componente si adatta senza opzioni.
Mostra il codice HTMLNascondi il codice HTML
<div class="it-surface-primary rounded-box p-6"><ol class="timeline timeline-vertical timeline-snap-icon max-md:timeline-compact ita-timeline">
<li>
<div class="timeline-start">
<p>Maggio 2024</p>
</div>
<div class="timeline-middle"><span><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M19,3H5C3.9,3,3,3.9,3,5v10c0,1.1,0.9,2,2,2h2v5.4l1.7-1.7l3.7-3.7H19c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M20,15 c0.1,0.5-0.3,0.9-0.8,1c-0.1,0-0.1,0-0.2,0h-7l-4,4v-4H5c-0.5,0.1-0.9-0.3-1-0.8c0-0.1,0-0.1,0-0.2V5C3.9,4.5,4.3,4.1,4.8,4 C4.9,4,4.9,4,5,4h14c0.5-0.1,0.9,0.3,1,0.8c0,0.1,0,0.1,0,0.2V15z M9,10c0.1,0.5-0.3,0.9-0.8,1c-0.1,0-0.1,0-0.2,0 c-0.5,0.1-0.9-0.3-1-0.8c0-0.1,0-0.1,0-0.2C6.9,9.5,7.3,9.1,7.8,9C7.9,9,7.9,9,8,9c0.5-0.1,0.9,0.3,1,0.8C9,9.9,9,9.9,9,10z M13,10 c0,0.6-0.4,1-1,1s-1-0.4-1-1s0.4-1,1-1S13,9.4,13,10z M17,10c0,0.6-0.4,1-1,1c-0.6,0-1-0.4-1-1s0.4-1,1-1C16.6,9,17,9.4,17,10z" /></svg></span></div>
<div class="timeline-end">
<h3>Consultazione pubblica</h3>
<p>Cittadini e associazioni hanno inviato oltre 1.200 contributi.</p>
<a href="#">Leggi il report<svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M13.9,5.4l-0.7,0.7l5.3,5.4H3v1h15.5l-5.3,5.4l0.7,0.7l6.6-6.6L13.9,5.4z" /></svg></a>
</div>
<hr>
</li>
<li class="ita-timeline-now ita-timeline-evidence" aria-current="step">
<hr>
<div class="timeline-start">
<p>Settembre 2026</p>
<span class="ita-timeline-badge">Oggi</span>
</div>
<div class="timeline-middle"><span><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M7.7,5c0.6,0,1.2,0.2,1.7,0.5c1.1,0.6,1.7,1.8,1.6,3c-0.1,0.9,0.2,1.8,0.8,2.4l6.3,6.3c0.4,0.3,0.5,0.9,0.2,1.3 c-0.2,0.3-0.5,0.5-0.8,0.5c-0.3,0-0.5-0.1-0.7-0.3l-6.4-6.4c-0.6-0.5-1.3-0.8-2.1-0.8H7.7c-0.8,0-1.7-0.4-2.2-1h2.7V6.4H5.1 c0.3-0.4,0.6-0.8,1.1-1C6.7,5.1,7.2,5,7.7,5 M7.7,4C7,4,6.3,4.2,5.7,4.5C4.6,5.1,3.8,6.2,3.6,7.4h3.6v2.1H3.7 c0.2,0.7,0.6,1.3,1,1.8c0.8,0.8,1.9,1.2,3,1.2h0.6c0.5,0,1,0.2,1.4,0.5l6.4,6.4c0.4,0.4,0.9,0.6,1.4,0.6c0.7,0,1.3-0.3,1.6-0.9 c0.6-0.8,0.4-1.9-0.3-2.6l-6.3-6.3c-0.4-0.4-0.6-1-0.5-1.6c0.1-1.6-0.7-3.1-2-4C9.3,4.2,8.5,4,7.7,4z" /></svg></span></div>
<div class="timeline-end">
<h3>Apertura del cantiere</h3>
<p>I lavori sono in corso nei quartieri nord.</p>
</div>
<hr>
</li>
<li class="ita-timeline-future">
<hr>
<div class="timeline-start">
<p>Marzo 2027</p>
</div>
<div class="timeline-middle"><span><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M17.1,7.9l0.7,0.7L10,16.2l-4.7-4.6L6,10.9l4,3.9L17.1,7.9z M22,12c0,5.5-4.5,10-10,10S2,17.5,2,12S6.5,2,12,2S22,6.5,22,12z M21,12c0-5-4-9-9-9s-9,4-9,9s4,9,9,9S21,17,21,12z" /></svg></span></div>
<div class="timeline-end">
<h3>Collaudo</h3>
<p>Verifica tecnica delle nuove infrastrutture.</p>
</div>
</li>
</ol></div>