Elevation

Guidelines

  • Working with elevation - Elevation allows to bring a sense of materiality and depth to an interface. Use elevation to infer information hierarchy.
  • Don’t skip elevation levels - When applying elevation to visual elements, ensure that each level is used progressively so users can understand the layering of elements on the page. Start with no elevation at the background level and build interfaces by 'piling up' containers and other elements step by step. Avoid jumping from a raised token to a floating token without using the intermediate lifted level.
  • Use elevation purposefully - Each elevation has a purpose and allow users to see what is closer to them – what requires their attention now. Always respect how elements are stacked on top of each other so that users understand the materiality of the application.

Tokens

NameValuePreview
--hop-elevation-none
none
--hop-elevation-raised
0 1px 6px 0 rgba(60, 60, 60, 0.10)
--hop-elevation-lifted
0 4px 10px 4px rgba(60, 60, 60, 0.08)
--hop-elevation-floating
0 10px 18px 8px rgba(60, 60, 60, 0.08)