Developer mode
Opens components on the React tab by default.
Your bookmarks

Elevation hierarchy

Using shadows for bringing the content closer to the user on z-axis.

We have six main elevation levels:

  1. Suppressed
  2. Flat
  3. Action
  4. Fixed
  5. Raised
  6. 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 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 sections in Modal and Card
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
ChoiceTile
boxShadowAction
Action active (Level 3.5)
This level is applied to elements that are actionable so itโ€™s visually clear that you can click on the element.

Usage:
Tile:hover, Tile:active, ChoiceTile:hover, ChoiceTile: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:
Popover
Tooltip
Drawer
boxShadowRaised
Raised reverse (Level 5)
This type of elevation is applied to elements like those in Raised but that 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