卡片

带边框、圆角、阴影的内容容器。可只放一个标题和内容，也可用 zh-card--flush 配头部、正文、底部、封面图；整张卡片可点时用 zh-card--hover。

纯样式核心包

示例

基础卡片

容器负责边界与留白，内容由业务决定。

品牌默认

发布确认

确认后文章将立即对外可见。

活跃用户

12.4 万

+8.2%较上周

进入项目

查看成员、进度与最近动态。

在线试用 Markdown 版

代码

<div class="zh-stack">
  <div class="zh-card">
    <h4>基础卡片</h4>
    <p>容器负责边界与留白，内容由业务决定。</p>
    <div class="zh-cardx-meta"><span class="zh-tag primary">品牌</span><span class="zh-tag">默认</span></div>
  </div>

  <div class="zh-card zh-card--flush" style="max-width:22rem">
    <div class="zh-cardx-cover"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3Crect width='16' height='9' fill='%23c7d2fe'/%3E%3C/svg%3E" alt="设计语言 2.0 的封面"></div>
    <div class="zh-cardx-head"><h4 class="zh-cardx-title">发布确认</h4><div class="zh-cardx-extra"><button class="zh-btn sm text">全部</button></div></div>
    <div class="zh-cardx-body">确认后文章将立即对外可见。</div>
    <div class="zh-cardx-foot"><button class="zh-btn sm">取消</button><button class="zh-btn sm primary">发布</button></div>
  </div>

  <div class="zh-card">
    <div class="zh-cardx-stat-label">活跃用户</div>
    <strong>12.4 万</strong>
    <div class="zh-cardx-stat-foot"><span style="color:var(--zh-trend-up)">+8.2%</span><span class="zh-hint">较上周</span></div>
  </div>

  <a class="zh-card zh-card--hover" href="#"><h4>进入项目</h4><p>查看成员、进度与最近动态。</p></a>
</div>

属性

属性	用在	取值	说明
`zh-card`	<div>（class）	内部可放 <h4> 作标题	基础卡片：内边距、边框、圆角、阴影随受众与密度变化
`zh-card--flush`	与 zh-card 一起	配合下面的 zh-cardx-* 分区	去掉内边距，由 head / body / foot 各自控制；溢出裁切，封面图贴边
`zh-cardx-head / -title / -extra`	flush 卡片内	标题在左，-extra 里放右侧操作按钮	卡片头部
`zh-cardx-body / -foot`	flush 卡片内	-foot 里放右对齐的按钮	正文与底部操作区
`zh-cardx-cover`	flush 卡片内	里面放一张 <img alt="…"> 或一个 <svg>	封面区域：16:9 比例、浅色底，里面的图片或 SVG 撑满并裁切；放在卡片最上面
`zh-cardx-meta`	卡片内	里面放 zh-tag	一行标签或元信息
`zh-cardx-stat-label / -stat-foot`	基础卡片内	label 是指标名，foot 放趋势与说明	指标卡的两端；中间的数字自己写（用 --zh-text 等变量），库不提供数字样式
`zh-card--hover`	写在 <a> 上，与 zh-card 一起	href 指向目标	整张卡片是链接：悬停上浮并描边，键盘聚焦有聚焦环

样式类

zh-card　zh-card--flush　zh-card--hover　zh-cardx-head　zh-cardx-title　zh-cardx-extra　zh-cardx-body　zh-cardx-foot　zh-cardx-cover　zh-cardx-meta　zh-cardx-stat-label　zh-cardx-stat-foot

zh-card--hover 应该是真正的 <a href>，这样键盘可聚焦、屏幕阅读器读作链接
卡片标题请用合适的标题级别（<h4> 只是样式默认，按页面结构调整）
装饰性封面图保持 aria-hidden="true"；有信息量的图片请放 <img alt>
zh-card--select（选择型卡片）的样式在 CSS 里，但选中行为没有提供，不要使用

常见问题

卡片是什么？

带边框、圆角、阴影的内容容器。可只放一个标题和内容，也可用 zh-card--flush 配头部、正文、底部、封面图；整张卡片可点时用 zh-card--hover。

怎么使用卡片？

先在页面里引入 zhaoui.css 和 zhaoui.js（放在 </body> 前，不加 defer），再照本页「用法」里的标记书写。

卡片支持键盘和读屏吗？

zh-card--hover 应该是真正的 <a href>，这样键盘可聚焦、屏幕阅读器读作链接；卡片标题请用合适的标题级别（<h4> 只是样式默认，按页面结构调整）；装饰性封面图保持 aria-hidden="true"；有信息量的图片请放 <img alt>。

卡片需要依赖框架吗？

不需要。ZhaoUI 是原生 HTML、CSS 和 JavaScript，不依赖 jQuery、Vue 或 React。

卡片

示例