The elevation helpers allow you to control relative depth, or distance, between two surfaces along the z-axis. There is a total of 25 elevation levels. You can set an element’s elevation by using the class elevation-{n}, where n is a integer between 0-24 corresponding to the desired elevation.


The elevation helper classes allow you to assign a custom z-depth to any element.


You can also access the elevation helpers through SCSS mixins by including the elevation tool

@import 'svelte-materialify/src/styles/tools/elevation';

div {
  // $n is the depth
  $n: 2;
  @include elevation($n);

Ready For More?

Continue to learn more about svelte materialify with content selected by the creator.

Last Updated: 2021-09-02