Elevation

Material Design box-shadow utilities. Controls the box-shadow CSS property.

Classes

Class	Shadow level
elevation-0	No shadow
elevation-1	Very subtle
elevation-2	Subtle
elevation-3	Mild
elevation-4	Noticeable
elevation-5	Moderate
elevation-6	Medium
elevation-7	Medium+
elevation-8	Prominent
elevation-9	Strong
elevation-10	Strong+
elevation-11	Very strong
elevation-12	High
elevation-13	High+
elevation-14	Very high
elevation-15	Very high+
elevation-16	Deep
elevation-17	Deep+
elevation-18	Very deep
elevation-19	Very deep+
elevation-20	Maximum
elevation-21	Maximum+
elevation-22	Ultra
elevation-23	Ultra+
elevation-24	Highest

Recommended levels by component

Component	Level
Default card	elevation-1 or elevation-2
Hovered card	elevation-4
Navigation bar	elevation-4
Dropdown menu	elevation-8
Side panel	elevation-16
Modal dialog	elevation-24

Examples

<div class="elevation-0 pa-4 radius-4">No shadow</div>
<div class="elevation-2 pa-4 radius-4">Light card</div>
<div class="elevation-4 pa-4 radius-4">Raised card</div>
<div class="elevation-8 pa-4 radius-4">Floating element</div>
<div class="elevation-16 pa-4 radius-4">Side panel</div>
<div class="elevation-24 pa-4 radius-4">Dialog</div>