#Timeline

#Import

import { Timeline } from '@dnb/eufemia'

#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 messages when needed, and each step has three states (completed, current, or upcoming).

#Relevant links

• Figma
• Source code
• Docs code

#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.

#Timeline with multiple timeline items passed down as children:

Passing down timeline items as children

#Examples of Timelines with one timeline item:

#Completed timeline item:

#Current timeline item:

#Upcoming timeline item:

#Setting property state of timeline item:

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

#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

#Timeline skeleton:

#Timeline as children skeleton:

#Timeline item skeleton:

#Timeline with multiple completed timeline items:

#Timeline with multiple current timeline items:

#Timeline with multiple upcoming timeline items: