← 返回 Web 词条

卡片

Web需自己实现

Web 原生没有这个

网页没有原生卡片元素,卡片通常由文章、区块和链接等语义元素按内容自行组合。

通常怎么做:根据内容选用 article、section 或普通容器,不要为了外观牺牲正确语义。

适用范围:桌面与移动端现代浏览器

社区一般叫它 Card

它把围绕同一个主题的信息和操作放进一个边界清楚的内容块里。

  • 一块框起来的信息
  • 一张张排着的内容块
  • 把图片标题按钮装在一起的小块
  • 内容卡片
  • 信息卡片
  • 卡片容器

其他平台的相似实现

iOS需自己实现
该平台没有原生实现

苹果平台没有通用 Card 组件,卡片只是由容器、背景和内容组合出的视觉模式。

看 iOS 视角 →

使用规范

什么时候用

  • 一组内容围绕同一个对象,并需要与相邻内容形成清楚边界

什么时候别用

  • 页面上每一段内容都套卡片,导致层级和阅读顺序变得杂乱

容易混淆

Web 出处

查看 Web / iOS / Android 完整对照 →