Elevation

Guidelines

Pick matching visual cue

Visual cues can be made by using shadows, surface fills or colour. Make sure to pick a visual cue that matches the importance and the hierarchy of the element. Scrims can help dim backgrounds, making dialogs stand out more.

Use shadows to focus attention

When using shadows to signify elevation, increase the elevation of the components that need to focus attention. Be mindful that too many shadows can make an interface look crowded and distract the user from the task ahead.

Avoid collisions

If a component moves in elevation, it should not collide with other components. Consider this during designing to make or choose to remove the other component from the screen throughout the action.

Default elevation values

Elements have different values for different states. Most of these states are already incorporated in the elements in the deamonite library we make use of. Here is an overview of the default elevation values by Google Material Design.

Resources

It is recommended to use the Sass variables to change the elevation values. Most elevation variables are defined in the Daemonite Material package, but overwritten in our Sass variables partial: ~@stylesheets/variables/_variables.scss.

Here's how you can use these in a Sass file:

// in _variables.scss partial file
$elevation-variable: map-get($elevation-shadows, 1) !default;


// in another partial file
.element-one {
    box-shadow: map-get($elevation-variable, shadow);
    z-index: map-get($elevation-variable, elevation); // add if needed
}

The elevation system is based on Material Design's elevation system. Make sure to also read about Light and shadows.