Elevation

Shadow

Shadows can be used to visually define a component from its surrounding and establish its spatial relationship within the overall layout.

There are four levels of shadow available to allow for a variety of spatial relationships within a given layout.

Z-index

Z-index is used to set the layer order of elements. This is critical for elements and components that visually "sit on top" of others within a view such as a dialog and its overlay or a slide-out drawer. While properly setting the z-index ensures certain components are not obscured, it does not necessarily establish the perceived visual depth between surfaces that shadow does.

Values are available from 0 to 1000 in increments of 100. A value of -100 is available when elements need to be positioned below the base level of 0.