Your bookmarks

Elevation hierarchy

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

Elevation should be used with consideration of the component type. Some components need to be more prominent, which means taking more attention and putting content “closer” to the user.

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 type of elevation is used when you want to make bigger contrast inside of other levels.

Usage:
Section in Modal or Card
none
Flat (Level 1)
This type of elevation is used for visual separation of the content without providing an action.

Usage:
Card
none
Action (Level 2)
This type of elevation is applied to the elements which are actionable, so it’s visually clear that you can click on the element 

Usage:
Tile
ChoiceTile
DestinationCard
boxShadowAction
Action active (Level 2)
This type of elevation is applied to the elements which are actionable, so it’s visually clear that you can click on the element 

Usage:
Tile:hover or Tile:active
ChoiceTile:hover or ChoiceTile:active
DestinationCard:hover or DestinationCard:active
boxShadowActionActive
Fixed (Level 2.5)
This type of elevation is applied only to the elements which are fixed to the top while scrolling the page.

Usage:
Fixed header in Modal
NavigationBar
boxShadowFixed
Fixed reverse (Level 2.5)
This type of elevation is applied only to the elements which are fixed to the bottom while scrolling the page.

Usage:
Fixed footer in Modal
boxShadowFixedReverse
Raised (Level 3)
This type of elevation is applied to the elements which need to be above the page content.

Usage:
Popover
Tooltip
Drawer
boxShadowRaised
Raised reverse (Level 3)
This type of elevation is applied to the elements mainly stuck to the bottom of the page.

Usage:
Popover on mobile
Tooltip on mobile
boxShadowRaisedReverse
Overlay (Level 4)
This type of elevation is applied to the elements which have the most visual priority and which are content-heavy

Usage:
Modal
boxShadowOverlay