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

z-depth

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.

<div class="col s6 m3 l2"><p class="z-depth-1">z-depth-1</p></div><div class="col s6 m3 l2"><p class="z-depth-2">z-depth-2</p></div><div class="col s6 m3 l2"><p class="z-depth-3">z-depth-3</p></div><div class="col s6 m3 l2"><p class="z-depth-4">z-depth-4</p></div><div class="col s6 m3 l2"><p class="z-depth-5">z-depth-5</p></div>
add