Angular Material - Cards

Group related content and actions in a card layout.

How it works

Cards use md-card and related elements to group a concise set of information and actions. Establish a clear heading and reading order, avoid excessive nested cards, and ensure the layout works when card content grows or reflows on narrow screens.

Practical checklist

• Confirm whether the application uses AngularJS Material 1.x or modern Angular Material for Angular v2+.
• Use meaningful labels, keyboard-accessible interactions, and visible focus states.
• Test responsive behavior, validation, and assistive-technology output.
• Review dependency support and security before maintaining a legacy deployment.

Further reading: Tutorialspoint: Angular Material - Cards · AngularJS Material legacy documentation · Current Angular Material documentation.

Back to course overview · Previous: Angular Material - Bottom Sheet · Next: Angular Material - Widgets