Shadow

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

Shadow classes

You can add the class raised-{0-24} to any item to give it a shadow. The number represents the elevation in dp. There are also:

• raised-{0-24}
• raised-hover-{0-24}
• raised-focus-{0-24}
• raised-active-{0-24}

Example

<div class="raised-2 raised-hover-4 raised-active-8">Raised Element</div>