Components

Timeline

Events in order along a rail: a marker, a title, a time and optional detail.

Storybook: Storybook
Source: Source

States

Tone	Marker	Tokens
`neutral`	Grey dot	`color-surface-layer-2`, `color-border-strong`
`brand`	Brand dot	`color-status-brand-background`, `color-status-brand-emphasis`
`info`	Info background and dot	`color-status-info-background`, `color-status-info-emphasis`
`success`	Success background and dot	`color-status-success-background`, `color-status-success-emphasis`
`warning`	Warning background and dot	`color-status-warning-background`, `color-status-warning-emphasis`
`danger`	Danger background and dot	`color-status-danger-background`, `color-status-danger-emphasis`

Measurements

Property	Value	Token
Marker	24 px	`timeline-marker-size`
Dot	40% of the marker	`timeline-marker-size`
Rail thickness	2 px	`timeline-rail-thickness`
Marker to text	8 px	`space-md`
Between events	16 px	`space-xl`

Tokens

Values are shown for the selected brand; switch brands from the top bar.

Token	Sample	Light mode	Dark mode
`--bigbang-timeline-marker-size`		`24px24px24px`	`24px24px24px`
`--bigbang-timeline-rail-thickness`		`2px2px2px`	`2px2px2px`
`--bigbang-color-border-subtle`		`#ededed#ededed#ededed`	`#303030#303030#303030`
`--bigbang-color-status-info-background`		`#e1f1ff#e1f1ff#e1f1ff`	`#0d304b#0d304b#0d304b`
`--bigbang-color-status-success-background`		`#def6e5#def6e5#def6e5`	`#103620#103620#103620`
`--bigbang-color-status-warning-background`		`#ffebd5#ffebd5#ffebd5`	`#422702#422702#422702`
`--bigbang-color-status-danger-background`		`#ffe8e7#ffe8e7#ffe8e7`	`#4c1d1d#4c1d1d#4c1d1d`
`--bigbang-space-md`		`8px8px8px`	`8px8px8px`
`--bigbang-space-xl`		`16px16px16px`	`16px16px16px`

Motion and interaction

Interaction	Property	Duration token	Easing token	Reduced motion
First view	Events enter in turn, moving 4 px (`motion.listItem`)	`motion-list-enter-duration`, `motion-list-stagger`	`easing-productive-enter`	They only fade.