下一步拼格 <StepGrid />
上排一大塊強調色標題和一塊圖案塊，下排三塊步驟（時間、標題、說明、小注），最後一塊用深色。為熒光格風格設計，其他風格也能用。配 build: 'reveal' 逐塊亮起。
- 分組
- 收尾 · 大標題塊加三塊步驟
- 元件
StepGrid·#step-grid- 互動
- 按 → 逐塊亮起
適合
- 結尾的下一步、行動計畫
- 三件事有先後
不適合
- 步驟超過 3 個：用 Roadmap
- 只是總結要點：用 Closing
內容上限
| 1 | steps 正好 3 個 |
| 2 | when ≤ 8 字，title ≤ 10 字，body ≤ 40 字，meta ≤ 16 字元 |
| 3 | title ≤ 2 行 × 8 字 |
欄位
| 欄位 | 型別 | |
|---|---|---|
kicker · 必填 | string | 小節名 |
title · 必填 | string | string[] | 標題 |
lead | string | 導語 |
steps · 必填 | { when, title, body, meta? }[] | 三個步驟 |
source | string | 出處 |
範例程式碼
<StepGrid
kicker="下一步"
title="三步做一份"
steps={[{ when: '今天', title: '建一個專案', body: '…', meta: 'pcafe init' }, …]}
/>