Skip to main content
react-md
Elevation - Demos

#All Elevations

At this time, the @react-md/elevation package is a bit different than the other packages since it only exports utility functions and does not generate any styles or expose any React components.

The main export of this package is the rmd-elevation mixin which will allow you to add box-shadow to any element from any of the 24 available material design elevation heights. The example below will show all the different elevations, so you can pick and choose what is needed for your component. I would recommend toggling the light and dark theme of this app as well to show how the elevation looks depending on background color.

This package is used internally for many of the other packages that create "temporary" material such as menus and sheets.

Note: If the dark theme is enabled for the documentation site, this demo is a great example of the "raising dark mode elevation" feature that can be enabled by setting $rmd-theme-dark-elevation: true;.

  • @include rmd-elevation(0)
  • @include rmd-elevation(1)
  • @include rmd-elevation(2)
  • @include rmd-elevation(3)
  • @include rmd-elevation(4)
  • @include rmd-elevation(5)
  • @include rmd-elevation(6)
  • @include rmd-elevation(7)
  • @include rmd-elevation(8)
  • @include rmd-elevation(9)
  • @include rmd-elevation(10)
  • @include rmd-elevation(11)
  • @include rmd-elevation(12)
  • @include rmd-elevation(13)
  • @include rmd-elevation(14)
  • @include rmd-elevation(15)
  • @include rmd-elevation(16)
  • @include rmd-elevation(17)
  • @include rmd-elevation(18)
  • @include rmd-elevation(19)
  • @include rmd-elevation(20)
  • @include rmd-elevation(21)
  • @include rmd-elevation(22)
  • @include rmd-elevation(23)
  • @include rmd-elevation(24)

#Animating Elevation

This package also exports an additional mixins that might be useful:

  • rmd-elevation-transition

The rmd-elevation-transition mixin is just a wrapper for the rmd-transition-shadow-transition mixin that only works with different elevations. You'll primarily want to use this mixin unless you want to merge box shadow values together.