Card
The mdcCard creates a material designed card.
Copper on the rise
Copper price soars amid global market optimism and increased demand.
U.S. tech startups rebound
Favorable business conditions have allowed startups to secure more fundraising deals compared to last year.
Asia's clean energy ambitions
China plans to invest billions of dollars for the development of over 300 clean energy projects in Southeast Asia.
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.
| Property | Description |
|---|---|
@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.
| Property | Description |
|---|---|
@Input()
fullBleed
boolean
|
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
| Property | Description |
|---|---|
@Input()
outlined
boolean
|
When this input is set to a value other than false, the card will have a hairline stroke instead of a shadow. |