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 levelsComponents usage
Suppressed (Level-1)
This type of elevation is used when you want to make bigger contrast inside of other levels.
Section in Modal
Flat (Level 1)
This type of elevation is used for visual separation of the content without providing an action.
Card
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 
Tile
ChoiceTile
DestinationCard
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 
Tile:hover or Tile:active
ChoiceTile:hover or ChoiceTile:active
DestinationCard:hover or DestinationCard:active
Fixed (Level 2.5)
This type of elevation is applied only to the elements which are fixed to the top while scrolling the page.
Fixed header in Modal
Navigation
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.
Fixed footer in Modal
Raised (Level 3)
This type of elevation is applied to the elements which need to be above the page content.
Popover
Tooltip
Drawer
Raised reverse (Level 3)
This type of elevation is applied to the elements mainly sticked to the bottom of the page.
Popover on mobile
Tooltip on mobile
Overlay (Level 4)
This type of elevation is applied to the elements which have the most visual priority and which are content-heavy
Modal