Drift Design System
Search…
⌃K

Elevation

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

Measuring elevation

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.

Example elevation of different components:

  1. 1.
    Nav drawer: 16dp
  2. 2.
    App bar: 4dp
  3. 3.
    Card: 1dp to 8dp
  4. 4.
    FAB: 6dp
  5. 5.
    Button: 2dp to 8dp

🧑🏻‍💻 Usage Guidelines

Our Zoom Design team has created extension called Eleva to display dp level of shadows in zeplin.
eleva