Vue Material -

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.

Regular Cards

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.

Media cover

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 imagine 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.
Card background with Aspect Ratio

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.

Theme Colors

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.

Expansion Control

Different Layouts

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

API - md-card

The following properties can be applied:

NameDescriptionDefault
md-with-hover Boolean Enables full hover elevation in card. false
md-theme String Speficies a custom theme for the card. Works only if a theme class like primary or accent is applied to the card. -

API - md-card-actions

The following properties can be applied:

NameDescriptionDefault
md-alignment String Alignment of action buttons. right

API - md-card-area

The following properties can be applied:

NameDescriptionDefault
md-inset Boolean Applies a inset border. false

API - md-card-media

The following properties can be applied:

NameDescriptionDefault
md-ratio String Resizes 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. null
md-medium Boolean Applies medium size to the media. Works only inside md-card-header. false
md-big Boolean Applies big size to the media. Works only inside md-card-header. false

API - md-card-media-cover

The following properties can be applied:

NameDescriptionDefault
md-text-scrim Boolean Applies a gradient background based on the image. This option increases the legibility of the text, applying background colors by extracting the amount of lightness on the image. If the image is dark the background of the text will be lighter. If it's not dark then the background will be darker. This will be calculated automatically. false
md-solid Boolean Applies a solid background with the same calculation logic of the md-text-scrim. false