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. In Sass, include the mixin rather than extending the class: @include 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="s12 m4 l3">
    <div class="z-depth-0">0</div>
  </div>
  <div class="s12 m4 l3">
    <div class="z-depth-1">1</div>
  </div>
  <div class="s12 m4 l3">
    <div class="z-depth-2">2</div>
  </div>
  <div class="s12 m4 l3">
    <div class="z-depth-3">3</div>
  </div>
  <div class="s12 m4 l3">
    <div class="z-depth-4">4</div>
  </div>
  <div class="s12 m4 l3">
    <div class="z-depth-5">5</div>
  </div>
</div>

Sass

The class list is generated from the same map as the mixin, so they cannot drift. Prefer the mixin inside component styles; @extend .z-depth-2 across files is not supported.

.my-panel {
  @include z-depth("2");
}

There is also z-depth-1-half, used by some components for an in-between hover elevation.