Timeline
import { Timeline } from '@enmovil/ui-design-system';
A vertical timeline of events built from items. Events can alternate sides, use custom colours and contain rich content.
Properties
| Property | Type | Required | Default | Allowed values | Description |
|---|---|---|---|---|---|
className | string | No | — | — | Extra CSS class added to the timeline, inside the component's own wrapper element. |
reverse | boolean | No | — | — | Lists the items in reverse order. Off by default. |
mode | string | No | — | 'left', 'right', 'alternate' | alternate places the items on alternating sides of the line; left and right keep them on one side. Without it, all items sit on one side. |
items | TimelineItemProps[] | No | — | — | The events, in order. Each has children for its content and can set color for its dot, dot for a custom dot and label for text on the other side of the line. |
Other attributes
Timeline passes 5 further attributes through to the underlying element. They aren't part of the supported API and may change between releases, so use only the properties listed on this page.
Events
This component has no events.
Children
Timeline does not accept children.
Variants
Loading examples…
Playground
Change the controls to see how the properties affect the component. Values the controls don't cover come from the Default example.
Loading playground…
Storybook
Open Timeline in Storybook to try every story with the full set of controls.