Three priority columns <PriorityColumns />
A thick rule under the big title, then three full-height columns below, each with a huge number, a tag, a title and a description, with one column filled in the theme colour. Designed for the manifesto style; other styles work too. With build: 'reveal' the columns appear one by one.
- Group
- Content · three full-height columns, huge numbers, one column in the theme colour
- Component
PriorityColumns·#priority-columns- Interaction
- Press → columns appear one by one
Good for
- Three priorities, bottom lines or commitments
- A rallying talk, a manifesto or quarterly priorities
Avoid when
- There are not exactly three: use NumberedColumns
- Numbers are needed: use KpiBoard
Content limits
| 1 | items exactly 3 |
| 2 | tag ≤ 6 chars, title ≤ 10 chars, body ≤ 40 chars |
| 3 | title 1–2 lines, ≤ 8 chars per line |
| 4 | lead ≤ 50 chars |
Fields
| Field | Type | |
|---|---|---|
kicker · required | string | Section label |
title · required | string | string[] | Title |
lead | string | Lead |
items · required | { tag, title, body }[] | Three columns |
focus | number | Column in the theme colour, default 1 (middle) |
source | string | Source |
Example
<PriorityColumns
kicker="底线"
title={['写演示的', '三条底线']}
items={[{ tag: '版式', title: '只组合模板', body: '…' }, …]}
/>