Guidelines
Guidelines
Usage
An Elevation should:
- Be used for overlapping elements with the same or similar color to achieve separation and hierarchy of elements.
- Be used purposefully to not clutter the layouts.
- Be applied to an entire element rather than just a part of it. This will keep the element
- Never be used for a page's main elements, such as navigation bars or footers, as they frame the content and do not require elevation.
- Retain its assigned level throughout the user's interaction, as an interaction does not change the level of the element.
- Be used consistently for similar or grouped elements, such as on Cards in a rail or feed.
Elevation 1-above should:
- Be the default value when an Elevation is applied.
- Be used to draw the user's attention to an element by lifting it off the surface, such as a Card.
Elevation 2-above should:
- Be used sparingly.
- Be used on temporarily available elements which overlay other elements, such as a Tooltip or large modal windows.
- Be used in combination with a full-screen glass color backdrop to separate a more complex elevated element from its background, such as large modal windows.