卡片 Card

把一组相关信息放进同一个容器。卡片是页面里最常用的容器，服务卡片、表单分组、结果页都基于它。

基础卡片

examples/card/basic.html

rounded-xl border border-border bg-card p-6 text-card-foreground

• 静止状态不加阴影，靠 1px 描边区分层级
• 整张卡片可点击时，用 <a> 包裹，悬停加 hover:shadow-lg hover:shadow-navy/5
• 图标块：size-11 rounded-lg bg-navy text-navy-foreground，图标 size-5

列表卡片

头部与底部使用 bg-muted 条带，中间是 divide-y 分隔的可点击行。适合业务总览、设置列表。

examples/card/list.html

表单分组

长表单按主题拆成多张卡片，每张卡片有眉题、标题、说明。

examples/card/form-section.html

结果卡片

提交成功、审核失败、支付完成等流程终点。图标 56px 居中，下方是标题、说明与操作按钮。

examples/card/result.html

使用建议

推荐

• 卡片内边距统一 24px（p-6），侧栏等紧凑场景可用 20px（p-5）
• 同一行的卡片用 h-full 保持等高，底部操作用 mt-auto 贴底

避免

• 卡片套卡片（需要分组时用 border-t 或 bg-muted 条带）
• 在卡片上叠加多种阴影

无障碍

• 可点击卡片内只保留一个链接，避免嵌套交互元素
• 卡片标题使用合适的标题层级（h2 / h3），不要只用加粗的 div

与 v2 的差异

v2 现状	规范
侧栏 p-5、卡片 p-6、结果页 px-6 py-16 各自定义	默认 p-6，紧凑 p-5，结果页 py-12
服务卡片的对勾用 text-sky，白底上对比度只有 2.3	改为 text-brand