Timeline
The Timeline component is used to display items on a vertical Timeline, connected by Timeline elements.
Page navigation navigation
React
readyNot reviewed for a11y
Rails
readyNot reviewed for a11y
React examples
Default
This is a message
This is a message
This is a message
Clipped sidebar
This is a message
This is a message
This is a message
Condensed items
This is a message
This is a message
This is a message
With a break
Timeline breaks
The Timeline.Break component allows for content in Timeline to be visually seperated. This should be used for decorative purposes only. Since this component is decorative, it is not conveyed to assistive technologies like screen readers.
The content within Timeline.Item should clearly communicate the status and state of that item, so that if there is a need to seperate content, the context of the seperation is communicated in Timeline.Item.
This is a message
This is a message
This is a message
Props
Timeline
| Name | Required | Description |
|---|---|---|
clipSidebar | booleanHides the sidebar above the first Timeline.Item and below the last Timeline.Item. | |
sx | SystemStyleObject |
Timeline.Item
| Name | Required | Description |
|---|---|---|
condensed | booleanReduces vertical padding and removes background from an item's badge. | |
sx | SystemStyleObject |
Timeline.Badge
| Name | Required | Description |
|---|---|---|
sx | SystemStyleObject |
Timeline.Body
| Name | Required | Description |
|---|---|---|
sx | SystemStyleObject |
Timeline.Break
| Name | Required | Description |
|---|---|---|
sx | SystemStyleObject |