Skip to main content

angular material - How to use Card

app.component.html 

<h2 style="padding-top:25px; padding-bottom:25px;">
    Angular Material - How to use Card
</h2>


<mat-card>
    <mat-card-title>Card Title</mat-card-title>
    <mat-card-subtitle>Card Subtitle</mat-card-subtitle>

    <mat-card-content>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Nam tincidunt elit non molestie rutrum.
        Donec blandit risus et sem iaculis aliquam.
        Cras feugiat pharetra dolor, ac euismod tellus maximus eu.
        Etiam dignissim enim vel lacus molestie, in iaculis tellus
        ultrices. Integer rhoncus tristique felis ut dignissim.
    </mat-card-content>

    <mat-card-actions align="end">
        <button mat-raised-button>No</button>
        <button mat-raised-button>Yes</button>
    </mat-card-actions>

    <mat-card-footer>Card Footer</mat-card-footer>
</mat-card>
app.module.ts [import] 

import {MatCardModule} from '@angular/material/card'
import {MatButtonModule} from '@angular/material/button'
More Angular tutorials
Labels: