card.md
组件 · COMPONENT

卡片与卡链 Card

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

来源设计系统源码源styles/v4/controls.css源styles/v4/base.css机读components/card.md

浮起面板

.zzm-card白面 · .09 细线 · 圆角 16 · 两层落影 + 顶部反光
本周
完成 6 节 · 共 92 分钟
比上周多 2 节。
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>
  )
}

可点卡链

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

.zzm-cardlink
双链与反向链接
让想法第一次连起来。
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>
  )
}
完成态 --done整卡朱色 4% 底 + 35% 描边；必须走类，内联 borderColor 会压死悬停描边
为什么是 Obsidian
整卡朱染：远看就知道这节看完了。
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>
  )
}

类名

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

铁律

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