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