On the 🎨 Elevation page of the Indigo.Design System you will find 24 Elevations that are used across Components and Patterns to cast a shadow on the underlying content. There are Components, such as the Bottom Navigation and Floating Action Button that use this to establish some visual hierarchy, but you may also use them to make certain elements float like a Registration or Login Form. The Elevations are identical to the Material Design Elevation & Ignite UI for Angular Shadows.

Support for Elevations

Elevations follow a simple logic: the higher the number of the Elevation, the more prominent the shadow. Shadows come as a combination of three stacked shadow colors, umbra, penumbra, and ambient, whose values match the Material Design definition. In Sketch Elevations are available as Layer Styles that can be applied to any shape and on components that use them we have applied this style to the correct layer, which is most often a Mask layer, or a specially designated Elevation rectangle.


Changing the Elevation in a Component by changing its style is possible in Sketch and will produce the expected outcome, but the same will not be achievable with Ignite UI for Angular yet.

Use of Standalone Elevations

To use an Elevation on its own e.g. to lift one part of the content and draw more focus to it than the rest, simply apply the Elevation Layer Style of your choice to a rectangle matching the size of the content you would like to enhance.

Additional Resources

Related topics:

Our community is active and always welcoming to new ideas.