Angular Card

<mat-card> is a content container for text, photos, and actions in the context of a single subject.

Basic cards

The most basic cards require only a <mat-card> element with some content. However, Angular Material provides several preset sections that you can use inside <mat-card> :

These elements primarily serve as pre-styled content containers without any additional APIs. However, they align property on <mat-card-actions> can position the actions at the 'start' or 'end' of the container.

Card headers

In addition to the sections mentioned above, <mat-card-header> gives the ability to add a rich header to a card. This header can contain:

Title groups

<mat-card-title-group> can be used to combine a title, subtitle, and image into a single section. This element can contain:

One of:

Accessibility

Cards can be used in a wide variety of scenarios and can contain many different types of content. Because of this dynamic nature, appropriate accessibility treatment depends on how the <mat-card> is used.

Groups, Regions, and Landmarks

Many ARIA roles communicate that a part of the UI represents some semantically meaningful whole. Depending on what the content of the card means for your application, role="group", role="region", or one of the historical roles should usually be applied to the <mat-card> element.

A role is unnecessary when the card is used as a purely decorative container that does not convey a meaningful grouping of related material to a single theme. In these cases, the content of the card must follow standard practices for document content.

Center

Depending on how the card is used, it may be appropriate to implement a tabindex for the <mat-card> element. If the card is the primary mechanism the user interacts with the application, then tabindex="0" is appropriate. If the card can be focused, but it is not part of the document flow, then tabindex="-1" is appropriate.

If the card serves as a purely decorative container, it doesn't need to be a table. In this case, the card contents should follow the general best practices for tab order.