title: <mat-card> is not raised - there is no border
body: <p>I have this simple html:</p>
  
  <pre><code> &lt;mat-card&gt;
      &lt;mat-card-content&gt;
        &lt;code&gt;{{file}}&lt;/code&gt;
      &lt;/mat-card-content&gt;
   &lt;/mat-card&gt;
  </code></pre>
  
  <p>for some reason when the mat-card element is rendered, it's not raised -  I am looking to get something like this:</p>
  
  <p><a href="https://i.stack.imgur.com/PLqKC.png" rel="noreferrer"><img src="https://i.stack.imgur.com/PLqKC.png" alt="enter image description here"></a></p>
  
  <p>does anyone know if I might be missing some additional CSS? I don't get it.</p>