Shadow

In material design, everything should have a certain z-depth that determines how far raised or close to the page the element is.

You can easily apply this shadow effect by adding a class="z-depth-2" to an HTML tag. Alternatively you can extend any of these shadows with Sass using @extend .z-depth-2. A z-depth-0 can be used to remove shadows from elements that have z-depths by default.

<div class="row">
  <div class="col s12 m4 l3">
    <p class="z-depth-0 p-3">0</p>
  </div>
  <div class="col s12 m4 l3">
    <p class="z-depth-1 p-3">1</p>
  </div>
  <div class="col s12 m4 l3">
    <p class="z-depth-2 p-3">2</p>
  </div>
  <div class="col s12 m4 l3">
    <p class="z-depth-3 p-3">3</p>
  </div>
  <div class="col s12 m4 l3">
    <p class="z-depth-4 p-3">4</p>
  </div>
  <div class="col s12 m4 l3">
    <p class="z-depth-5 p-3">5</p>
  </div>
</div>