Home » Angular Card

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> :

Element Description
<mat-card-title> Card title
<mat-card-subtitle> Card subtitle
<mat-card-content> Primary card content. Intended for blocks of text
<img mat-card-image> Card image. Stretches the image to the container width
<mat-card-actions> Container for buttons at the bottom of the card
Section anchored to the bottom of the 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:

Element Description
<mat-card-title> A title within the header
<mat-card-subtitle> A subtitle within the header
<img mat-card-avatar> An image used as an avatar within the header

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:


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.


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.

You may also like