Timeline
Events in order with a square marker and a hairline connector.
Examples
Timeline
- Published
Northlight v2 went live.
- Review requested
Mika asked for a second pair of eyes.
- Draft created
Started from the blank template.
Anatomy
ol.timeline | Ordered list of events, newest or oldest first as you choose. |
> li | One event: a square marker in the tone, joined to the next by a hairline. |
> time | The time, small and muted, in a fixed first column. |
> div | The event: a title (<b>) and an optional muted <p>. |
API
| Attribute | Values | Description |
|---|---|---|
data-tone | accentsuccesswarningdangerinfo | On an li: colours its marker. Default accent. |
Accessibility
- Use an
<ol>so the order is announced with the item count. - Give
<time>adatetimeattribute when the text is relative ("Yesterday"). - Marker colour is not announced; the event title carries what happened.