# 卡片

纯样式组件：不需要 JS，写好标记即可。带边框、圆角、阴影的内容容器。可只放一个标题和内容，也可用 zh-card--flush 配头部、正文、底部、封面图；整张卡片可点时用 zh-card--hover。

**依赖**：`zhaoui.css` 与 `zhaoui.js`（原生 HTML、CSS、JS，不需要框架或 jQuery）。

## 用法

```html
<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`、`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` | <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--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。