Elevation
Elevation
Elevations create depth in user interfaces and are used to draw attention to certain UI elements.
Elevations are used to arrange surfaces of an interface along the z-axis. They add depth to user interfaces giving them a real-world feel and making components approachable and actionable to users.
The higher the elevation level, the "closer" elements will appear to the users.
🎨 Figma: Elevation styles are available as Effect Styles that can be accessed in the Effects Panel.
💻 Code: The Elevation is available as a variable.


cosmos-elevation-1-above 0px 8px 12px 0px rgba(0, 15, 30, 0.04), 0px 2px 4px 0px rgba(0, 15, 30, 0.02)


cosmos-elevation-2-above 0px 16px 24px 0px rgba(0, 15, 30, 0.06), 0px 4px 8px 0px rgba(0, 15, 30, 0.02)