跳到主要内容
Termlib

UI 组件 · 数据展示

卡片

Card

也叫：卡片容器、信息卡、Panel、面板

一块带边框或阴影的独立矩形区域，把一组相关的图片、标题、说明和操作收在一起，自成一体。

点「标注」看每个部分叫什么，点「反例」看最常见的错误用法。

怎么跟 AI 说

改成你的业务内容再发

用卡片网格展示课程，桌面每行 3 张、平板 2 张、手机 1 张，间距 24px。卡片白底、圆角 8px、浅阴影：顶部 16:9 封面图，下方是最多两行的标题、讲师和价格，底部放「立即学习」按钮。悬停时轻微上浮、阴影加深，整张可点击。

发给

01判断

你的内容是这样吗？

对照两列，确认卡片是不是你要找的。

符合这些情况，用卡片

  • 每条内容以封面图、商品图等视觉元素为主，用户靠看图挑选时
  • 条目数量不多（一屏十几条以内），每条相对独立、不需要逐字段比较时
  • 在仪表盘或首页上，需要把几块不同主题的信息分区包起来时
  • 各条内容结构不完全相同，有的有图有的没有，难以对齐成列时

是这些情况，换成别的

  • 条目同质、数量多、需要逐字段比较或排序时

    改用表格

  • 每条只有标题加一两行文字、需要快速扫过大量条目时

    改用列表

  • 整页只有一块主内容时，再套一层卡片只会多出没有意义的边框

    改用长文阅读

拿不准？上传页面截图，页面分析会逐块判断该用什么布局。

02避坑

常见坏用法

看起来能用，其实会给用户添麻烦。

  1. 01

    把几百条同类记录做成大卡片，一屏只能看到几条，也无法按字段比较

    下面的线框画的就是这种情况，红色虚线框是出问题的地方。

  2. 02

    卡片里再套卡片，层层边框和阴影叠在一起，视觉杂乱

  3. 03

    每张卡片塞满所有字段和好几个按钮，失去一眼挑选的意义

反例示意，对应第 01 条

03识别

怎么认出它

先看整体结构，再对照几个一眼能认出的特征。

结构

由带边框或阴影的容器组成，内部一般分为封面图区、标题与正文区、底部操作区，也可以只有标题和内容。

组成部分点一下，在上面的线框里标出来

识别特征

  1. 1带圆角、细边框或阴影的矩形块，与背景明显区分
  2. 2多个大小一致的矩形块排成网格
  3. 3块内上方常是图片，下方是标题、简介和按钮

04解释

详细解释

卡片是一个有边框、圆角或阴影的矩形容器，里面放围绕同一主题的一组信息，常见结构是顶部封面图，中间标题和简介，底部操作按钮。多张卡片排成网格，就是商品列表、文章推荐、课程列表等常见页面；仪表盘上的每个数据模块也常用卡片包起来。

卡片的长处是视觉突出、每张自成一体，适合以图片为主、数量不多、用户逐个挑选的内容。短处是占空间、字段不对齐：条目同质、数量多、需要逐字段比较时，应该用表格；每条只有标题加说明、需要紧凑浏览时，应该用列表。

卡片里的信息要精简，只放帮助用户判断要不要点进去的关键内容，完整信息留给详情页。

开发者信息
术语 ID
component-card
DOM 选择器

插件在本地识别时匹配这些 CSS 选择器（标签、ARIA role、常见组件库 class）。

  • .card:not(:has(.card ~ .card))
  • .ant-card
  • .el-card
  • [class*="MuiCard-root"]
  • .arco-card
  • .t-card
  • .n-card
  • [data-slot="card"]
  • :is(div, article, section, li, a):is(.rounded, .rounded-md, .rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl):is(.border, .shadow, .shadow-sm, .shadow-md, .shadow-lg, .ring-1):is(.p-4, .p-5, .p-6, .p-8, .p-10)
  • :is(div, article, section, li):is(.rounded, .rounded-md, .rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl):is(.border, .shadow, .shadow-sm, .shadow-md, .shadow-lg, .ring-1):is(.overflow-hidden, .bg-white, .bg-card)
  • .panel
类名关键词

类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。

  • card
  • panel
  • tile
  • widget
  • card-item
  • info-card
  • content-card
组件名

React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。

  • Card
  • Panel
  • Tile
  • Paper
  • Widget
结构特征

根据元素的排列和样式算出来的特征，只用来加分，单独不判定。

  • 标题开头
  • 图片开头
优先级
1 · 同一层有多条命中时，优先级高的胜出
版本
v2 · 更新于 2026/09/30