Elevation
The implied measured distance above the base layer is the elevation. Its effect on a layer is defined by the intensity and depth of the shadow it casts.
Types
Specifications
Designers and developers can create correct, pixel-perfect selectors by implementing these specifications.
Guidelines
Elevation scale
Shadows bring an element into focus as a reference to the physical world. Elements can be stacked on top of each other but cannot pass through each other.
The scale of distances are on a scale from 0 to 24.
elevation
- 0px
- 2px
- 4px
- 8px
- 16px
- 24px
Application
- flat
- TBA
- Cards, tool tips
- Popovers, toasts
- Cards (on hover), side navigation
- Modals
Do
- Do use elevation/shadows to demonstrate differences between two components.
- Using shadows and outlines increases the ease and speed of finding a component when scanning pages.
- Using a shadow or stroke outline around a component improves one’s ability to determine whether or not it can be interacted with.
Don't
- Use elevation on icons
- Use elevation on text
- Use elevation for style only