Elevation Levels
The mtrl framework provides standard elevation levels to create consistent depth throughout your application.
Shadows define elevation
Shadows indicate the distance between surfaces. The larger the shadow, the greater the distance.
Elevation creates hierarchy
Higher elevation increases importance and brings attention to UI elements.
Surface color and elevation
As elevation increases, surface color may shift slightly to reinforce depth.
Dynamic Elevation
Elements can change elevation in response to user interaction, providing visual feedback and reinforcing relationships.
Dynamic Elevation
Elements can change elevation in response to user interaction. Hover or click to see the elevation change.
Cards use elevation 1 to lift content from the background and create containment.
Dialogs use higher elevation (4) to appear above other content and focus user attention.
Navigation elements use elevation 2 to separate from content but remain accessible.
FABs use elevation 3 to stand out as primary actions.
Using Elevation in Code
Learn how to use elevation in your SCSS and JavaScript code.
SCSS Usage
@use 'mtrl/src/styles/abstract/config' as c;
.my-card {
@include c.elevation(1);
&:hover {
@include c.elevation(2);
transition: box-shadow 0.2s ease;
}
}JavaScript Component Usage
// Creating a component with elevation
const card = createElement({
tag: 'div',
class: 'elevation-1',
// other properties...
});
// Dynamically changing elevation
element.classList.remove('mtrl-elevation-1');
element.classList.add('mtrl-elevation-3');