Number tiles <NumberTiles />
A row of tall colour blocks, each with a huge number above and a title and one-line description below. In the stencil style the four colours are ochre, magenta, orange and cyan; other styles use the card colour and accent-coloured numbers. With build: 'reveal' the blocks appear one by one.
- Group
- Content · 3–4 tall colour blocks, each with a huge number
- Component
NumberTiles·#number-tiles- Interaction
- Press → blocks appear one by one
Good for
- Principles, rules or phases, 3–4 of them
- One sentence is enough for each
Avoid when
- Each one needs a longer explanation: use NumberedColumns
- There are more than 4
Content limits
| 1 | tiles 3–4 |
| 2 | title ≤ 10 chars |
| 3 | body ≤ 36 chars |
| 4 | slide title ≤ 22 chars |
Fields
| Field | Type | |
|---|---|---|
kicker · required | string | Section label |
title · required | string | string[] | Title |
lead | string | Lead |
tiles · required | { title, body }[] | Colour blocks |
source | string | Source |
Example
<NumberTiles
kicker="规矩"
title="先守规矩，再谈好看"
tiles={[{ title: '只组合模板', body: '…' }, …]}
/>