Go to homepage

Projects /

Vertical Timeline

A vertical timeline used to display a sequence of events/steps

View Demo

How to

The Vertical Timeline component is used to display a list of events in chronological order.

The component includes the following custom properties:

:root {
  --v-timeline-marker-size: 16px; // dot size
  --v-timeline-track-width: 2px; // vertical track (line) width
  --v-timeline-triangle-size: 12px; // triangle indicator size
  --v-timeline-sections-gap: var(--space-lg); // gap between sections (section = marker + item/s)
  --v-timeline-items-gap: var(--space-sm); // gap between items (if there are more than one within same date)

⭐️ Icons by Nucleo.


Bug report & feedback

Component Github page ↗

Project duplicated

Project created

Globals imported

There was an error while trying to export your project. Please try again or contact us.