menu MDUI Documentation
color_lens
near_me
Start
keyboard_arrow_down
Instalation Compatibility JavaScript tool library JavaScript global methods
layers
Style
keyboard_arrow_down
Colors and themes Font Grid layout Typography Icon Media Helper class Shadow
widgets
Component
keyboard_arrow_down
Ripple animation effect Button Floating operation button Drop-down selection Divider Expandable panel Text box Select control Slider List List control Grid list Tab Tab toolbar App bar Navigation drawer Bottom navigation bar Card Scrap of paper Tooltip Snackbar Table Dialog box Menu Progress indicator
view_carousel
JavaScript Plug-in
keyboard_arrow_down
Collapse Headroom
local_mall
Resources
keyboard_arrow_down
Material icon

card

A card is a piece of paper that contains a specific set of data. Can contain various related information, such as: photos, text, links, etc.

Call method

The card component uses pure CSS Write, just write HTML The code will take effect.

Related Reading

Material Design Design Guicardlines: Components - card

style

complete HTML structure

The following is a complete card HTML The structure contains all the elements of the predefined styles in the card.

codeplay_arrow
Example
Title
Subtitle
Title
Subtitle
The Zi said, "Isn't it true to learn and to learn from time to time? Is it a pleasure to have friends coming from afar? People don't know it, but not stunned, not a gentleman?"
<div class="mdui-card">

  <!-- Card header, including avatar, title, and subtitle -->
  <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>

  <!-- The media content of the card, which can include media content such as pictures and videos, as well as titles and subtitles -->
  <div class="mdui-card-media">
    <img src="card.jpg"/>

    <!-- The card can contain one or more menu buttons -->
    <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>

  <!-- Title and subtitle of the card -->
  <div class="mdui-card-primary">
    <div class="mdui-card-primary-title">Title</div>
    <div class="mdui-card-primary-subtitle">Subtitle</div>
  </div>

  <!-- The content of the card -->
  <div class="mdui-card-content">The Zi said, "Isn't it true to learn and to learn from time to time? Is it a pleasure to have friends coming from afar? People don't know it, but not stunned, not a gentleman?"</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>

Overlay on media elements

in <div class="mdui-card-media"></div>Add in加 <div class="mdui-card-media-covered"></div>, And put the content that needs to be overlaid on the media element into this element.

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>

in .mdui-card-media-covered Add class .mdui-card-media-covered-top Place the overlay on top of the media element.

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>

in .mdui-card-media-covered Add class .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>

in .mdui-card-media-covered Add class .mdui-card-media-covered-gradient Make the overlay have a gradient background.

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>

Buttons are arranged vertically

in <div class="mdui-card-actions"></div> Add class .mdui-card-actions-stacked, The buttons can be arranged vertically.

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 List of class names

Class name effect
.mdui-card Define card components.
.mdui-card-header Define the head of the card.
.mdui-card-header-avatar Define the avatar of the card head.
.mdui-card-header-title Define the title of the card head.
.mdui-card-header-subtitle Define the subtitle of the head of the card.
.mdui-card-media Define the media elements in the card.
.mdui-card-media-covered Define the content overlaid on the media element.
.mdui-card-media-covered-top Place the overlay on top of the media element.
.mdui-card-media-covered-transparent Make the overlay with a transparent background.
.mdui-card-media-covered-gradient Make the overlay have a gradient background.
.mdui-card-menu Define the menu in the upper right corner of the card.
.mdui-card-primary Define the title and subtitle area of ​​the card.
.mdui-card-primary-title Define the title of the card.
.mdui-card-primary-subtitle Define the subtitle of the card.
.mdui-card-content Define the content of the card.
.mdui-card-actions Define the action bar of the card.
.mdui-card-actions-stacked Arrange the operation bar vertically.
arrow_back Previous
Bottom navigation bar
arrow_forward Next
Scrap of paper
Set document theme

Theme color

Main color

Accent color