The page navigation is complete. You may now navigate the page content as you wish.
Skip to main content

Elevation

Elevation can be used to offset and draw attention to content or indicate interactivity.

Usage

Use elevation:

  • to surface interactivity
  • to elevate and group key content on the page
  • to convey natural page hierarchy and modality

Levels of elevation

levels of elevation

How to use these styles

You can apply an elevation or surface effect to an element via design tokens or CSS helper classes.

Note that border-radius is not included with this token and needs to be set according to the specs of the UI element.

Design tokens

Use the elevation and surface design tokens directly in your CSS definitions. Note that they can only be used with the box-shadow property.

.your-selector {
  box-shadow: var(--token-elevation-high-box-shadow);
}

Available CSS variables

Elevation variables
Surface variables

CSS helper classes

  1. Ensure you’ve imported the relevant CSS file. 
// for product applications
@import "~@hashicorp/design-system-tokens/dist/products/css/helpers/elevation.css";

// for hashicorp developer platform
@import "~@hashicorp/design-system-tokens/dist/devdot/css/helpers/elevation.css";
  1. Use a predefined CSS helper class.
...
<div class="hds-elevation-high">...</div>

Available CSS helper classes

Elevation helpers
Surface helpers

On this page: