A card component is a kind of container that contains different elements like text, images, forms, maps, buttons, links, and any other elements. As per the official documentation, Angular Material Card Component is a container component that holds title text, image, and action buttons to represent a single or specific subject.

The <mat-card> element is responsible to implement the card component of the Angular Material and it is a container for the content that can be used to insert the various elements such as media files, text & action buttons in context to the single subject. The basic need for designing the card component is only an <mat-card> element that has some child content in it, that will be used to build simple card components.

The Card Component can be useful in a scenario where we want to show data about a single model with all its properties. Basically, a card component follows the structure in which different elements can be implemented based on the region defined inside the card; let’s see the basic syntax of the card components.

Syntax

 <mat-card>
 </mat-card>

Above is the selector of the material card component, and it is used to implement the card component into our angular HTML templates, moreover, we can have a specific structure of the card such as header, content, and footer section to structure the overall card component.

Example

 <mat-card>
 <mat-card-header>
 This is card Header
 </mat-card-header>
 <mat-card-content>
 This is card Content
 </mat-card-content>
 <mat-card-footer>
 This is card Footer
 </mat-card-footer>
 </mat-card>

As you can see in the above example that the body of the card is distributed into three different child sections.

• mat-card-header: To represent the header section of the card component

• mat-card-content: To show the card content and it can be any element 

• mat-card-footer: To show the card footer content

Let’s cover all the possible ways to use card components.

Simple Card

If we just want to show card elements on our page, then we can have a simple card component without having extra selectors like a header, and footer and it can be used as it is.

Generally, the simple card component can be used for the purpose of showing a single image, iframe, defining a menu, and showing textual content hence, no child elements will be required to work with the <mat-card> component.

Below is the syntax and example that show how to integrate simple and straightforward card components. 

Syntax

<mat-card> … </mat-card>

Example

 <mat-card>
 <p>This Is Simple Card Component </p>
 </mat-card>

So when you run the above example, you will get an output like this.

Card With Title and Subtitle

Apart from the basic card component without any specific sections, We can provide a Title and Subtitle as well, we can make use of the in-built selector with the card header, below you can find the syntax for the same.

For showing the specific card component title and subtitle, we can opt for the additional selectors as given below.

1. <mat-card-title> : Selector that is used to show the card title
2. <mat-card-subtitle> Selector to show the subtitle for the card component

Syntax

 <mat-card-title> … <mat-card-title>
 <mat-card-subtitle> … <mat-card-subtitle>

Example

<mat-card>
 <mat-card-header>
 <mat-card-title>This is Main Title</mat-card-title>
 <mat-card-subtitle>This is Sub Title</mat-card-subtitle>
 </mat-card-header>
</mat-card>

After running the above example you can have an output as given below where the main title and the subtitle are aligned in multiple lines wrapped by the card component as a primary container.

Card with header and footer

We have seen the example already that the card component can be divided into multiple sections i.e. header, content, and footer So that we can have a card in a distributed manner, and as per the structure we can implement elements inside the card sections. There are two selectors available to show the header and footer.

1. <mat-card-header> : To show the header of the card component

2. <mat-card-footer> To show the footer of the card component

As the name suggests, the header and footer parts can have a different element to show details about the single model and its different properties, let’s see a simple example.

Example

<mat-card>
 <mat-card-header>
 This is card Header
 </mat-card-header>
 <mat-card-footer>
 This is card Footer
 </mat-card-footer>
</mat-card>

And when you run the above example, you will get an output like this.

In the output, we will get a structure like this, but do not worry about alignments and other design aspect, because we can customize our card component easily with a custom style sheet configuration.

Card with Content

We have just seen that we can use the header and footer section within the card to distribute elements throughout the card component, the same way we can provide the section for card content as well, you just need to follow the syntax, and can include any element inside content section.

Syntax

 <mat-card-content> … </mat-card-content>

Example

In this example, im just going to use a static image to show inside card content.

<mat-card>
 <mat-card-header>
 This is card Header
 </mat-card-header>
 <mat-card-content>
 <img src="./assets/logo.png" height="100px" width="300px"/>
 </mat-card-content>
 <mat-card-footer>
 This is card Footer
 </mat-card-footer>
</mat-card> 

As you can see, in the above example, I have used all the section header, content, and footer, and after running the above example you can have an output like this.

Card with image

Previously we have seen examples using static text as a part of the card, but we can have image elements with the card component as well. For that, there is a selector which is called mat-card-image which is used to include an image element in the card, and the selector is described below.

Syntax

 <img mat-card-image />

