How to customize cards in Angular Material

Question

Im using Angular Material for a web app as a hobby project. I checked the official reference and couldn't figure out how to customize the appearance of cards. For instance, consider my use case: I'd like the card image to fill the entire card and have some text overlay on it. How to do that? The code illustration provided in the reference is currently like:

<md-card>
      <img src="img/washedout.png" class="md-card-image" alt="Washed Out">
      <md-card-content>
        <h2 class="md-title">Paracosm</h2>
        <p>
          The titles of Washed Out's breakthrough song and the first single from Paracosm share the
          two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well...
        </p>
      </md-card-content>
    </md-card>

The above code will render as shown in like https://material.angularjs.org/#/demo/material.components.card

Do I have to override the css or is there any other way?

Answer 1

In a couple of days they are releasing angular material version 0.10 - this will include new layouts for cards; previous versions need to do this via css & custom directives/divs.

Answer 2

you can edit md-card elements with css for instance if you want to edit md-card-content you simply edit with css [md-card-content]{ // your css code}

Answer 3

Here is a codepen. Just change the CSS for any ( all) of these

 <md-content> ,  <md-content-footer> ,  <md-card-title> ,   
        <md-card-header-text>, <md-card-header>

or dynamically assign any css class for the content like below:

<md-card-content ng-class="navClass('{{user}}')">

Answer 4

html class

<div fxLayout="row wrap"  fxLayout.lt-sm="column wrap"  fxLayoutAlign="center" fxLayoutGap="10px">
  <div fxFlex="20%"  *ngFor="let num of pageSlice">
    <mat-card class="mat-elevation-z4 card" >
      <mat-card-header>
        <div class="addBtn">
          <p>{{status}}</p>
        </div>
      </mat-card-header>
      <img  mat-card-image class="imgEffect" src={{imgurl}}>
      <mat-card-actions >
        <mat-card-title>Category Name {{num}}</mat-card-title>
        <mat-card-subtitle >RS: {{ price}} <span class="disTxt">RS: {{oldprice}}</span></mat-card-subtitle>
          <button class="btnAddCart" mat-button>  <mat-icon class="icnCart">shopping_cart</mat-icon>Buy Now</button>
        
      </mat-card-actions>
    </mat-card>

  
  </div>
</div>

<div class="pagination">
  <mat-paginator [length]="currentData.length"
  [pageSize]="10"
  [pageSizeOptions]="[10, 15, 20]"
  (page)="onPageChange($event)">
</mat-paginator>
</div>

css class

    .card {
      // background-color: #e60000;
      border-top-left-radius: 20px;
      border-bottom-right-radius: 20px;
      max-width: 220px;
      margin-top: 20px;
      margin-bottom: 20px;
      box-shadow: none; 
      display: flex;
      // background-image: linear-gradient(315deg, #f9ea8f 0%, #aff1da 74%);
    }
    .card:hover {
        box-shadow: 0 3px 10px rgb(0 0 0 / 0.3);
        }
    
      .btnSection {
        display: flex;
        background-color: #00b712;
        width: 100%;
        flex-direction: row;
        justify-content: center;
        align-items: center;
      }
    
    .btnAddCart {
      background-color: #00b712;
      background-image: linear-gradient(315deg, #00b712 0%, #5aff15 74%);
      color: white;
      height: 33px;
      text-align: center;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-top-left-radius: 20px;
      border-bottom-right-radius: 20px;
    }
    
    
    .btnAddCart:hover {
        box-shadow: 0 3px 10px rgb(0 0 0 / 0.3);
      background-color: #00b712;
      background-image: linear-gradient(315deg, #5aff15 0%, #00b712 74%);
        }
      mat-card-title {
        font-size: 18px;
      }
    
      mat-card-subtitle {
        font-size: 16px;
      }
    
      .disTxt {
        font-size: 14px;
        text-decoration: line-through;
      }
    
      .addBtn {
        background-color: #5aff15;
        // background-image: linear-gradient(315deg, #00b712 0%, #5aff15 74%);
        color: white;
        height: 23px;
        width: 60px;
        text-align: center;
        border-top-left-radius: 20px;
        border-bottom-right-radius: 20px;
      }
    
      mat-card-actions {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        flex-direction: column;
      }
    
      mat-card-header {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        text-align: center;
      }
    
      .icnCart {
        font-size: 18px;
      }
    
    .pagination {
      display: flex;
      justify-content: center;
      align-items: center;
    }

ts class

    import { Component, OnInit } from '@angular/core';
    import { PageEvent } from '@angular/material/paginator';
    
    @Component({
      selector: 'app-grocery-page-component',
      templateUrl: './grocery-page-component.component.html',
      styleUrls: ['./grocery-page-component.component.scss']
    })
    export class GroceryPageComponentComponent implements OnInit {
      public currentData:any;
      imgurl:any;
      status:any;
      price:any;
      oldprice:any;
      public pageSlice:any ;
    
      constructor() { 
        this.currentData=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31];
        this.price='94';
        this.oldprice='48';
        this.imgurl="../../assets/categoryIcons/vegi.png"
        this.status="New";
        this.pageSlice=this.currentData.slice(0,10)
      }
      ngOnInit(): void {
      }
    
      onPageChange(event: PageEvent) {
        console.log(event);
        
        const startIndex=event.pageIndex * event.pageSize;
        let endIndex = startIndex + event.pageSize;
        if(endIndex>this.currentData.length) {
          endIndex = this.currentData.length;
        }
        this.pageSlice =this.currentData.slice(startIndex,endIndex)
      }
    
    }