Shadow

Material design hierarchy

It is realy important in material design to know 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. A z-depth-0 can be used to remove shadows from elements that have z-depths by default.

z-depth-0

z-depth-1

z-depth-2

z-depth-3

z-depth-4

z-depth-5


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

For more detailed informations please visit: http://materializecss.com/shadow.html