Card

Cards contain content and actions about a single subject

API

API reference for Angular Material Card Component

import {MatCardModule} from '@angular/material';

A basic content container component that adds the styles of a Material design card.
While this component can be used alone, it also provides a number of preset styles for common card sections, see below:

Element

Description

<mat-card-title>

Card title

<mat-card-subtitle>

Card subtitle

<mat-card-content>

Primary card content. Intended for blocks of text

<img mat-card-image>

Card image. Stretches the image to the container width

<mat-card-actions>

Container for buttons at the bottom of the card

<mat-card-footer>

Section anchored to the bottom of the card

<mat-card-header>

Optional header element to make rich header. It can contain mat-title, mat-subtitle and mad-card-avatar.

<img mat-card-avatar>

An image used as an avatar within the header.

Note: mat-card-title and mat-card-subtitle will get title and body-variant respectively as default typography.

 


Examples

Content card

Portrait

 

Flat

 

Destination card

Default

 

Without booking guide

 

Deals card