Skip to content

Description

A timeline shows events in chronological order and gives a great overview of the overall process. The component itself has interchangeable icons, additional info message when needed, and a step has three states(completed, current or upcoming).

Demos

Timeline with multiple timeline items:

We can pass down a list of timeline items as a variable to data.

It's also possible to pass down timeline items as children, see example.

  1. Completed event
    10. september 2021
  2. Current event
  3. Upcoming event

Timeline with multiple timeline items passed down as children:

Passing down timeline items as children

  1. Completed event
    10. september 2021
  2. Current event
  3. Upcoming event

Examples of Timelines with one timeline item:

Completed timeline item:

  1. Completed event

Current timeline item:

  1. Current event

Upcoming timeline item:

  1. Upcoming event

Setting property state of timeline item:

Property state changes styling of icon, border, and font of the timeline item

  1. Completed event
    10. september 2021
  2. Current event
    10. september 2021
  3. Upcoming event
    10. september 2021

Setting property icon of timeline items:

Property icon is by default set based on the value of state property, but can be overwritten by passing a icon, see how to import icons.

See default icons based on value of state property in documentation for icon property of the timeline item

  1. Completed event
  2. Current event
  3. Upcoming event

Timeline skeleton:

  1. Upcoming
    10. september 2021
  2. Current
    11. september 2021
  3. Completed
    12. september 2021

Timeline as children skeleton:

  1. Upcoming
    10. september 2021
  2. Current
    11. september 2021
  3. Completed
    11. september 2021

Timeline item skeleton:

  1. Completed event#1
    10. september 2021
  2. Completed event#2
    11. september 2021

Timeline with multiple completed timeline items:

  1. Completed event#1
    10. september 2021
  2. Completed event#2
  3. Completed event#3
    10. september 2021

Timeline with multiple current timeline items:

  1. Current event#1
    10. september 2021
  2. Current event#2
  3. Current event#3
    10. september 2021

Timeline with multiple upcoming timeline items:

  1. Upcoming event#1
    10. september 2021
  2. Upcoming event#2
  3. Upcoming event#3
    10. september 2021