Hello, in this tutorial, I will be talking about the Card Component from Angular Material.

import { MatCardModule } from '@angular/material/card';

To begin, go to the app component html page and add the mat-card element.

<mat-card>

This will create blank area for our card content. To see it better, we will wrap our card within a div and give it some styles so we can see the card.

Adding Header

To add the header section, add the mat-card-header element inside our card. With this, we can add the title, subtitle, and the icon for our card.

Adding Content

To add content, we just place our contents underneath the header element. 

For texts, we should put them inside the mat-card-content element. 

And for buttons and other interactive elements, we should place them inside the mat-card-actions element.

This will correctly align the elements inside the container.

One advantage of using the material card actions element is that we can change the alignment of the elements by setting the align property. We can use start to align the elements to the left or end to align the elements to the right.

<mat-card-actions align="start">

Adding Footer

Lastly to add the footer, just add the mat-card-footer element to the card. This will create a container that will be anchored to the bottom of the card. 

We can put content inside and it will show up at the bottom.