Content Comparison

References

• Material Documentation

...

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 RulesExample

...

Usage

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 or information which is deemed to be an alert, the ‘yellow’ card should be used.

ExampleStructure

...

...

<mat-card class="mat-card card-helper">

...

  ...
</mat-card>

<mat-card class="mat-card card-helper card-helper-warning">

...

  ...
</mat-card>

Container

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

Alternate Theme

• Include the card-helper-warning for ‘yellow’ helper card.