🎉 Black Friday deal! 30% off your first year of CodyHouse Pro →


Progress value is 30%

Vertical Timeline

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

View Demo


All components are based on CodyFrame.

This component includes variations. Variations share the same SCSS/JS code but differ in their HTML.

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.

✅ Project duplicated

✅ Project created

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