跳到主要内容

Card 卡片Card · CardLink · CardMedia

把一件事的标题、内容和操作收在一个白色块里：列表里的一个条目、仪表盘上的一块信息。整块可点击时用可点击卡片或 CardLink。

基本用法

CardHeader、CardBody、CardFooter 是可选的分区；也可以直接往 Card 里放任何内容。

本周周报

周五 18:00 前提交

待提交
汇总本周完成的事项、遇到的阻碍和下周计划，提交后组长会收到通知。

尺寸

圆角与内边距成对变化，内边距四边相等：sm 20 / 16、md 24 / 20（默认）、lg 32 / 24。

sm

圆角 20，内边距 16

md

圆角 24，内边距 20

lg

圆角 32，内边距 24

可点击卡片

传 href 时根节点是链接，传 interactive 时是按钮。悬停只把描边加深一档、箭头变深，按下整体回缩到 0.985。按钮形态里只能放短语内容（文字、图标、头像），不能放标题和别的按钮。

整卡是链接
href + chevron

CardLink 覆盖链接

卡片里既有标题又有别的按钮时，把 CardLink 放进标题：它的点击区域铺满整张卡片，其余链接和按钮浮在上面，仍然可以单独点。读屏读到的是一个名字清楚的链接，而不是把整张卡片的文字念一遍。

设计评审：导航改版

周四 14:00 · 3 号会议室

点卡片任意位置触发 onClick

带主图的卡片

把 CardMedia 放成 Card 的第一个子元素：它贴满卡片顶部、和卡片边界没有间距，上两个角跟着卡片圆角，下边是直的；下面的内容照常留内边距。卡片的描边和顶部高光画在图片之上，可点击卡片的悬停、按下和焦点环照常。

商品卡

标题放 CardLink，整张卡片（包括图片）都能点；加购按钮浮在上面，单独可点。

珊瑚色的马克杯，冒着热气新品

珊瑚马克杯

350ml · 哑光釉面

¥68
陶土花盆里的三片叶子绿植

陶土小盆栽

含托盘 · 适合窗台

¥45
紫色灯罩的台灯，亮着暖黄的光

暮紫台灯

三档暖光 · USB-C

¥199

整卡链接与插画

href 卡片放主图同样贴边；没有图片地址时，往 CardMedia 里直接放 svg。

周末去湖边走走

一条 6 公里的环湖步道，适合新手

跟着主题变色

插画用 --ok-accent 上色，换强调色试试

左图右文

position="start"：卡片宽于约 520px 时图片贴在左侧、占满卡片高度，左两个角跟着卡片圆角；卡片变窄后自动回到顶部。用卡片自身的宽度判断（容器查询），不看视口。

傍晚紫色的山丘

山顶看日落

周六 16:30 · 西山步道入口集合

报名中
全程约 2 小时，坡度平缓。带一件薄外套，山顶风大。

规格

卡片
圆角 24 · 内边距 20，四边相等
悬停
描边加深（--ok-line → --ok-line-2），底色不变
箭头
悬停时变深，不位移
按下
scale 0.985 · 90ms，松开弹回
禁用
不透明度 0.5，指针 not-allowed
主图
贴边、无间距；上两角（start 时左两角）跟卡片圆角；描边与高光叠在图上

接口

Card

属性类型默认值说明
asElementType'div'静态卡片渲染成什么元素。传了 href 或 interactive 时忽略。
size'sm' | 'md' | 'lg''md'圆角与内边距：20 / 16、24 / 20、32 / 24。
hrefstring—整卡是链接，根节点渲染成 a；可配合 target、rel。
interactiveboolean—整卡是按钮，根节点渲染成 button type="button"。
disabledboolean—interactive 时禁用。
chevronboolean—末尾的前进箭头。

CardHeader

属性类型默认值说明
titleReactNode—标题。
descriptionReactNode—标题下的说明。
titleAs'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div''h3'标题用什么元素，按页面的标题层级选。
actionsReactNode—右侧操作区。

CardFooter / CardLink

属性类型默认值说明
CardFooter.align'start' | 'end' | 'between''start'操作按钮的对齐。
CardLink.hrefstring—不传时渲染成 button type="button"。其余属性透传。

CardMedia

属性类型默认值说明
alt*string—图片说明；纯装饰传 alt=""。
srcstring—图片地址。不传时显示 children。
rationumber | string16 / 9position="start" 且卡片够宽时不用比例，改为占满卡片高度。
position'top' | 'start''top'主图在顶部，或在宽卡片里贴左（窄于约 520px 时回到顶部）。
fit / fallback / children同 Image—其余属性与 Image 相同（圆角由卡片决定，没有 radius）。

无障碍

  • 静态卡片没有角色；可点击卡片是原生的链接或按钮，Tab 聚焦，链接用 Enter、按钮用 Enter 或空格触发。
  • 可点击卡片的名字是里面全部文字，所以内容要短；内容多时改用 CardLink，名字只取链接文字。
  • CardLink 的焦点环画在整张卡片外沿；卡片里其它可聚焦元素保持各自的 Tab 顺序。
  • 禁用的按钮卡片用原生 disabled，会从 Tab 顺序里移除。
  • CardHeader 的标题默认是 h3，请用 titleAs 对齐所在页面的标题层级。
  • CardMedia 的 alt 落在图片上。整卡链接里的主图如果只是配图，传 alt=""，免得链接名字里多一段图片说明。