The <md-card> directive is a container element used within <md-content> containers.
An image included as a direct descendant will fill the card's width. If you want to avoid this,
you can add the md-image-no-fill class to the parent element. The <md-card-content>
container will wrap text content and provide padding. An <md-card-footer> element can be
optionally included to put content flush against the bottom edge of the card.
Action buttons can be included in an <md-card-actions> element, similar to <md-dialog-actions>.
You can then position buttons using layout attributes.
Card is built with:
<md-card-header> - Header for the card, holds avatar, text and squared image<md-card-avatar> - Card avatarmd-user-avatar - Class for user image<md-icon><md-card-header-text> - Contains elements for the card descriptionmd-title - Class for the card titlemd-subhead - Class for the card sub header<img> - Image for the card<md-card-title> - Card content title<md-card-title-text>md-headline - Class for the card content titlemd-subhead - Class for the card content sub header<md-card-title-media> - Squared image within the titlemd-media-sm - Class for small imagemd-media-md - Class for medium imagemd-media-lg - Class for large imagemd-media-xl - Class for extra large image<md-card-content> - Card content<md-card-actions> - Card actions<md-card-icon-actions> - Icon actionsCards have constant width and variable heights; where the maximum height is limited to what can fit within a single view on a platform, but it can temporarily expand as needed.
Card content
Card content
Card content