Example

 <mat-card>
 <mat-card-header>
 This is card Header
 </mat-card-header>
 <mat-card-footer>
 <img mat-card-image src="./assets/logo.png" height="200px" width="300px">
 </mat-card-footer>
 </mat-card>

So I have used the image element with the image source, and with the additional property mat-card-image, which stretches the image with the equal width of a container.

Card with action buttons

Sometimes we are required to perform a specific operation based on button click events, for that we can make use of the action buttons container for the card component. For that, we can use the selector called mat-card-actions to define a separate section into the card for action buttons as explained below.

 <mat-card-actions> … </mat-card-actions>

Example

 <mat-card>
 <mat-card-header>
 This is card Header
 </mat-card-header>
 <mat-card-actions>
 <button mat-raised-button color="primary">Like</button>
 <button mat-raised-button color="accent">Share</button>
 <button mat-raised-button color="warn">Subscribe</button>
 </mat-card-actions>
 </mat-card>

After running the above code snippet, you will get an output like this.

In the above example, I have used the material raised button which now acts as an action button, so this way we can include different action buttons within the action section of a material card component.

Combined Example

So far we have covered so many different options to try with material card components, now it’s time to implement most of the useful components into a single example. If you want to try the entire example, then you need to import different material components and should import and export them, for that please find the complete code below.

Complete Example Code

Module File

 // Material Components
 import {MatCardModule} from '@angular/material/card';
 import {MatDividerModule} from '@angular/material/divider';
 import {MatExpansionModule} from '@angular/material/expansion';
 import {MatListModule} from '@angular/material/list';
 import {MatStepperModule} from '@angular/material/stepper';
 import {MatTabsModule} from '@angular/material/tabs';
 import {MatTreeModule} from '@angular/material/tree';
 import { MatFormFieldModule , MatInputModule , MatButtonModule } from '@angular/material';
 
 imports: [
 MatCardModule,
 MatDividerModule,
 MatExpansionModule,
 MatListModule,
 MatStepperModule,
 MatTabsModule,
 MatTreeModule,
 MatFormFieldModule,
 MatInputModule,
 MatButtonModule
 ],
 exports: [
 MatCardModule,
 MatDividerModule,
 MatExpansionModule,
 MatListModule,
 MatStepperModule,
 MatTabsModule,
 MatTreeModule,
 MatFormFieldModule,
 MatInputModule,
 MatButtonModule
 ],

Html File

 <mat-card class="example-card">
 <img mat-card-image src="./assets/logo.png" alt="Photo of a Shiba Inu">
 <mat-card-header>
 <div mat-card-avatar class="avatarImage"></div>
 <mat-card-title>Card Title</mat-card-title>
 <mat-card-subtitle>Card Subtitle</mat-card-subtitle>
 </mat-card-header>
 <mat-card-content>
 <h3>This is the card content which is used to show some informaion to the end user</h3>
 </mat-card-content>
 <mat-card-footer>
 <h3>Copyright @ 2018 - Dotnettricks</h3>
 </mat-card-footer>
 <mat-card-actions>
 <button mat-raised-button color="primary">Like</button>
 <button mat-raised-button color="accent">Share</button>
 <button mat-raised-button color="warn">Subscribe</button>
 </mat-card-actions>
 </mat-card>

Style sheet (styles.css)

 @import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
 
 body { 
 font-family: Roboto, Arial, sans-serif;
 margin: 0;
 }
 
 .avatarImage
 {
 background-image: url('./assets/logo.png');
 background-size: inherit;
 }

And after implementing all of the components, it’s time to run above example and you will get output like this. For the above example to demonstrate the actual use of all the selectors, I have used many of them which are listed below.

• <mat-card>

• <mat-card-header>

• <mat-card-title>

• <mat-card-subtitle>

• <mat-card-content>

• <mat-card-footer>

• <mat-card-actions>

Summary

The Angular material card component can be quite handy when we need to show the set of elements with the visual touch of the information that can be image, media, text, table, form, and other such elements.

The Card component is generally a container for the content that can be used to integrate the media, text, videos, and some other action in the context of the single-subject such as movie details, product details, movie reviews, student history, etc. The basic requirement for integrating and using the card container is only an <mat-card> element that can have some content in it wrapped by its parent selector, which will be used to build simple cards.

So far we have covered different types of element that supports card component, with their appropriate syntax and the in the brief example that shows how to use it in a specific situation and at last its actual output that how it looks like, the same way you can use and implement card component into your application this way, I hope you will find this article helpful to learn Angular Material Card Component.