Skip to end of metadata
Go to start of metadata

You are viewing an old version of this content. View the current version.

Compare with Current View Version History

« Previous Version 6 Next »

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.

  • No labels