Components Chart
timeline-list
Evidence Timeline Series
Date-stamped event list — spine with date pills, status pills, and body.
Use for milestone history or annotated timelines. Each item gets a date pill on the left, status pill on the right, body in the middle.
When to use
- Milestones in time. Project history, regulatory deadlines, deployment phases, incident post-mortems — anywhere the sequence is in calendar time and each entry needs a date, a verdict, and a sentence of body. The date pill anchors the spine.
- Annotated, not just chronological. Reach for timeline-list when each milestone needs a status read (
decision,live,at-risk,done) AND a sentence of context. For a plain ordered list uselist-steps; for time-bound bars usegantt. - Four to seven entries. Below four the spine looks empty; past seven the body bullets compress. Trim the long tail or split the timeline by phase — a 'past' deck and a 'next' deck both read better than a twelve-item spine.
When not to use
- Date-less steps. If the items don't carry calendar dates, you have a sequence, not a timeline. Use
list-stepsfor an ordered list orjourneyfor stage-by-stage progress without a date axis. - Date-range bars. If each milestone needs a start and an end on a shared time axis, the slide is a Gantt chart. Use
gantt— the bar geometry will convey the durations the pill cannot. - Status pills as decoration. The status pill is a verdict —
decision,live,at-risk,blocked,done. Don't invent freeform tags; the engine only tints the recognised vocabulary, and decorative pills break the at-a-glance read.
Slots
| Slot | Selector | Required | Description |
|---|---|---|---|
title | h2 | yes | Slide heading framing the timeline. |
events | ol > li | yes | Ordered list (numbered). One li per event: a leading inline-code date pill, then the title, then an optional trailing inline-code status pill, then nested body bullets — e.g. 1. 2025 Q1 Framework approved decision. Status vocabulary: decision / live / at-risk / blocked / done / on-track / deferred. |
Anatomy
┌─────────────────────────────────────────┐
│ header │
│ Dated milestones heading │
│ │
│ ●─────────●─────────● │
│ 2024-01 2024-03 2024-05 │
│ Event one Event two Event three │
│ │
│ footer 1/19 │
└─────────────────────────────────────────┘