# Elevation

![](https://2356004247-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lbc6L-VCMDVnzwwpCOK%2F-Lq6R1f85U64ydh3PyY9%2F-Lq6eb1jGaM-JWs0ZA7E%2FUntitled%202.gif?alt=media\&token=4778fa0b-97f0-4b89-97a0-da45ee8e05d3)

## 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**.

![](https://2356004247-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lbc6L-VCMDVnzwwpCOK%2F-LzL1Hwjhj6A_buVnJkb%2F-LzL4_ZRvpCZ2IPgZptw%2F7-1-2-Elevation-Levels.png?alt=media\&token=4dfeb1ae-e6ee-4c91-b544-5946258cb4ac)

![](https://2356004247-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lbc6L-VCMDVnzwwpCOK%2F-LzL1Hwjhj6A_buVnJkb%2F-LzL2JHcAXbdfcyyIlE3%2F7-1-1-Elevation.png?alt=media\&token=3602d9c8-4dac-4cd5-be14-fbdb1342938a)

#### Example elevation of different components:

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

## 🧑🏻‍💻 Usage Guidelines

Our Zoom Design team has created extension called [Eleva](https://github.com/johnthachil/zeplin-extension-elevation) to display dp level of shadows in zeplin.

![eleva](https://2356004247-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lbc6L-VCMDVnzwwpCOK%2F-Lq6R1f85U64ydh3PyY9%2F-Lq6j_OraN0YKWPs3nuE%2F68747470733a2f2f692e6962622e636f2f536e787268637a2f456c6576612d5a65706c696e2d457874656e73696f6e2d322e6a7067.jpeg?alt=media\&token=f75ed9bf-737c-4708-ac6c-f4a18ca11d64)