Cards may contain a photo, text, and a link about a single subject. They may display content containing elements of varying size, such as photos with captions of variable length.
The card components are very granular. Every single part of a card is a component. You can combine them in any order that you want, following the same logic of the examples.
You can also use other Material components inside the card, like the "Complete Example".
The following classes can be applied to change the color palette:
md-primarymd-accentmd-warn
Name
Type
Description
md-with-hover
Boolean
Enable full hover elevation in card. Default false
Can display titles, subheads, medias and avatars in a header.
No options available
Used inside a card header to group the title and the subhead. Useful to align with an action (like a overflow button) or a media inside headers, like on the "Media" example.
No options available
Display the content of the card. Most used with plain text or with simple HTML content, like bold and italic tags.
No options available
Hold the actions of a card align them on the right. Here you can add <md-button> with or without icons.
No options available
A card area create a division inside the card. This will apply a border on the bottom (only works if the card area is not the last element).
You can see an example of use on the "Complete example".
Name
Type
Description
md-inset
Boolean
Apply a inset border. Default false
The card media display images (and other types of media) inside cards. Can be used inside and outsite a card header.
Name
Type
Description
md-ratio
String
Resize or clip the image automatically based on the following options:
1:1 or 1/1, 4:3 or 4/3 and 16:9 or 16/9.
md-medium
Boolean
Applies medium size to the media. Works only inside md-card-header. Default false
md-big
Boolean
Applies big size to the media. Works only inside md-card-header. Default false
Used to align a media and actions side by side.
No options available
You will need to give a <md-card-media> inside this component and a <md-card-area>. The media and the area will be automatically be placed in order inside the card.
Take a look at the example: "Image cover with predefined aspect ratio".
Name
Type
Description
md-text-scrim
Boolean
Apply a gradient background based on the image. This option increase the legibility of the text applying background colors by extracting the amount of lightness on the image. If the image is dark so the background of the text will be lighter. If it's not dark then the background will be darker. This will be calculated automatically. Default false
md-solid
Boolean
Applies a solid background with the same calculation logic of the md-text-scrim. Default false
Create a expansible content area inside cards. Useful to "show more" content or load them on demand.
You will need a <md-card-actions> with an element with a md-expand-trigger attribute and a <md-card-content> with the content that you want to show. The trigger will automatically toggle the content on click.
A simple HTML markup can be like that:
<md-card-expand>
<md-card-actions>
<md-button class="md-icon-button" md-expand-trigger>
<md-icon>keyboard_arrow_down</md-icon>
</md-button>
</md-card-actions>
<md-card-content>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</md-card-content>
</md-card-expand>
No options available
Title goes here
Subtitle here
Action
Action
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non, voluptas eius illo quas, saepe voluptate pariatur in deleniti minus sint. Excepturi.
Title goes here
Subtitle here
more_vert
Call
phone
Send a message
message
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non, voluptas eius illo quas, saepe voluptate pariatur in deleniti minus sint. Excepturi.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea nostrum.
Title goes here
Subtitle here
Action
Action
<md-card>
<md-card-media>
<img src="assets/card-image-1.jpg" alt="People">
</md-card-media>
<md-card-header>
<div class="md-title">Title goes here</div>
<div class="md-subhead">Subtitle here</div>
</md-card-header>
<md-card-actions>
<md-button>Action</md-button>
<md-button>Action</md-button>
</md-card-actions>
<md-card-content>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non, voluptas eius illo quas, saepe voluptate pariatur in deleniti minus sint. Excepturi.
</md-card-content>
</md-card>
<md-card>
<md-card-header>
<md-card-header-text>
<div class="md-title">Title goes here</div>
<div class="md-subhead">Subtitle here</div>
</md-card-header-text>
<md-menu md-size="4" md-direction="bottom left">
<md-button class="md-icon-button" md-menu-trigger>
<md-icon>more_vert</md-icon>
</md-button>
<md-menu-content>
<md-menu-item>
<span>Call</span>
<md-icon>phone</md-icon>
</md-menu-item>
<md-menu-item>
<span>Send a message</span>
<md-icon>message</md-icon>
</md-menu-item>
</md-menu-content>
</md-menu>
</md-card-header>
<md-card-media>
<img src="assets/card-image-1.jpg" alt="People">
</md-card-media>
<md-card-content>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non, voluptas eius illo quas, saepe voluptate pariatur in deleniti minus sint. Excepturi.
</md-card-content>
</md-card>
<md-card>
<md-card-media>
<img src="assets/card-image-2.jpg" alt="People">
</md-card-media>
<md-card-content>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea nostrum.
</md-card-content>
</md-card>
<md-card>
<md-card-media>
<img src="assets/card-image-2.jpg" alt="People">
</md-card-media>
<md-card-header>
<div class="md-title">Title goes here</div>
<div class="md-subhead">Subtitle here</div>
</md-card-header>
<md-card-actions>
<md-button>Action</md-button>
<md-button>Action</md-button>
</md-card-actions>
</md-card>
Title goes here
Subtitle here
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non, voluptas eius illo quas, saepe voluptate pariatur in deleniti minus sint. Excepturi.
Action
Action
favorite
bookmark
share
Title goes here
Subtitle here
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea nostrum.
Action
Action
<md-card md-with-hover>
<md-card-header>
<div class="md-title">Title goes here</div>
<div class="md-subhead">Subtitle here</div>
</md-card-header>
<md-card-content>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non, voluptas eius illo quas, saepe voluptate pariatur in deleniti minus sint. Excepturi.
</md-card-content>
<md-card-actions>
<md-button>Action</md-button>
<md-button>Action</md-button>
</md-card-actions>
</md-card>
<md-card md-with-hover>
<md-card-media v-md-ink-ripple>
<img src="assets/card-image-1.jpg" alt="People">
</md-card-media>
<md-card-actions>
<md-button class="md-icon-button">
<md-icon>favorite</md-icon>
</md-button>
<md-button class="md-icon-button">
<md-icon>bookmark</md-icon>
</md-button>
<md-button class="md-icon-button">
<md-icon>share</md-icon>
</md-button>
</md-card-actions>
</md-card>
<md-card md-with-hover>
<md-card-header>
<md-avatar>
<img src="assets/avatar.png" alt="People">
</md-avatar>
<div class="md-title">Title goes here</div>
<div class="md-subhead">Subtitle here</div>
</md-card-header>
<md-card-media>
<img src="assets/card-image-1.jpg" alt="People">
</md-card-media>
<md-card-content>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea nostrum.
</md-card-content>
<md-card-actions>
<md-button>Action</md-button>
<md-button>Action</md-button>
</md-card-actions>
</md-card>
Title goes here
Subtitle here
Action
Action
Title goes here
Subtitle here
Action
Action
<md-card>
<md-card-media-cover md-text-scrim>
<md-card-media md-ratio="16:9">
<img src="assets/card-sky.jpg" alt="Skyscraper">
</md-card-media>
<md-card-area>
<md-card-header>
<div class="md-title">Title goes here</div>
<div class="md-subhead">Subtitle here</div>
</md-card-header>
<md-card-actions>
<md-button>Action</md-button>
<md-button>Action</md-button>
</md-card-actions>
</md-card-area>
</md-card-media-cover>
</md-card>
<md-card>
<md-card-media-cover md-solid>
<md-card-media md-ratio="1:1">
<img src="assets/card-sky.jpg" alt="Skyscraper">
</md-card-media>
<md-card-area>
<md-card-header>
<div class="md-title">Title goes here</div>
<div class="md-subhead">Subtitle here</div>
</md-card-header>
<md-card-actions>
<md-button>Action</md-button>
<md-button>Action</md-button>
</md-card-actions>
</md-card-area>
</md-card-media-cover>
</md-card>
Title goes here
Subtitle here
Action
Action
Title goes here
Subtitle here
Action
Action
Title goes
Subtitle here
Action
Action
favorite
bookmark
share
<md-card>
<md-card-header>
<md-card-header-text>
<div class="md-title">Title goes here</div>
<div class="md-subhead">Subtitle here</div>
</md-card-header-text>
<md-card-media>
<img src="assets/avatar-2.jpg" alt="People">
</md-card-media>
</md-card-header>
<md-card-actions>
<md-button>Action</md-button>
<md-button>Action</md-button>
</md-card-actions>
</md-card>
<md-card>
<md-card-header>
<md-card-header-text>
<div class="md-title">Title goes here</div>
<div class="md-subhead">Subtitle here</div>
</md-card-header-text>
<md-card-media md-medium>
<img src="assets/card-weather.png" alt="People">
</md-card-media>
</md-card-header>
<md-card-actions>
<md-button>Action</md-button>
<md-button>Action</md-button>
</md-card-actions>
</md-card>
<md-card>
<md-card-header>
<md-card-header-text>
<div class="md-title">Title goes</div>
<div class="md-subhead">Subtitle here</div>
</md-card-header-text>
<md-card-media md-big>
<img src="assets/card-weather.png" alt="People">
</md-card-media>
</md-card-header>
<md-card-actions>
<md-button>Action</md-button>
<md-button>Action</md-button>
</md-card-actions>
</md-card>
<md-card>
<md-card-media-actions>
<md-card-media>
<img src="assets/cover.png" alt="Cover">
</md-card-media>
<md-card-actions>
<md-button class="md-icon-button">
<md-icon>favorite</md-icon>
</md-button>
<md-button class="md-icon-button">
<md-icon>bookmark</md-icon>
</md-button>
<md-button class="md-icon-button">
<md-icon>share</md-icon>
</md-button>
</md-card-actions>
</md-card-media-actions>
</md-card>
Title goes here
Subtitle here
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non, voluptas eius illo quas, saepe voluptate pariatur in deleniti minus sint. Excepturi.
Action
Action
Title goes here
Subtitle here
Action
Action
keyboard_arrow_down
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non, voluptas eius illo quas, saepe voluptate pariatur in deleniti minus sint. Excepturi.
<md-card>
<md-card-area>
<md-card-media>
<img src="assets/card-image-1.jpg" alt="People">
</md-card-media>
<md-card-header>
<div class="md-title">Title goes here</div>
<div class="md-subhead">Subtitle here</div>
</md-card-header>
<md-card-content>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non, voluptas eius illo quas, saepe voluptate pariatur in deleniti minus sint. Excepturi.
</md-card-content>
</md-card-area>
<md-card-actions>
<md-button>Action</md-button>
<md-button>Action</md-button>
</md-card-actions>
</md-card>
<md-card>
<md-card-media>
<img src="assets/card-image-1.jpg" alt="People">
</md-card-media>
<md-card-header>
<div class="md-title">Title goes here</div>
<div class="md-subhead">Subtitle here</div>
</md-card-header>
<md-card-expand>
<md-card-actions>
<md-button>Action</md-button>
<md-button>Action</md-button>
<span style="flex: 1"></span>
<md-button class="md-icon-button" md-expand-trigger>
<md-icon>keyboard_arrow_down</md-icon>
</md-button>
</md-card-actions>
<md-card-content>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non, voluptas eius illo quas, saepe voluptate pariatur in deleniti minus sint. Excepturi.
</md-card-content>
</md-card-expand>
</md-card>
Title goes here
Subtitle here
Action
Action
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non, voluptas eius illo quas, saepe voluptate pariatur in deleniti minus sint. Excepturi.
Title goes here
Subtitle here
more_vert
Call
phone
Send a message
message
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non, voluptas eius illo quas, saepe voluptate pariatur in deleniti minus sint. Excepturi.
Title goes here
Subtitle here
Action
Action
<md-card class="md-primary">
<md-card-media>
<img src="assets/card-image-1.jpg" alt="People">
</md-card-media>
<md-card-header>
<div class="md-title">Title goes here</div>
<div class="md-subhead">Subtitle here</div>
</md-card-header>
<md-card-actions>
<md-button>Action</md-button>
<md-button>Action</md-button>
</md-card-actions>
<md-card-content>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non, voluptas eius illo quas, saepe voluptate pariatur in deleniti minus sint. Excepturi.
</md-card-content>
</md-card>
<md-card class="md-accent">
<md-card-header>
<md-card-header-text>
<div class="md-title">Title goes here</div>
<div class="md-subhead">Subtitle here</div>
</md-card-header-text>
<md-menu md-size="4" md-direction="bottom left">
<md-button class="md-icon-button" md-menu-trigger>
<md-icon>more_vert</md-icon>
</md-button>
<md-menu-content>
<md-menu-item>
<span>Call</span>
<md-icon>phone</md-icon>
</md-menu-item>
<md-menu-item>
<span>Send a message</span>
<md-icon>message</md-icon>
</md-menu-item>
</md-menu-content>
</md-menu>
</md-card-header>
<md-card-media>
<img src="assets/card-image-1.jpg" alt="People">
</md-card-media>
<md-card-content>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non, voluptas eius illo quas, saepe voluptate pariatur in deleniti minus sint. Excepturi.
</md-card-content>
</md-card>
<md-card class="md-warn">
<md-card-media>
<img src="assets/card-image-2.jpg" alt="People">
</md-card-media>
<md-card-header>
<div class="md-title">Title goes here</div>
<div class="md-subhead">Subtitle here</div>
</md-card-header>
<md-card-actions >
<md-button>Action</md-button>
<md-button>Action</md-button>
</md-card-actions>
</md-card>
Coffee House
location_on
2 miles
Illy Coffee served with a complimentary Leonidas Belgian Chocolate with all beverages.
Today's availability
access_time
5:30PM
7:30PM
9:00PM
Reserve
<md-card class="card-example">
<md-card-area md-inset>
<md-card-media md-ratio="16:9">
<img src="assets/card-example.jpg" alt="Coffee House">
</md-card-media>
<md-card-header>
<h2 class="md-title">Coffee House</h2>
<div class="md-subhead">
<md-icon>location_on</md-icon>
<span>2 miles</span>
</div>
</md-card-header>
<md-card-content>
Illy Coffee served with a complimentary Leonidas Belgian Chocolate with all beverages.
</md-card-content>
</md-card-area>
<md-card-content>
<h3 class="md-subheading">Today's availability</h3>
<div class="card-reservation">
<md-icon>access_time</md-icon>
<md-button-toggle md-single class="md-button-group">
<md-button>5:30PM</md-button>
<md-button>7:30PM</md-button>
<md-button>9:00PM</md-button>
</md-button-toggle>
</div>
</md-card-content>
<md-card-actions>
<md-button class="md-primary">Reserve</md-button>
</md-card-actions>
</md-card>
.card-example {
.md-subhead {
.md-icon {
$size: 16px;
width: $size;
min-width: $size;
height: $size;
min-height: $size;
font-size: $size;
line-height: $size;
}
span {
vertical-align: middle;
}
}
.card-reservation {
margin-top: 8px;
display: flex;
align-items: center;
justify-content: space-around;
.md-icon {
margin: 8px;
color: rgba(#000, .54) !important;
}
.md-button {
border-radius: 2px !important;
}
}
}