联系卡 <ContactPanel />
一张深色大圆角卡：左边标题、导语和承诺勾选项，右边一张白卡列出联系方式或入口，底部一条黑色行动条。
Template and style descriptions are currently available in Chinese only.
- Group
- 收尾 · 下一步怎么找到你
- Component
ContactPanel·#contact-panel
Good for
- 演示最后一页，给出明确的下一步
- 销售、合作、招募的收尾
Avoid when
- 没有真实可用的联系方式：用 Closing
- 需要放二维码：用 Thanks
Content limits
| 1 | title ≤ 2 行 × 10 字 |
| 2 | lead ≤ 50 字 |
| 3 | checks 2–3 条，每条 ≤ 18 字 |
| 4 | fields 2–4 项：label ≤ 8 字，value ≤ 28 个字符，只写真实地址 |
| 5 | action ≤ 14 字 |
Fields
| Field | Type | |
|---|---|---|
kicker · required | string | 小节名 |
title · required | string | string[] | 标题 |
lead | string | 导语 |
checks | string[] | 承诺 |
fields · required | { icon, label, value }[] | 联系方式 |
action · required | string | 行动条文字 |
Example
<ContactPanel
kicker="开始用"
title={['挑一种风格，', '写下一份演示']}
fields={[{ icon: 'gallery', label: '组件库', value: '#/kit' }]}
action="打开组件库挑风格"
/>