/
Card

Card

Owned by Amish Ladhu
Last updated: Feb 17, 2021
1 min read

References


Example

Usage

Structure

<mat-card> <mat-card-header> <mat-card-title>Panel Title</mat-card-title> </mat-card-header> <mat-card-actions> Actions Content </mat-card-actions/> <mat-card-content> <div class="content-padding-med"> Panel Content </div> </mat-card-content> <mat-card-footer> Panel Footer </mat-card-footer> </mat-card>

Container

  • Every ‘card’ should have a mat-card container, which formats its' content styles and spacing.

Header

  • Use <mat-card-header> for containing panel header content

  • Use <mat-card-title> within the <mat-card-header> for panel titles

Actions

  • Use <mat-card-actions> after the header. This space is most frequently allocated for buttons, of which will be styled automatically once placed in this container.

Content

  • Use <mat-card-content> the content within the card.

  • Utilise ‘content-padding’ classes to achieve the 20px spacing as outlined here.

Footer

  • Use <mat-card-footer> for the base of the card. This space is most frequently allocated for buttons, of which will be styled automatically once placed in this container.