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>