A card is a content container for text, images, links, and actions that are used to group the data of a single subject. Cards can have a header, a body, an image, or links, which can be displayed to the user based on their availability and functionality. Angular Material provides a module named MatCardModule, which provides the <mat-card> directive. We will use this to group the content of our application.

A basic example of creating a card is given as follows:

<mat-card class="z-depth" >
 <mat-card-title><a href="" primary >Packt Books</a></mat-card-title>
 <mat-card-subtitle>Family of wonderful Authors and Readers
   </mat-card-subtitle>
 <mat-card-content>
 We are learning to create wonderful cards. Each card has some specific 
  data to be displayed to users.
 </mat-card-content>
<mat-card-actions> <button mat-raised-button>Tweet This</button>
  <button mat-raised-button>Share</button></mat-card-actions>
</mat-card>

In the preceding code, we made use of the directives provided by MatCardModule. We will use <mat-card> as a wrapper directive in order to group the content. By using the <mat-card-title> directive, we are setting the title of the card. We are setting a subtitle by using the  <mat-card-subtitle> directive inside the <mat-card> directive. Inside <mat-card-content>, we place all the content that we need to display to the user. Each card may have the actions that we want the user to perform, such as sharing, editing, approving, and so on. We can display the card actions using the <mat-card-actions> directive.

Run the app using the ng serve command, and we should see the output shown in the following screenshot:

Notice that we have added some content inside the Angular Material card. Are you wondering what kind of content can be displayed inside the cards? You name it, and we can use it. We can add links, images, lists, accordions, steppers, and more. In the next section, we will learn how to add lists to our cards.