Content Comparison

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.