Outlined mat-card

Question

I am using Material Design Angular components.

I want to use mat-card component but to have it outlined, not raised. What is the proper way to do that? Is it done through some set of Material Angular directives or do I use Material Design classes?

Thanks

Answer 1

You can flatten the mat-card by use of the elevation css classes/mixins: https://material.angular.io/guide/elevation

This will remove the raised:

<mat-card class="mat-elevation-z0">
...
<mat-card>

Then you can simply apply a custom class with a border style or add it to the mat-card in your component's css

<mat-card class="mat-elevation-z0 outline">
...
<mat-card>

.outline {
    border-style: solid;
    border-width: medium;
}