Card

The mdcCard creates a material designed card.

Cards Demo

API

Directive: MdcCardMediaDirective

Selector: [mdcCardMedia]

Directive for an area that displays a custom background-image. See the size property for the sizing of the image. If used, this directive should be put inside the card itself (MdcCardDirective). Add an mdcCardMediaContent as sub-element for displaying a title, text, or icon on top of the background image.

PropertyDescription
@Input()
size
'cover' | '16:9' | 'square'

Directive to select size to which this element's background-image should be scaled. Can be one of 'cover', '16:9', or 'square'. The default value is 'cover'.

Directive: MdcCardMediaContentDirective

Selector: [mdcCardMediaContent]

Directive for displaying text on top of a mdcCardMedia element. This directive should be used as child element of the mdcCardMedia, and creates an absolutely positioned box the same size as the media area.

Directive: MdcCardActionButtonsDirective

Selector: [mdcCardActionButtons]

Directive for displaying the button card actions. Composed of one or more card actions, which must be buttons that have the MdcButtonDirective. This directive should be placed inside an MdcCardActionsDirective.

Directive: MdcCardActionIconsDirective

Selector: [mdcCardActionIcons]

Directive for displaying the icon card actions. Composed of one or more card actions, which must be icons (for instance mdcIconButton. This directive should be placed inside an MdcCardActionsDirective.

Directive: MdcCardActionsDirective

Selector: [mdcCardActions]

Directive for showing the different actions a user can take. Use mdcButton, or mdcIconButton as child elements. If you want to use both buttons and icons in the same row, wrap them in mdcCardActionButtons, and mdcCardActionIcons directives.

PropertyDescription
@Input()
fullBleed
any

When this input is defined and does not have value false, the contained button takes up the entire width of the action row. This should be used only when there is a single button contained in the directive.

Directive: MdcCardPrimaryActionDirective

Selector: [mdcCardPrimaryAction]

Directive for the main tappable area of the card (so should be a child of mdcCard). Typically contains most (or all) card content except mdcCardActions. Only applicable to cards that have a primary action that the main surface should trigger.

Directive: MdcCardDirective

Selector: [mdcCard]

Directive for a material designed card. The card can be composed with the following directives: MdcCardMediaDirective, MdcCardActionsDirective

PropertyDescription
@Input()
outlined
any

When this input is set to a value other than false, the card will have a hairline stroke instead of a shadow.