COMPONENT 60 · Content & Media
卡片
Card
也叫Content CardTilePanel内容卡片
把一个主题的标题、内容和操作组织成独立视觉单元。
Groups a single topic's title, content, and actions into a distinct visual unit.
ANATOMY & USAGE
结构与使用建议
组成部分
- 容器
- 标题与媒体
- 正文与操作
适合使用
- 列表中每项有清晰边界且包含多种内容时。
不建议使用
- 每行只有简单文本，或把所有卡片都做成巨大点击目标时。
键盘与无障碍
- 保持语义标题层级；若整卡可点击，内部不要再嵌套交互控件。
DESCRIBE IT TO AI
这样告诉编程助手
实现卡片（Card）：把一个主题的标题、内容和操作组织成独立视觉单元。
MINIMAL RUNNABLE CODE
可复制代码
原生与 React 两套实现，不依赖第三方组件库。
READ ONLY · SAFE TO COPY
<article class="demo stack">
<strong>卡片</strong>
<p>把一个主题的标题、内容和操作组织成独立视觉单元。</p>
<div class="row">
<button type="button">上一个</button>
<button type="button">下一个</button>
</div>
</article>