Elevation

  1. Suppressed
  2. Flat
  3. Level 1
  4. Level 2
  5. Level 3
  6. Level 4
  7. Fixed
Visual styleElevation levelsToken
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
Level 1
This level is applied to elements that are actionable so it’s visually clear that you can click on the element.
Usage:
Tile
elevationLevel1BoxShadow
Level 2
This level is applied to actionable elements after interacting with them but not taking the action (such as hovering).
Usage:
Tile on hover/active
elevationLevel2BoxShadow
Level 3
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
elevationLevel3BoxShadow
Level 3 reverse
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
elevationLevel3ReverseBoxShadow
Level 4
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
elevationLevel4BoxShadow
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
elevationFixedBoxShadow
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
elevationFixedReverseBoxShadow