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

Documentation versions

Other versions
HDS components v7.0.0 is now available! Learn more about the changes in this major release

Elevation

Figma

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

A note about versions

The tokens used here refer to v7.0 or above of the components package, and v6.0 or above of the tokens package. If you are using an older version, refer to the documentation for your version.

How to use these styles

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

Consumer responsibility

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(--hds-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

Elevation in Carbon

In Carbon there are not many elements that have a visual elevation treatment applied to them. For this reason, all the elevation styles in HDS have been removed when the Carbon HDS themes/modes are applied to the UI.

On this page: