信封 <Envelope />
左边标题和导语,右边一个用 CSS 画的信封:第一步打开封口,第二步把信纸抽出来。可选纸纹贴图和邮票。
Template and style descriptions are currently available in Chinese only.
- Group
- 揭晓 · 一封信、一段公告
- Component
Envelope·#envelope- Interaction
- build: reveal 时第 1 步开封口,第 2 步抽出信纸
Good for
- 原文引用一封信、通知、公告
- 想营造“拆开来看”的揭晓感
Avoid when
- 信的内容超过 72 字:用 QuoteHero
- 内容是虚构的却没标明:必须在 sign 或 source 里写“示意”
Content limits
| 1 | title ≤ 3 行 × 8 字;lead ≤ 60 字 |
| 2 | greeting ≤ 12 字;body ≤ 72 字;sign ≤ 14 字 |
| 3 | stamp ≤ 4 个字符 |
| 4 | texture 只用 decor- 纸纹 |
Fields
| Field | Type | |
|---|---|---|
kicker · required | string | 小节名 |
title · required | string | string[] | 标题 |
lead | string | 导语 |
greeting · required | string | 信的称呼 |
body · required | string | 信的正文 |
sign · required | string | 落款 |
stamp | string | 邮票上的字 |
texture | string | import 进来的 decor- 纸纹 |
source | string | 事实出处 |
Example
<Envelope kicker="一封信" title={['一枚邮票,', '让信变便宜']} greeting="致每一位寄信人:" body="…" sign="示意信件" stamp="1d" texture={paper} source="…" />