Vertical Timeline

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

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.

Categories

• Data Display > Timeline

Bug report & feedback

Component Github page ↗