Card

Cards display content and actions about a single subject. MD Card encapsulates MDC Card.

A phone showing a list of saved podcasts represented as outlined cards

[!WARNING] The Card component is deprecated and will be removed in the next major version since it's added in @material/web as experimental component.

Interactive Demo

Link to “Interactive Demo”

View interactive demo inline.

Open interactive demo in new tab.

Types

Link to “Types”

Elevated

Filled

Outlined

Elevated card
Filled card
Outlined card

Usage

Link to “Usage”

Cards can contain any type of content, including text, images, and actions.

Content

<md-filled-card style="--md-card-padding: 16px;">
  Content
</md-filled-card>
<md-outlined-card style="--md-card-padding: 16px;">
  Content
</md-outlined-card>

bookmark
You may want to apply padding to card contents (recommended to 16px by the Material Design guidelines). In the previous live example and the following one the padding is already applied.
md-elevated-card { --md-card-padding: 16px; }

Primary action

Link to “Primary action”

A card can be clicked to trigger an action.

<md-elevated-card clickable class="demo-card">
  <div class="demo-card__header">
    <div class="demo-card__header-text">
      <div class="demo-card__title">Our Changing Planet</div>
      <div class="demo-card__subtitle">by Kurt Wagner</div>
    </div>
  </div>
</md-elevated-card>

Media

Link to “Media”

A card can display a media element, such as a photo, in a consistent way.

<md-elevated-card class="demo-card" clickable>
  <img src="https://cdn.glitch.me/9c389208-b279-4e96-bcbc-e5f8712d8706%2Fplaceholder-landscape-short.png"
       alt="Background photo" class="demo-card__media"/>
  <div class="demo-card__header">
    <div class="demo-card__header-text">
      <div class="demo-card__title">Our Changing Planet</div>
      <div class="demo-card__subtitle">by Kurt Wagner</div>
    </div>
  </div>
  <div class="demo-card__secondary mdc-typography mdc-typography--body2">
    Visit ten places on our planet that are undergoing the biggest changes today.
  </div>
</md-elevated-card>

Actions

Link to “Actions”

A card can display explicit actions for users to take.

Buttons

Link to “Buttons”

A card can contain buttons.

Read

Bookmark

<md-elevated-card class="demo-card" clickable>
    <div class="demo-card__header">
        <div class="demo-card__header-text">
            <div class="demo-card__title">Title</div>
            <div class="demo-card__subtitle">Subtitle</div>
        </div>
    </div>
    <md-outlined-button slot="button">Read</md-outlined-button>
    <md-filled-button slot="button">Bookmark</md-filled-button>
</md-elevated-card>

Icon Buttons

Link to “Icon Buttons”

A card can contain buttons.

favorite

more_vert

<md-elevated-card class="demo-card" clickable>
  <div class="demo-card__header">
    <div class="demo-card__header-text">
      <div class="demo-card__title">Title</div>
      <div class="demo-card__subtitle">Subtitle</div>
    </div>
  </div>
  <md-icon-button slot="icon">
    <md-icon>favorite</md-icon>
  </md-icon-button>
  <md-icon-button slot="icon">
    <md-icon>share</md-icon>
  </md-icon-button>
  <md-icon-button slot="icon">
    <md-icon>more_vert</md-icon>
  </md-icon-button>
</md-elevated-card>

Theming

Link to “Theming”

Cards supports Material theming and can be customized in terms of color, typography, and shape.

Elevated card tokens

Link to “Elevated card tokens”

Token	Default value
`--md-card-padding`	`16px`
`--md-card-margin`	`16px`
`--md-elevated-card-container-color`	`--md-sys-color-surface-container-low`
`--md-elevated-card-container-shape`	`--md-sys-shape-corner-medium`

All tokens

Elevated card example

Link to “Elevated card example”

Elevated

<style>
  .styled-example {
    background-color: white;
    --md-elevated-card-container-shape: 0px;
    --md-sys-color-surface-container-low: #FAFDFC;
    --md-sys-color-primary: #191C1C;
    --md-card-padding: 16px;
  }
</style>

<md-elevated-card>Elevated</md-elevated-card>

Filled card tokens

Link to “Filled card tokens”

Token	Default value
`--md-card-padding`	`16px`
`--md-card-margin`	`16px`
`--md-filled-card-container-color`	`--md-sys-color-surface-container-highest`
`--md-filled-card-container-shape`	`--md-sys-shape-corner-medium`

All tokens

Filled card example

Link to “Filled card example”

Filled

<style>
  .styled-example {
    background-color: white;
    --md-filled-card-container-shape: 0px;
    --md-sys-color-surface-container-low: #FAFDFC;
    --md-sys-color-primary: #191C1C;
    --md-card-padding: 16px;
  }
</style>

<md-filled-card>Filled</md-filled-card>

Outlined card tokens

Link to “Outlined card tokens”

Token	Default value
`--md-card-padding`	`16px`
`--md-card-margin`	`16px`
`--md-outlined-card-container-color`	`--md-sys-color-surface`
`--md-outlined-card-container-shape`	`--md-sys-shape-corner-medium`

All tokens

Outlined card example

Link to “Outlined card example”

Outlined

<style>
  .styled-example {
    background-color: white;
    --md-outlined-card-container-shape: 0px;
    --md-sys-color-surface-container-low: #FAFDFC;
    --md-sys-color-primary: #191C1C;
    --md-card-padding: 16px;
  }
</style>

<md-outlined-card>Outlined</md-outlined-card>

API

Link to “API”

MdElevatedCard `<md-elevated-card>`

Link to “MdElevatedCard <md-elevated-card>”

Properties

Link to “Properties”

Property	Attribute	Type	Default	Description
`clickable`	`clickable`	`boolean`	`false`	Allows the card to be clickable with a ripple effect.

MdFilledCard `<md-filled-card>`

Link to “MdFilledCard <md-filled-card>”

Properties

Link to “Properties”

Property	Attribute	Type	Default	Description
`clickable`	`clickable`	`boolean`	`false`	Allows the card to be clickable with a ripple effect.

MdOutlinedCard `<md-outlined-card>`

Link to “MdOutlinedCard <md-outlined-card>”

Properties

Link to “Properties”

Property	Attribute	Type	Default	Description
`clickable`	`clickable`	`boolean`	`false`	Allows the card to be clickable with a ripple effect.