menu MDUI 文档
color_lens
near_me
开始使用
keyboard_arrow_down
安装 兼容性 JavaScript 工具库 JavaScript 全局方法
layers
样式
keyboard_arrow_down
颜色与主题 字体 网格布局 排版 图标 媒体 辅助类 阴影
widgets
组件
keyboard_arrow_down
涟漪动画效果 按钮 浮动操作按钮 下拉选择 分隔线 可扩展面板 文本框 选择控件 滑块 列表 列表控制 网格列表 Tab 选项卡 工具栏 应用栏 抽屉式导航 底部导航栏 卡片 纸片 工具提示 Snackbar 表格 对话框 菜单 进度指示器
view_carousel
JavaScript 插件
keyboard_arrow_down
Collapse Headroom
local_mall
资源
keyboard_arrow_down
Material 图标

卡片

卡片是包含一组特定数据集的纸片。可以包含各种相关信息，例如：照片、文本、链接等。

调用方式

卡片组件使用纯 CSS 编写，只需编写 HTML 代码即可生效。

相关阅读

Material Design 设计指南：组件 - 卡片

样式

完整 HTML 结构

下面是一个卡片的完整 HTML 结构，包含了所有卡片中预定义样式的元素。

codeplay_arrow
Example
Title
Subtitle
Title
Subtitle
子曰：「学而时习之，不亦说乎？有朋自远方来，不亦乐乎？人不知，而不愠，不亦君子乎？」
<div class="mdui-card">

  <!-- 卡片头部，包含头像、标题、副标题 -->
  <div class="mdui-card-header">
    <img class="mdui-card-header-avatar" src="avatar.jpg"/>
    <div class="mdui-card-header-title">Title</div>
    <div class="mdui-card-header-subtitle">Subtitle</div>
  </div>

  <!-- 卡片的媒体内容，可以包含图片、视频等媒体内容，以及标题、副标题 -->
  <div class="mdui-card-media">
    <img src="card.jpg"/>

    <!-- 卡片中可以包含一个或多个菜单按钮 -->
    <div class="mdui-card-menu">
      <button class="mdui-btn mdui-btn-icon mdui-text-color-white"><i class="mdui-icon material-icons">share</i></button>
    </div>
  </div>

  <!-- 卡片的标题和副标题 -->
  <div class="mdui-card-primary">
    <div class="mdui-card-primary-title">Title</div>
    <div class="mdui-card-primary-subtitle">Subtitle</div>
  </div>

  <!-- 卡片的内容 -->
  <div class="mdui-card-content">子曰：「学而时习之，不亦说乎？有朋自远方来，不亦乐乎？人不知，而不愠，不亦君子乎？」</div>

  <!-- 卡片的按钮 -->
  <div class="mdui-card-actions">
    <button class="mdui-btn mdui-ripple">action 1</button>
    <button class="mdui-btn mdui-ripple">action 2</button>
    <button class="mdui-btn mdui-btn-icon mdui-float-right"><i class="mdui-icon material-icons">expand_more</i></button>
  </div>

</div>

覆盖在媒体元素上

在 <div class="mdui-card-media"></div> 中添加 <div class="mdui-card-media-covered"></div>，并把需要覆盖在媒体元素上的内容放到该元素中。

codeplay_arrow
Example
Title
Subtitle
<div class="mdui-card">
  <div class="mdui-card-media">
    <img src="card.jpg"/>
    <div class="mdui-card-media-covered">
      <div class="mdui-card-primary">
        <div class="mdui-card-primary-title">Title</div>
        <div class="mdui-card-primary-subtitle">Subtitle</div>
      </div>
    </div>
  </div>
  <div class="mdui-card-actions">
    <button class="mdui-btn mdui-ripple">action 1</button>
    <button class="mdui-btn mdui-ripple">action 2</button>
  </div>
</div>
codeplay_arrow
Example
Title
Subtitle
<div class="mdui-card">
  <div class="mdui-card-media">
    <img src="card.jpg"/>
    <div class="mdui-card-media-covered">
      <div class="mdui-card-primary">
        <div class="mdui-card-primary-title">Title</div>
        <div class="mdui-card-primary-subtitle">Subtitle</div>
      </div>
      <div class="mdui-card-actions">
        <button class="mdui-btn mdui-ripple mdui-ripple-white">action 1</button>
        <button class="mdui-btn mdui-ripple mdui-ripple-white">action 2</button>
      </div>
    </div>
  </div>
