data contract
Timeline
Vertical list of events ordered chronologically.
Variants
- default
- Bullet markers
- icon
- Icon markers per item
- numbered
- Step numbers — onboarding history
Sizes
- sm
- md
Slots
- marker
- Bullet / icon / number
- title
- time
- Relative or absolute timestamp
- body
- Optional body content
Example
<Timeline>{events.map((e) => <TimelineItem key={e.id} title={e.title} time={e.createdAt} />)}</Timeline>Usage rule
Use <ol> + <li>; the list IS ordered.
The full Timeline contract has 4 more rules, plus the do-not patterns. Get the full recipe.