Measured from one surface to another, an element’s elevation indicates the distance between surfaces and the depth of its shadow, creating permanent or temporary visual hierarchy on the UI elements.

Component reference elevation

Below you'll find 7 different levels of elevation for each type of component and context.

Check elevation utilites in base css.

Level 1

Cards and other flat components

Level 2

Dropdows - includes a subtle border

Level 3

Horizontal tabs, action-bar, right drawer, and navigator

Level 4


Level 5

Card hover

Level 6

Dropdown inside hovered card, inside action-bar, and inside main header

Level 7