格子聚焦 <BentoSpotlight />
标题下一组格子：左边高格是图标、标题和说明，右上两格数字，右下宽格是等宽字的键值行。
Template and style descriptions are currently available in Chinese only.
- Group
- 说明 · 一个功能讲透
- Component
BentoSpotlight·#bento-spotlight
Good for
- 介绍一个功能、一个文件、一条命令
- 有两个关键数字和 3–4 行键值
Avoid when
- 多个并列功能：用 IconGrid
- 数字是主角：用 StatRow
Content limits
| 1 | hero.title ≤ 10 字，hero.text ≤ 60 字 |
| 2 | cells 正好 2 个：value ≤ 8 字符，note ≤ 18 字 |
| 3 | rows.items 3–4 行：k ≤ 16 字符，v ≤ 22 字 |
| 4 | title ≤ 1 行 × 14 字 |
Fields
| Field | Type | |
|---|---|---|
kicker · required | string | 小节名，2–8 字 |
title · required | string | string[] | 标题；数组手动断行 |
lead | string | 一两句导语，≤ 60 字 |
source | string | 事实出处 |
hero · required | { icon, label, title, text } | 左边高格 |
cells · required | [cell, cell] | 两个数字格，第一个用强调色 |
rows · required | { label, items: { k, v }[] } | 键值行 |
Example
<BentoSpotlight kicker="构建" title="断网也能放映" hero={{ icon: 'file-check', label: 'dist/index.html', title: '一个离线文件', text: '…' }} cells={[…]} rows={{ label: 'NPM SCRIPTS', items: [{ k: 'npm run check', v: '…' }] }} />