code

Shadows

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="col xs12 m2">
            <p class="z-depth-1">z-depth-1</p>
          </div>
          <div class="col xs12 m2">
            <p class="z-depth-2">z-depth-2</p>
          </div>
          <div class="col xs12 m2">
            <p class="z-depth-3">z-depth-3</p>
          </div>
          <div class="col xs12 m2">
            <p class="z-depth-4">z-depth-4</p>
          </div>
          <div class="col xs12 m2">
            <p class="z-depth-5">z-depth-5</p>
          </div>