Simple – Shadows
Key point: Add shadow/elevation to the content.

The elevation helpers allow you to control relative depth, or distance, between two surfaces along the z-axis. There is a total of 24 elevation levels. You can set an element’s elevation by using the class elevation-[size], where size is an integer between 1-24 corresponding to the desired elevation.
  • Inline label: s-elevation-[size]
  •  Block label: s-elevation-[size]
  • Image label: s-elevation-[size]

For developers: Developers can configure custom labels if they are not available on the UI in the label configuration. 

Sizes available

  • s-elevation-1
  • s-elevation-2
  • s-elevation-3
  • s-elevation-4
  • s-elevation-5
  • s-elevation-6
  • s-elevation-7
  • s-elevation-8
  • s-elevation-9
  • s-elevation-10
  • s-elevation-11
  • s-elevation-12
  • s-elevation-13
  • s-elevation-14
  • s-elevation-15
  • s-elevation-16
  • s-elevation-17
  • s-elevation-18
  • s-elevation-19
  • s-elevation-20
  • s-elevation-21
  • s-elevation-22
  • s-elevation-23
  • s-elevation-24

See in action

View shadows demo.