Visual
Elevation
Elevation is the distance between any two elements along the z-axis.
Overview
<Box boxShadow={400} /><Box boxShadow={300} /><Box boxShadow={200} /><Box boxShadow={100} />Reserved Level
Used for primary, global elements (main/left navs) that need to exist on an independent plane and should rarely if ever be obstructed by other elements.
Elevation 400
Elevation 400 is used for medium to large interface elements that are intended to temporarily interrupt a users workflow or draw their attention.
Think toasts, , , layers, or tours.
$Elevation-level--400--elevation-level--400ELEVATION_LEVEL_4000px 16px 32px rgba(39,51,51,.24)<Box boxShadow={400} />Elevation 300
Elevation 300 is often used for small to medium interactive interface elements.
Examples include , , or an expressive style.
$Elevation-level--300--elevation-level--300ELEVATION_LEVEL_3000px 8px 16px rgba(39,51,51,.24)<Box boxShadow={300} />Elevation 100
Reserved for functional hover interactions and focus states.
$Elevation-level--100--elevation-level--100ELEVATION_LEVEL_1000px 2px 4px rgba(39,51,51,.24)<Box boxShadow={100} />Base
The lowest level, visible container.
Background
The app’s background color.
Relative Positioning
When an element is elevated relative to another it retains it’s default elevation value regardless of it’s parent’s value.
