Timeline verticale responsive
Linea del tempo ordinata per presentare fasi, tappe, lezioni o aggiornamenti.
Quando si usa
Quando devi presentare una sequenza di fasi, una storia, un programma o gli step di una procedura.
Perché si usa
La timeline rende immediata la relazione temporale tra gli elementi e mantiene l'ordine anche su schermi piccoli.
Vantaggi principali
- Buona per programmi e cronologie
- Responsive senza script
- Punti e linea facilmente personalizzabili
Anteprima del risultato
Una sequenza ordinata con linea verticale e punti di avanzamento.
- AnalisiRaccolta dei contenuti.
- SviluppoCreazione delle pagine.
- PubblicazioneControllo e messa online.
Codice completo
Puoi copiare il frammento e inserirlo in una pagina di prova. Prima della pubblicazione sostituisci i dati dimostrativi con quelli reali.
<ol class="timeline">
<li><strong>Analisi</strong><span>Raccolta dei contenuti.</span></li>
<li><strong>Sviluppo</strong><span>Creazione delle pagine.</span></li>
<li><strong>Pubblicazione</strong><span>Controllo e messa online.</span></li>
</ol>
<style>
.timeline{list-style:none;margin:0;padding:0 0 0 26px;border-left:3px solid #d8e1ec}
.timeline li{position:relative;margin:0 0 22px;padding-left:18px}
.timeline li::before{content:"";position:absolute;left:-35px;top:4px;width:14px;height:14px;border-radius:50%;background:#2463a9;border:3px solid #fff;box-shadow:0 0 0 2px #2463a9}
.timeline strong{display:block;color:#173b6d}
.timeline span{display:block;color:#53657a}
</style>Da personalizzare: Titoli, descrizioni, colore della linea, distanza tra gli elementi e numero di passaggi.
Errore da evitare: Non usare una timeline per contenuti non sequenziali: in quel caso è meglio una griglia o una lista semplice.