We have six main elevation levels:
- Suppressed
- Flat
- Action
- Fixed
- Raised
- Overlay
Elevations represent levels of importance differently according to specific components.
Elevation levels with higher numbers are usually visually closer to the user and have typically larger and more spread shadow.
| Visual style | Elevation levels | Token |
|---|---|---|
| Suppressed (Level 1) This level should be used for cases where you want to suppress content that isn’t so important or draw attention to components (such as Tiles) that should have better visibility on a Cloud background. Usage: Suppressed Modal section | none | |
| Flat (Level 2) This level is used for elements on a suppressed or white background. These elements have no action, so the level has a 1 px border instead of an actionable shadow. Usage: Card | none | |
| Action (Level 3) This level is applied to elements that are actionable so it’s visually clear that you can click on the element. Usage: Tile | boxShadowAction | |
| Action active (Level 3.5) This level is applied to actionable elements after interacting with them but not taking the action (such as hovering). Usage: Tile on hover/active | boxShadowActionActive | |
| Fixed (Level 4) This level is applied only to elements that are fixed in position at the top while the page is scrolled. Usage: Fixed header in Modal NavigationBar | boxShadowFixed | |
| Fixed reverse (Level 4) This level is applied only to elements that are fixed in position at the bottom while the page is scrolled. Usage: Fixed footer in Modal | boxShadowFixedReverse | |
| Raised (Level 5) This level is used on components that need attention. The shadow raises the component and users can spot that the element has greater importance because it seems to be visually closer to them. Usage: Drawer Popover Tooltip | boxShadowRaised | |
| Raised reverse (Level 5) This level is applied to elements that are like those in Raised but are stuck to the bottom of the page. Usage: Popover on mobile Tooltip on mobile | boxShadowRaisedReverse | |
| Overlay (Level 6) This level is used basically only in connection with the Modal component, which also has a background overlay with opacity. The elevation communicates to users that they should focus on only one element. Usage: Modal | boxShadowOverlay |