Adding ripple to mat-card without the card expanding on click/touch

should be as easy as adding matRipple to the mat-card

    <mat-card class="action-card" matRipple>
        <mat-card-title>
            {{content}}
        </mat-card-title>
        <mat-card-content>
          desc
        </mat-card-content>
      </mat-card>

make sure you inject the MatRippleModule into your module.ts though, that threw me off for a while

Add a class (i.e. last-child) to the last child of your mat-card (in your case mat-card-content) and define the following style:

.mat-card .last-child {
  margin-bottom: 0;
}

The problem is that matRipple adds an zero-height element to the mat-card while Angular Material only removes the margin-bottom from the last child.

If you add the footer element (with or without content) you won't need additional CSS and this will lock the height when activating the ripple effect.

<mat-card mat-ripple>
  <mat-card-content>This is content</mat-card-content>
  <mat-card-footer></mat-card-footer>
</mat-card>