Cards

mat-card with header, image, content, actions, and footer sections

Basic Card

mat-card with header, image, content, actions, and footer sections.

Card Title

Card Subtitle

This is the card content area with descriptive text and other elements.

Card footer

Code

Template

TypeScript

<mat-card style="border:1px solid var(--mat-sys-outline-variant);box-shadow:none;max-width:24rem;">
  <mat-card-header>
    <mat-icon mat-card-avatar>article</mat-icon>
    <mat-card-title>Card Title</mat-card-title>
    <mat-card-subtitle>Card Subtitle</mat-card-subtitle>
  </mat-card-header>
  <img mat-card-image src="https://picsum.photos/seed/card/300/150" alt="Card image" />
  <mat-card-content>
    <p>Card content area.</p>
  </mat-card-content>
  <mat-card-actions class="rui-flex rui-gap-2">
    <button mat-button color="primary">Action</button>
    <button mat-button>Cancel</button>
  </mat-card-actions>
  <mat-card-footer>
    <p>Card footer</p>
  </mat-card-footer>
</mat-card>