Timeline
A Timeline lists events over a period of time.
- To track an issue over time
- To show events associated with an item
- To guide users through a step by step process, use a Stepper instead
How to use it
Default
The Timeline component is made up of individual Timeline items. Item content appears after the item marker by default.
Alternating
Items are displayed on alternating sides of the Timeline.
Custom media
The item marker can also be replaced with another icon, image, or avatar.
Opposite content
In the opposite layout, a second content area is present on the opposite side of the Timeline.
How to use it well
Nest content when necessary
Components such as links, buttons, and images can be nested in each Timeline item.
Do include images and other nested content if appropriate.
Make interactive elements explicit
Creating a visual affordance for a link or action is preferred to making the entire item interactive.
Create explicit visual affordances for interactive items.
Don’t rely on hover states to show that items are interactive.
Use correct hierarchy
Item content can be replaced with any text style. Make sure to use appropriate hierarchy when designing your content.
Use balanced and appropriate typographic hierarchy.
Don’t mix up typographic hierarchy when customizing item content.
Configuration
- Name9.0.0-next.26•View source•View on npm
- Installnpm install @zendeskgarden/react-accordions
- Depsnpm install react react-dom styled-components @zendeskgarden/react-theming
- Importimport { Timeline } from '@zendeskgarden/react-accordions'
API
The Timeline component follows this structure:
<Timeline><Timeline.Item><Timeline.OppositeContent /> {/* Optional */}<Timeline.Content /></Timeline.Item>{/* other items */}</Timeline>
Timeline
Extends OlHTMLAttributes<HTMLOListElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
isAlternate | boolean | Applies alternate styling |
Timeline.Content
Extends HTMLAttributes<HTMLDivElement>
Nest the Content within an Item component.
Timeline.Item
Extends LiHTMLAttributes<HTMLLIElement>
An Item provides the DOM structure and styling for the default, OppositeContent, and alternate content layouts.
| Prop name | Type | Default | Description |
|---|---|---|---|
icon | ReactElement<any, string | JSXElementConstructor<any>> | Replaces the dot with an icon | |
surfaceColor | string | Provides surface color for an icon placed on a non-default background. Accepts a color variable key (i.e. background.recessed) to render based on light/dark mode, or any hex value. |
Timeline.OppositeContent
Extends HTMLAttributes<HTMLDivElement>
The OppositeContent component displays content on the opposite side of the separator. Nest it within an Item component.