组件 · 内容 · 21
卡片
卡片 = 单个带内边距的表面，可含媒体区与底部操作，是内容分组的默认容器。
直达修改 Prompt →
Usage this week
12.4k prompts copied this month.
卡片是什么？
卡片是一块有边界的表面。写明圆角、内边距、媒体、标题和页脚操作。
变体
点击属性即可在预览中高亮。
-
- 卡片顶部的图片或视觉块，负责吸引视线。
-
- 以单一数字及其变化为核心的卡片，而非大段文字。
-
- 在可滚动区域内纵向排列多行的卡片（条目、会话、结果）。
-
- 组件的圆角程度，用 px 数值而非「圆一点」。
-
- 卡片内容区的内边距，决定视觉拥挤程度。
-
- 层次（elevation）提示：投影的偏移、模糊与透明度。
-
- 卡片底部的操作行（按钮、链接、元信息）。
状态
点击属性即可在预览中高亮。
-
- 输入或报错前字段的默认有效状态。
-
- 指针悬停时的反馈：抬起、变色或边框变化。写清楚，别让模型自己猜。
结构解剖
这些是 Prompt 里应该点名的部件。
- 01 媒体区
- 02 标题
- 03 正文
- 04 页脚操作
什么时候用
- 网格与列表中的可复用内容单元
- 仪表盘的指标摘要
- 商品或文章预览
什么时候别用
- 长文阅读——直接排版
- 零碎元信息——改用徽章或普通行
- 卡片里再嵌卡片
Create a content card.
STYLE
- 16px radius, 20px padding, hairline border
COMPONENTS
- title, body, footer action
TECHNICAL
- React
- Tailwind CSS
- shadcn/ui