Angular Material Basic Card Section - GeeksforGeeks

04 Jan, 2022
Angular Material is a UI component library which is developed by Google so that Angular developers can develop modern applications in a structured and responsive way. By making use of this library, we can greatly increase the user experience of an end-user thereby gaining popularity for our application. This library contains modern ready-to-use elements which can be directly used with minimum or no extra code.
The <mat-card> is a container for the content that can be used to insert the media, text & action in context to the single subject. The basic requirement for design the card is only an <mat-card> element that has some content in it, that will be used to build simple cards.
Syntax:
<mat-card> Content </mat-card>
This element has opening tag followed with the content or some code & ended with the closing tag. Angular Material facilitates the number of preset sections that can be used with the <mat-card> element, which is given below:
<mat-card-title>
Title of the respective card
<mat-card-subtitle>
The subtitle of the respective card
<mat-card-content>
All the data and information which is the body of the card needs to be written in this section. 
<mat-card-actions>
This tag is used to mention all the events like submit, cancel and etcto be written in the card.
<mat-card-header>
It is used to mention all the details on the header of the card like title, subtitle etc.
This section is anchored to the bottom of the card., that contains the copyright symbol with year, company name, etc.
The above elements are primarily used for pre-styled content containers, instead of using any additional APIs. However, the align property with <mat-card-actions>, is mainly used to position the actions at the ‘start’ or ‘end’ of the container.
Installation Syntax:
In order to use the Basic Card Section in the Angular Material, we must have Angular CLI installed in the local machine, that will help to add and configure the Angular material library. After satisfying the required condition, type the following command on the Angular CLI:
ng add @angular/material
Please refer to the Adding Angular Material Component to Angular Application article for the detailed installation procedure.
Project Structure:
After successful installation, the project structure will look like the following:
Example: The below example illustrates the implementation of the Angular Material Card.
app.module.ts
import { NgModule } from "@angular/core";import { BrowserModule } from "@angular/platform-browser";import { FormsModule } from "@angular/forms";  import { AppComponent } from "./app.component";import { MatCardModule } from "@angular/material/card";import { MatButtonModule } from "@angular/material/button";  @NgModule({  imports:   [BrowserModule,    FormsModule,    MatCardModule,    MatButtonModule  ],  declarations: [AppComponent],  bootstrap: [AppComponent],})export class AppModule {}
app.component.css
@import "~material-icons/iconfont/material-icons.css";p {  font-family: "Lato", sans-serif;  text-align: justify;}.example-card {  max-width: 450px;  margin: 10px;}  mat-card-subtitle {  font-size: 18px;}  mat-card-title {  color: green;  font-size: 55px;  justify-content: center;  display: flex;}
app.component.html
<mat-card class="example-card">    <mat-card-header>        <mat-card-title>GeeksforGeeks</mat-card-title>        <mat-card-subtitle>             One stop solution for all CS Subjects         </mat-card-subtitle>    </mat-card-header>    <mat-card-content>        <p>            With the idea of imparting programming             knowledge, Mr. Sandeep Jain, an IIT Roorkee             alumnus started a dream, GeeksforGeeks.             Whether programming excites you or you feel             stifled, wondering how to prepare for             interview questions or how to ace data             structures and algorithms, GeeksforGeeks             is a one-stop solution. With every tick of             time, we are adding arrows in our quiver.            From articles on various computer science             subjects to programming problems for practice,            from basic to premium courses, from technologies            to entrance examinations, we have been building            ample content with superior quality. In a short            span, we have built a community of 1 Million+             Geeks around the world, 20,000+ Contributors and            500+ Campus Ambassador in various colleges across            the nation. Our success stories include a lot of            students who benefitted in their placements and             landed jobs at tech giants. Our vision is to             build a gigantic network of geeks and we are             only a fraction of it yet.        </p>      </mat-card-content>    <mat-card-actions>        <button mat-button style=                "background-color:blue;                  color:white">             LIKE         </button>        <button mat-button style=                "background-color:green;                  color:white">            SHARE         </button>    </mat-card-actions></mat-card>
app.component.ts
import { Component } from '@angular/core';  @Component({  selector: 'my-app',  templateUrl: './app.component.html',  styleUrls: [ './app.component.css' ]})export class AppComponent  {}
Output:
Reference: https://material.angular.io/components/card/overview#basic-card-sections
bijaybhaskar
Angular-material
Picked
AngularJS
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Angular PrimeNG Dropdown Component
Angular PrimeNG Calendar Component
Angular PrimeNG Messages Component
Angular 10 (blur) Event
How to make a Bootstrap Modal Popup in Angular 9/8 ?
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to update Node.js and NPM to next version ?
How to create footer to stay at the bottom of a Web page?
How to apply style to parent if it has child with CSS?