</div>

在 .mdui-card-media-covered 上添加类 .mdui-card-media-covered-top 使覆盖层位于媒体元素顶部。

codeplay_arrow
Example
Title
Subtitle
<div class="mdui-card">
  <div class="mdui-card-media">
    <img src="card.jpg"/>
    <div class="mdui-card-media-covered mdui-card-media-covered-top">
      <div class="mdui-card-primary">
        <div class="mdui-card-primary-title">Title</div>
        <div class="mdui-card-primary-subtitle">Subtitle</div>
      </div>
    </div>
  </div>
  <div class="mdui-card-actions">
    <button class="mdui-btn mdui-ripple">action 1</button>
    <button class="mdui-btn mdui-ripple">action 2</button>
  </div>
</div>

在 .mdui-card-media-covered 上添加类 .mdui-card-media-covered-transparent 使覆盖层拥有透明背景。

codeplay_arrow
Example
Title
Subtitle
<div class="mdui-card">
  <div class="mdui-card-media">
    <img src="card.jpg"/>
    <div class="mdui-card-media-covered mdui-card-media-covered-transparent">
      <div class="mdui-card-primary">
        <div class="mdui-card-primary-title">Title</div>
        <div class="mdui-card-primary-subtitle">Subtitle</div>
      </div>
    </div>
  </div>
  <div class="mdui-card-actions">
    <button class="mdui-btn mdui-ripple">action 1</button>
    <button class="mdui-btn mdui-ripple">action 2</button>
  </div>
</div>

在 .mdui-card-media-covered 上添加类 .mdui-card-media-covered-gradient 使覆盖层拥有渐变背景。

codeplay_arrow
Example
Title
Subtitle
<div class="mdui-card">
  <div class="mdui-card-media">
    <img src="card.jpg"/>
    <div class="mdui-card-media-covered mdui-card-media-covered-gradient">
      <div class="mdui-card-primary">
        <div class="mdui-card-primary-title">Title</div>
        <div class="mdui-card-primary-subtitle">Subtitle</div>
      </div>
    </div>
  </div>
  <div class="mdui-card-actions">
    <button class="mdui-btn mdui-ripple">action 1</button>
    <button class="mdui-btn mdui-ripple">action 2</button>
  </div>
</div>

按钮竖直排列

在 <div class="mdui-card-actions"></div> 上添加类 .mdui-card-actions-stacked，就能将按钮设置为竖直排列。

codeplay_arrow
Example
<div class="mdui-card">
  <div class="mdui-card-media">
    <img src="card.jpg"/>
  </div>
  <div class="mdui-card-actions mdui-card-actions-stacked">
    <button class="mdui-btn mdui-ripple">action 1</button>
    <button class="mdui-btn mdui-ripple">action 2</button>
  </div>
</div>

CSS 类名列表

类名 效果
.mdui-card 定义卡片组件。
.mdui-card-header 定义卡片的头部。
.mdui-card-header-avatar 定义卡片头部的头像。
.mdui-card-header-title 定义卡片头部的标题。
.mdui-card-header-subtitle 定义卡片头部的副标题。
.mdui-card-media 定义卡片中的媒体元素。
.mdui-card-media-covered 定义覆盖在媒体元素上的内容。
.mdui-card-media-covered-top 使覆盖层位于媒体元素顶部。
.mdui-card-media-covered-transparent 使覆盖层有透明背景。
.mdui-card-media-covered-gradient 使覆盖层有渐变背景。
.mdui-card-menu 定义卡片中右上角的菜单。
.mdui-card-primary 定义卡片的标题和副标题区域。
.mdui-card-primary-title 定义卡片的标题。
.mdui-card-primary-subtitle 定义卡片的副标题。
.mdui-card-content 定义卡片内容。
.mdui-card-actions 定义卡片的操作栏。
.mdui-card-actions-stacked 使操作栏竖直排列。
arrow_back Previous
底部导航栏
arrow_forward Next
纸片
设置文档主题

主题色

主色

强调色