Every component is given a starting elevation value, or a resting elevation, which is a state the component rest in before responding to any user interaction or system event. The component type usually determines its resting elevation, since similar types of components usually have the same characteristics, and therefore the same resting elevation.

Resting elevations on desktop are usually shallower than on those on mobile devices because other cues, like hover states, communicate when a component is interactive.

Resting elevation

A "dynamic elevation offset" is a preset elevation that a component moves to when not resting, usually in response to user input or a system event. These preset "dynamic elevation offsets" are usually consistent within each type of component.

Dynamic elevation offsets

"All elements have default values for resting elevation and dynamic elevation offsets. Certain components are positioned at higher elevations than others, establishing a consistent elevation order across all components."

University of Michigan - Ann Arbor

"Elevation is the relative distance between two surfaces along the z-axis."

Component elevation values:
- Nav drawer: 16dp
- App bar: 4dp
- Card: 1dp to 8dp
- FAB: 6dp
- Button: 2dp to 8dp
- Dialog: 24dp

Elevation in Design Science 

Material Design Documentation

"Content relates to other content depending on whether they are at similar or different elevations"

Elevation Hierarchy

"Elevation in Material Design is measured as the distance between Material surfaces. The distance from the front of one Material surface to the front of another is measured along the z-axis in density-independent pixels (dps) and depicted (by default) using shadows."

Measuring elevation

"Surfaces at different elevations do the following:

- Allow surfaces to move in front of and behind other surfaces, such as content scrolling behind app bars
- Reflect spatial relationships, such as how a floating action button’s shadow indicates it is separate from a card collection
- Focus attention on the highest elevation, such as a dialog temporarily appearing in front of other surfaces

Elevation can be depicted using shadows or other visual cues, such as surface fills or opacities."

Material Design shows elevation using shadows.

The elevation system

"To successfully depict elevation, a surface must show:

1. Surface edges, contrasting the surface from its surroundings
2. Overlap with other surfaces, either at rest or in motion
3. Distance from other surfaces"

Depicting elevation

- Changes in shadows
- Displaying overlap
- Pushing
- Scaling
- Parallax

Learn Before

Related

Learn After