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.

z-depth-0
z-depth-1
z-depth-2
z-depth-3
z-depth-4
z-depth-5

HTML

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