data contract

Timeline

Vertical list of events ordered chronologically.

Variants

  • default
  • icon
  • numbered

Sizes

  • sm
  • md

Slots

  • marker
  • title
  • time
  • body

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.

Get the Timeline contract in your project.