Card
Cards display content and actions about a single subject. MD Card encapsulates MDC Card.
[!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”Usage
Link to “Usage”Cards can contain any type of content, including text, images, and actions.
<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.
![Background photo](https://cdn.glitch.me/9c389208-b279-4e96-bcbc-e5f8712d8706%2Fplaceholder-landscape-short.png)
<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.
<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.
<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 |
Elevated card example
Link to “Elevated card example”<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 |
Filled card example
Link to “Filled card example”<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 |
Outlined card example
Link to “Outlined card example”<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>
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. |