Design System v1.0

Timeline

A vertical sequence of events with status dots and connectors.

Site activity

Completed, in-progress, and pending events with status dots.

  • Meter provisioned

    Toronto DC · main electricity meter online
  • Baseline established

    14-day interval baseline computed
  • DR event dispatched

    IESO Ontario · 480 kW curtailment target
  • Settlement pending

    Awaiting IESO performance report

API reference

A vertical sequence of events. Each TimelineItem pairs a status TimelineDot with a TimelineHeading and TimelineContent, connected by a TimelineLine.

Anatomy
TimelineRoot list; positions dots left, right, or center.
TimelineDotThe status marker: default, current, done, error, or custom.
TimelineItemOne event row; status tints the text done or default.
TimelineContentThe event body / description.
TimelineHeadingThe event title.
TimelineLineThe connector drawn between consecutive dots.
TimelineTagAn optional side label aligned to the dot.
Props
PartPropTypeDefault
Timelinepositions"left" | "right" | "center"

Command Palette

Search for a command to run...