Components Chart
kanban
Progression Timeline Series
Kanban board — columns of cards by stage.
Use for status snapshots: what's in each lane (todo/doing/done or similar). Each column is a stage; each card is a work item.
When to use
- Status snapshot by stage. When the audience needs to see what is in each lane right now — backlog, in progress, review, done. The board reads as the current state of the work, not its history or schedule.
- Mixed card density is informative. Lanes that bulge or thin out tell the story — a fat 'in progress' column flags a WIP overload; an empty 'review' column flags a handoff stall. The visual imbalance is the signal.
- Cards carry size and status meta. Trailing inline-code badges (
S/M/L/XL) sit in the title row; status pills (at-risk,blocked) push right on the meta row. The card stays scannable while the second channel of information rides along.
When not to use
- Schedule, not status. If the question is when each task ships rather than where it sits today, reach for
gantt(spans) orroadmap(phases). Kanban is a snapshot, not a timeline. - More than five lanes. Past five columns the cards compress and the column headers crowd. Group adjacent stages or split into two boards (e.g. by team) instead.
- Cards without meta. A board of bare titles wastes the layout's affordances. Add at least a size badge and a lane label so the audience can scan workload and ownership at a glance.
Slots
| Slot | Selector | Required | Description |
|---|---|---|---|
title | h2 | yes | Slide heading. |
lanes | ul > li | yes | Three levels. Outer li = column header as plain text (e.g. Backlog). Each inner li = a card: title then a trailing inline-code size badge (S/M/L/XL; other codes are left in the title). Each card may carry its own nested bullet = a categorical lane label, optionally with a trailing status pill, e.g. - platform at-risk. A column titled Done / Completed / Shipped / Closed dims its cards. Status vocabulary matches the shared chart set (on-track / done / live / at-risk / warn / blocked / fail / deferred / pilot / decision). |
Anatomy
┌─────────────────────────────────────────┐
│ header │
│ Kanban heading. │
│ │
│ TODO DOING DONE │
│ [card 1] [card 4] [card 7] │
│ [card 2] [card 5] [card 8] │
│ [card 3] [card 6] │
│ │
│ footer 1/19 │
└─────────────────────────────────────────┘