Elevation is used to indicate hierarchy and create focus through the use of depth.
Components with the same elevations create an effect of grouping and similarity between content while components on different elevations reflect spatial relationships.
Elevation is depicted through shadows to create an effect of depth. Components closer to the base layer have sharper shadows, while components that are elevated have softer shadows.
Usage of elevation types
|Raised||Cards on hover|
|Overlay||Modal Dialog, Dropdown, Date-Time-Picker, Select|
|Navigation||Navigation Bar, sticky In-Page-Navigation|