EDS – Equinor Design System

Elevation

Elevation is a visual effect that makes an element look like it’s floating above the surface (using the z-axis).

Guidelines

The elevation effect is made using shadows to help lift an element into focus — it is a reference to the physical world. Elements may be stacked on top of each other, but can’t pass through each other.

Don’t

  • Do not use elevation on icons.
  • Do not use elevation on text.

Styles

There are six elevation effects to choose between: None, Raised, Overlay, Sticky, Temporary nav and Above scrim.

FigmaExternal linkFigma design for elevation effects

✏️ Edit this page on GitHub