Card

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 cards components are very granular. Every single part of a card is a component. You can combine them in any order that you'd like, following the same logic of the examples.

Regular Cards

The simplest card structure has a header, content area and action buttons, defined by md-card-header, md-card-content and md-card-actions, respectively. The header may contain a title and a subtitle div or span with classes .md-title and .md-subhead. In the content area, you may use any kind of text elements and for the actions, use at most two md-buttons.

If you want to elevate the card as the user hovers over it, add the md-with-hover property. You can also add a ripple effect in combination with the elevation behavior. For doing so, wrap the md-card's content in a md-ripple tag.

Cards with Images

To add visual appeal to your cards, you can add images inside the md-header tag with a md-card-media wraping an img tag. It's possible to increase the image size to medium or big with the properties md-medium and md-big.

Although not necessary with text-only headers, when using a md-card-media, the title and subtitle should be wrapped around a md-card-header-text tag.

For a text-free card with action icon buttons on the side, wrap the card content inside a md-card-media-actions component.

If you want the image to fill the whole card area, wrap the card content inside a md-card-media-cover component. Its basic structure comprises the following components:

• md-card-media, where you specify the image with an img tag. The image's aspect ratio can be specified with md-card-media's md-ratio property;
• md-card-area, where header (md-header) and actions (md-card-actions) are specified.

If there isn't sufficient contrast between background image and title, the latter won't be perfectly legible. To overcome that, apply a solid or gradient background to the text by using the md-card-media-cover's properties md-solid or md-text-scrim, respectively.

Themes

Your cards will stand out if you change their base color... And you can do it by applying themes! Just add a .primary or accent class on them. This will use the current theme. You can specify a custom one with the md-theme property.

Expansion Control

To avoid too much information inside a card, or keep its height from exceeding the maximum height, hide supplementary information inside a expansible area.

It can be done with the md-card-expand component, that has a md-card-action with a md-card-expand-trigger that toggles a md-card-expand-content.

Different Layouts

That's pretty much it. You can now combine these and other components in many distinct ways. Here are some examples: