Overview of Elevation
Elevation is a design technique that utilizes shadows and visual layering to create a sense of depth and hierarchy between user interface (UI) elements. By suggesting which elements are above others, it helps distinguish components like floating action buttons or elevated cards. Designers can simulate the z-axis in 2D space by adjusting the shadow's intensity and distribution, which enhances the user experience by replicating real-world principles of light.
Elevation Levels
The Telerik and Kendo UI Design System defines nine elevation intensity levels, with Level 1 being the lightest and Level 9—the strongest:
| Step | Value | Example |
|---|---|---|
| 1 | 0 2px 3px rgba(0, 0, 0, 0.04) 0 4px 16px rgba(0, 0, 0, 0.12) | |
| 2 | 0 4px 6px rgba(0, 0, 0, 0.06) 0 4px 16px rgba(0, 0, 0, 0.12) | |
| 3 | 0 6px 8px rgba(0, 0, 0, 0.08) 0 4px 16px rgba(0, 0, 0, 0.12) | |
| 4 | 0 8px 10px rgba(0, 0, 0, 0.12) 0 4px 16px rgba(0, 0, 0, 0.12) | |
| 5 | 0 10px 12px rgba(0, 0, 0, 0.16) 0 4px 16px rgba(0, 0, 0, 0.12) | |
| 6 | 0 12px 14px rgba(0, 0, 0, 0.2) 0 4px 16px rgba(0, 0, 0, 0.12) | |
| 7 | 0 14px 16px rgba(0, 0, 0, 0.24) 0 4px 16px rgba(0, 0, 0, 0.12) | |
| 8 | 0 16px 18px rgba(0, 0, 0, 0.28) 0 4px 16px rgba(0, 0, 0, 0.12) | |
| 9 | 0 32px 34px rgba(0, 0, 0, 0.32) 0 4px 16px rgba(0, 0, 0, 0.12) |
Elevation Settings
While each Telerik and Kendo UI Theme automatically provides the appropriate settings by elevation level, it’s important to understand how those values are configured:
- Horizontal offset (X-axis)—The horizontal displacement of the shadow in relation to the element. A positive value moves the shadow to the right, while a negative value moves it to the left.
- Vertical offset (Y-axis)—The vertical displacement of the shadow in relation to the element. A positive value moves the shadow downwards, while a negative value moves it upwards.
- Blur radius—The amount of blur applied to the shadow. A higher value creates a more diffused and softer shadow.
- Spread radius—The extent of shadow dispersion around an element. A positive value enlarges and highlights the shadow, while a negative value narrows and minimizes it.
- Color—The color of the shadow specified in the RGBA format. The color's opacity determines the shadow's visibility.
Key Principles
The Telerik and Kendo UI design system endorses several basic principles related to elevation:
- Visual hierarchy and communication —Elevation help establish a clear hierarchy and indicates how elements relate to each other.
- Elevation for emphasis—To prioritize a specific action, increase its elevation level as users tend to focus more on objects that are closer to their eyes.
- Preserve elevation simplicity—To avoid confusion and cognitive load, elevation is used sparingly.
Theme-Specific Variables
For specific information about the elevation system, refer to the theme-specific variables list:
