Timeline
Timeline shows a series of content in chronological order
Overview
Timelines can be used to display a series of content or events in chronological order.
Usage
Timeline connects each TimelineItem using nodes and separators. The children of the TimelineItem are displayed to the right of the node and can contain whatever you like.
Variations
Custom node
By default, timeline items use a TimelineDot for each node in the timeline, but this can be customised using the node property.
The node of each timeline item appears on top of it's separator on the z index so any custom node should have a background colour and relative position. All nodes should be the same width.
Custom separator
By default, timeline items use a TimelineSeparator to connect each node in the timeline, but this can be customised using the separator property.
It's best to customise the default TimelineSeparator which includes several base css properties.
Properties
Timeline
| Name | Values | Default |
|---|---|---|
... | JSX.IntrinsicElements["ol"] |
TimelineItem
| Name | Values | Default |
|---|---|---|
node | ReactNode | <TimelineDot /> |
separator | ReactNode | <TimelineSeparator /> |
... | JSX.IntrinsicElements["li"] |