---
title: 卡片与卡链 Card
url: https://ui.zhaozimin.com/components/card/
markdown: https://ui.zhaozimin.com/components/card.md
group: 组件
origin: 设计系统源码（src/system），本仓库是唯一源头
source:
  - src/system/styles/v4/controls.css  # https://ui.zhaozimin.com/src/system/styles/v4/controls.css
  - src/system/styles/v4/base.css  # https://ui.zhaozimin.com/src/system/styles/v4/base.css
version: v0.2.0  # 设计系统版本，发布于 2026-09-23
scope: .zzm-v4   # 根节点必须带这个类，否则样式不生效
css: https://ui.zhaozimin.com/v/0.2.0/zzm.css   # 锁版本地址，本仓库再改也不影响你
---

# 卡片与卡链 Card

> 两种容器：.zzm-card 是浮在纸上的白面板；.zzm-cardlink 是可点的内容卡——悬停时描边加深、上浮 3px、落下柔影。

## 浮起面板

### 样张 · .zzm-card

白面 · .09 细线 · 圆角 16 · 两层落影 + 顶部反光

React：

```jsx
export function Panel() {
  return (
    <div className="zzm-card" style={{ width: 320, padding: 24 }}>
      <div style={{ fontFamily: 'var(--zzm-mono)', fontSize: 10, letterSpacing: '1.5px', color: '#A2A29C' }}>本周</div>
      <div style={{ marginTop: 8, fontSize: 16, lineHeight: '24px', fontWeight: 650 }}>完成 6 节 · 共 92 分钟</div>
      <div style={{ marginTop: 4, fontSize: 12.5, lineHeight: '20px', color: '#72726E' }}>比上周多 2 节。</div>
    </div>
  )
}
```

HTML（构建时由上面的 React 渲染得到，可直接粘贴）：

```html
<div class="zzm-card" style="width: 320px; padding: 24px">
  <div style="font-family: var(--zzm-mono); font-size: 10px; letter-spacing: 1.5px; color: #a2a29c">
    本周
  </div>
  <div style="margin-top: 8px; font-size: 16px; line-height: 24px; font-weight: 650">
    完成 6 节 · 共 92 分钟
  </div>
  <div style="margin-top: 4px; font-size: 12.5px; line-height: 20px; color: #72726e">
    比上周多 2 节。
  </div>
</div>
```

## 可点卡链

课节、历史、收藏这类「点进去」的卡统一用 `.zzm-cardlink`：白卡承托、内距 12、内嵌图圆角 12。把鼠标移上去。

### 样张 · .zzm-cardlink

React：

```jsx
export function CardLink() {
  return (
    <a href="#lesson" className="zzm-cardlink" style={{ display: 'block', width: 280, textDecoration: 'none', color: 'inherit' }}>
      <div style={{ aspectRatio: '16/9', borderRadius: 12, background: '#131316' }} />
      <div style={{ margin: '12px 4px 4px', fontSize: 14, fontWeight: 600, lineHeight: '20px' }}>双链与反向链接</div>
      <div style={{ margin: '0 4px', fontSize: 12.5, lineHeight: '20px', color: '#8B8B85' }}>让想法第一次连起来。</div>
    </a>
  )
}
```

HTML（构建时由上面的 React 渲染得到，可直接粘贴）：

```html
<a
  href="#lesson"
  class="zzm-cardlink"
  style="display: block; width: 280px; text-decoration: none; color: inherit"
>
  <div style="aspect-ratio: 16/9; border-radius: 12px; background: #131316"></div>
  <div style="margin: 12px 4px 4px; font-size: 14px; font-weight: 600; line-height: 20px">
    双链与反向链接
  </div>
  <div style="margin: 0 4px; font-size: 12.5px; line-height: 20px; color: #8b8b85">
    让想法第一次连起来。
  </div>
</a>
```

### 样张 · 完成态 --done

整卡朱色 4% 底 + 35% 描边；必须走类，内联 borderColor 会压死悬停描边

React：

```jsx
export function Done() {
  return (
    <a href="#lesson" className="zzm-cardlink zzm-cardlink--done" style={{ display: 'block', width: 280, textDecoration: 'none', color: 'inherit' }}>
      <div style={{ aspectRatio: '16/9', borderRadius: 12, background: '#131316' }} />
      <div style={{ margin: '12px 4px 4px', fontSize: 14, fontWeight: 600, lineHeight: '20px' }}>为什么是 Obsidian</div>
      <div style={{ margin: '0 4px', fontSize: 12.5, lineHeight: '20px', color: '#8B8B85' }}>整卡朱染：远看就知道这节看完了。</div>
    </a>
  )
}
```

HTML（构建时由上面的 React 渲染得到，可直接粘贴）：

```html
<a
  href="#lesson"
  class="zzm-cardlink zzm-cardlink--done"
  style="display: block; width: 280px; text-decoration: none; color: inherit"
>
  <div style="aspect-ratio: 16/9; border-radius: 12px; background: #131316"></div>
  <div style="margin: 12px 4px 4px; font-size: 14px; font-weight: 600; line-height: 20px">
    为什么是 Obsidian
  </div>
  <div style="margin: 0 4px; font-size: 12.5px; line-height: 20px; color: #8b8b85">
    整卡朱染：远看就知道这节看完了。
  </div>
</a>
```

## 类名

| 类 | 用途 |
|---|---|
| `.zzm-card` | 静态内容面板：统计、表单卡、说明卡 |
| `.zzm-cardlink` | 可点内容卡：悬停描边 .3 + 上浮 3px + 柔影 |
| `.zzm-cardlink--done` | 已完成：整卡朱染 |
| `.zzm-hovercard` | 课程卡 / 系列卡的悬停手感（与 cardlink 相同，不带白卡承托） |

## 铁律

- ✓ 要：卡 16、卡内嵌图 12
- ✗ 不要：在卡上内联写 `box-shadow` 或 `borderColor`
- ✓ 要：完成态用容器级朱染
- ✗ 不要：在角落放一个 18px 小勾让人去找

## 本页用到的 CSS

按样张里出现的类名，从源文件原样裁出（完整版见 zzm.css）：

```css
/* tokens.css · 用到的令牌 */
:root {
  --zzm-mono: ui-monospace, "SF Mono", Menlo, monospace;
}

/* controls.css */

.zzm-v4 .zzm-cardlink {
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, .09);
  border-radius: 16px;
  padding: 12px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.zzm-v4 .zzm-cardlink:hover {
  transform: translateY(-3px);
  border-color: rgba(0, 0, 0, .3);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .09), 0 1px 2px rgba(0, 0, 0, .04);
}

.zzm-v4 .zzm-cardlink--done {
  background: rgba(166, 64, 47, .04);
  border-color: rgba(166, 64, 47, .35);
}

.zzm-v4 .zzm-cardlink--done:hover {
  border-color: rgba(166, 64, 47, .55);
}

.zzm-v4 .zzm-card {
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, .09);
  border-radius: 16px;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, .04),
    0 6px 18px rgba(0, 0, 0, .05),
    inset 0 1px 0 rgba(255, 255, 255, .85);
}
```

---

上一页：[骨架屏](https://ui.zhaozimin.com/components/skeleton.md) · 下一页：[课程卡](https://ui.zhaozimin.com/components/course-card.md) · 全站目录：https://ui.zhaozimin.com/llms.txt