menuMDUIDocs
color_lens
The new mdui 2 based on Material Design 3 and Web Components is now available. Check out the mdui 2 documentation.

Card

Cards are containers for presenting related information. They can include images, text, links, and other content.

Usage

The card component is implemented in pure CSS, so writing the HTML is enough for it to take effect.

Related Reading

Material Design Guidelines: Components - Card

Style

Complete HTML structure

Below is the complete HTML structure for a card, including all of its predefined styled elements.

codeplay_arrow
Example
<div class="mdui-card">

  <!-- Card header, containing the 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>

  <!-- Card media content can include photos, videos, and other media, as well as titles and subtitles. -->
  <div class="mdui-card-media">
    <img src="card.jpg"/>

    <!-- A 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>

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

  <!-- Card content. -->
  <div class="mdui-card-content">Listen to your favorite artists and albums anytime, anywhere, online or offline.</div>

  <!-- Card buttons. -->
  <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>

Covering media elements

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

codeplay_arrow
Example
<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
<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>

Add class .mdui-card-media-covered-top to .mdui-card-media-covered to place the overlay at the top of the media element.

codeplay_arrow
Example
<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>

Add class .mdui-card-media-covered-transparent to .mdui-card-media-covered to give the overlay a transparent background.

codeplay_arrow
Example
<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>

Add class .mdui-card-media-covered-gradient to .mdui-card-media-covered to give the overlay a gradient background.

codeplay_arrow
Example
<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>

Vertically aligned buttons

Add class .mdui-card-actions-stacked to <div class="mdui-card-actions"></div> to set the buttons to a vertical arrangement.

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 Classes

Class NameDescription
.mdui-cardDefine the card component.
.mdui-card-headerDefine the card header.
.mdui-card-header-avatarDefine the avatar in the card header.
.mdui-card-header-titleDefine the title in the card header.
.mdui-card-header-subtitleDefine the subtitle in the card header.
.mdui-card-mediaDefine the media element in the card.
.mdui-card-media-coveredDefine the content covered on the media element.
.mdui-card-media-covered-topPlace the overlay at the top of the media element.
.mdui-card-media-covered-transparentGive the overlay a transparent background.
.mdui-card-media-covered-gradientGive the overlay a gradient background.
.mdui-card-menuDefine the menu in the top right corner of the card.
.mdui-card-primaryDefine the title and subtitle area of the card.
.mdui-card-primary-titleDefine the card title.
.mdui-card-primary-subtitleDefine the card subtitle.
.mdui-card-contentDefine the card content.
.mdui-card-actionsDefine the action bar of the card.
.mdui-card-actions-stackedVertically arrange the action bar.
arrow_backPrevious
Bottom Navigation
arrow_forwardNext
Chip