<mat-card> is not raised - there is no border

Question

I have this simple html:

 <mat-card>
    <mat-card-content>
      <code>{{file}}</code>
    </mat-card-content>
 </mat-card>

for some reason when the mat-card element is rendered, it's not raised - I am looking to get something like this:

does anyone know if I might be missing some additional CSS? I don't get it.

Solution 1

You probably just need a margin in your mat-card.

<mat-card style="margin:2em;">
...more code
</mat-card>

Here's a stackblitz demo

Solution 2

My issue was that I didnt have a theme imported in my styles.css:

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

Comments

[jones-chris]

I also had to add: border: 1px solid; box-shadow: -1px 1px #77aaff, -2px 2px #77aaff, -3px 3px #77aaff, -4px 4px #77aaff, -5px 5px #77aaff; per stackoverflow.com/questions/4620239/…

[brijmcq]

@jones-chris have you checked this material.angular.io/guide/elevation, you can also use the class mat-elevation-z[0-24] so adding another css like above might not be necessary

[jones-chris]

No, I haven't. Thanks for mentioning it! I'll give it a try :).

[philthomas26]

despite angular CLI asking you what style you want it needed setting manually for me ...

[RedKlouds]

My issue was that I did not have the @import '~@angular/material/prebuilt-themes/deeppurple-amber.css'; in my style.css