Timeline

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 in Multiple Timeline.

Completed event
10. september 2021
Current event
Upcoming event

Timeline with multiple timeline items passed down as children:

Passing down timeline items as children

Completed event
10. september 2021
Current event
Upcoming event

Examples of Timelines with one timeline item:

Completed timeline item:

Completed event

Current timeline item:

Current event

Upcoming timeline item:

Upcoming event

Setting property state of timeline item:

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

Completed event
10. september 2021
Current event
10. september 2021
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

Completed event
Current event
Upcoming event

Timeline skeleton:

Upcoming
10. september 2021
Current
11. september 2021
Completed
12. september 2021

Timeline as children skeleton:

Upcoming
10. september 2021
Current
11. september 2021
Completed
11. september 2021

Timeline item skeleton:

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

Timeline with multiple completed timeline items:

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

Timeline with multiple current timeline items:

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

Timeline with multiple upcoming timeline items:

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