- 分组
- 收尾 · 下一步做什么
- 组件
CtaBlock·#cta-block- 交互
- build 模式下每按一次 → 出现一个步骤
适合
- 讲完之后告诉听众怎么开始、去哪里、敲什么命令
- 有一个明确的地址或命令
不适合
- 只想总结观点：用 Closing 或 Recap
- 步骤超过 4 个：用 StepTrack
内容上限
| 1 | title 1–2 行，每行 ≤ 10 字 |
| 2 | lead ≤ 50 字 |
| 3 | command ≤ 44 个字符；commandLabel ≤ 10 字 |
| 4 | actions 1–3 个，label ≤ 10 字 |
| 5 | steps 2–4 个：title ≤ 10 字，body ≤ 30 字 |
字段
| 字段 | 类型 | |
|---|---|---|
kicker · 必填 | string | 标题上方的小节名，2–8 字 |
title · 必填 | string | string[] | 页面标题；传数组可手动断行，每项一行 |
lead | string | 一到两句导语，≤ 60 字 |
source | string | 事实出处；页面上有任何数据或事实时必填 |
hint | ReactNode | 页眉中间的操作提示，可用 <kbd> |
command | string | 复制框里的地址或命令 |
commandLabel | string | 复制框上方标签 |
actions | { label, kind?: 'primary' | 'ghost' | 'code', icon? }[] | 画出来的按钮 |
steps · 必填 | { title, body }[] | 编号步骤 |
示例代码
<CtaBlock kicker="开始使用" title={['先在 U 盘上', '试一试']} command="fedoraproject.org/workstation/download" actions={[{ label: '下载 Workstation' }]} steps={[{ title: '制作启动盘', body: '…' }, …]} />