References

• Material Documentation

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.

Card Helper

Usage Rules

For default ‘blue’ card, use in cases where the amount of information required to output is deemed ‘too much’ to display within a Tooltip (decision of this use should be discussed among development team).

For warnings, ‘yellow’ card should be used.

Example

Structure

• Use <mat-card class="mat-card card-helper"> for default ‘blue’ helper card

• Use <mat-card class="mat-card card-helper card-helper-warning"> for default ‘yellow’ helper card