Overview of Elevation

Elevation refers to the visual and tactile representation of objects and elements. It allows you to create a sense of depth, hierarchy, and visual harmony to direct user attention and enhance the overall user experience.

The Telerik and Kendo UI Design System provides a set of predefined elevation values for creating cohesive and visually pleasing user interfaces. These elevation values are organized in a Sass map, where each key corresponds to a specific elevation intensity level (ranging from 1 to 9). For each level, there are two defined shadow layers:

Layer 1—A lighter shadow with lower opacity.
Layer 2—A darker shadow with higher opacity.

Each layer is specified as a comma-separated list of parameters, which define the shadow's horizontal offset, vertical offset, blur radius, and color. Here's the basic structure of the map:

$kendo-elevation: (
    1: (
Layer 1 parameters,
Layer 2 parameters
),
    2: (
Layer 1 parameters,
Layer 2 parameters
),
// ... (Repeat for levels 3 to 9)
) !default;

Elevation Intensity Levels

The Telerik and Kendo UI design system defines nine elevation intensity levels, with 1 being the lightest and 9 the darkest. As you increase the level, the shadows become progressively darker and more pronounced.

Level 1—Very light shadow
Level 2—Light shadow
Level 3—Slightly darker shadow
Level 4—Moderate shadow
Level 5—Somewhat pronounced shadow
Level 6—Noticeable shadow
Level 7—Clearly visible shadow
Level 8—Strong shadow
Level 9—Very strong and deep shadow

Shadow Layer Parameters

Each shadow layer consists of the following parameters:

Horizontal offset—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—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.
Color—The color of the shadow specified in the RGBA format. The color's opacity determines the shadow's visibility.

Customization and Extension

You can customize and extend the predefined Sass map to suit your specific design needs. The next several sections of this article explain how to customize the elevation Sass map by modifying the existing levels, adding new levels, removing existing levels, customizing colors and opacities, and using custom CSS properties.

Modifying Existing Levels

You can change the parameters of the existing levels to achieve different shadow effects. For example, to make the level 3 shadows slightly lighter, you can adjust the values like this:

$kendo-elevation: (
    1: (
// ...
),
    2: (
// ...
),
    3: (
0 4px 16px rgba(0, 0, 0, .05), // Adjusted Layer 1
0 4px 16px rgba(0, 0, 0, .12)
),
);

Adding New Levels

To add new shadow intensity levels, simply extend the map with the desired values. For example, add a level 10 shadow:

$kendo-elevation: (
    1: (
// ...
),
    2: (
// ...
),
// ...
    10: (
0 16px 20px rgba(0, 0, 0, .36), // New Level 10
0 4px 16px rgba(0, 0, 0, .12)
)
);

Removing Existing Levels

In addition to changing existing and adding new, you can also remove levels by setting their value to null. For example, to remove the shadow for level 3:

$kendo-elevation: (
    1: (
// ...
),
    2: (
// ...
),
    3: null, // Remove level 3 shadow
    4: (
// ...
),
// ... (Repeat for other levels)
);

Customizing Colors and Opacities

You can also customize the colors and opacities of the shadow layers to match your design palette. Simply adjust the RGBA values to your preferred colors and opacities.

Using CSS Custom Properties

In addition to predefined values in the elevation map, each value is also represented as a CSS custom property (variable). Here's a list of the available variables, which are exposed at a root level:

:root {
    --kendo-elevation-1: map.get($kendo-elevation, 1);
    --kendo-elevation-2: map.get($kendo-elevation, 2);
    --kendo-elevation-3: map.get($kendo-elevation, 3);
    --kendo-elevation-4: map.get($kendo-elevation, 4);
    --kendo-elevation-5: map.get($kendo-elevation, 5);
    --kendo-elevation-6: map.get($kendo-elevation, 6);
    --kendo-elevation-7: map.get($kendo-elevation, 7);
    --kendo-elevation-8: map.get($kendo-elevation, 8);
    --kendo-elevation-9: map.get($kendo-elevation, 9);
}

This allows for greater flexibility and easier customization when applying the shadows to various elements. For example, here is how you can apply these custom properties in your code:

.my-element {
    box-shadow: var(--kendo-elevation-5) // Apply level 5 shadow to .my-element
}

By combining the use of CSS custom properties and the flexibility of the Telerik and Kendo UI elevation system, you can easily create and maintain consistent and customizable styles for your design needs.

Foundation

Themes

CSS Utilities

Components

Resources

Foundation

Elevation