#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

#Related components

Timeline is part of the Content category. Other components for similar needs:

• Accordion — to let people open and close sections of related content.
• Avatar — to make a person, company, or profile easier to recognize.
• Card — to group related content in a clear, separated area.
• CountryFlag — to show a country by its flag from an ISO country code.
• DateFormat — to show dates in the correct DNB format.
• Heading — to create accessible page headings with the correct level.

See all in Content →

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