Elevation

Overview

Elevation properties and tokens define how components are layered ensuring that contrast remains consistent regardless of background color. Elevation is used both to differentiate backgrounds, and to differentiate components from the background they are currently on.

Generally, when applying elevation tokens or properties, values should only ever be one level away from the background a component is placed onto.

Elevation Values

Sunken

Use when a section should recede into the background, inset from the surface it is on. Good for highlighting areas that should provide additional contrast to content in a base or raised container.

Base

A neutral elevation that forms the baseline of the interface. Most components will use this level in standard layouts.

Raised

Used to lift content or sections out of the background.

Overlay

Use for UI that overlays the page and requires clear separation from the underlying content.

Floating

An elevated surface reserved for UI that must remain visually dominant over all other elements.

Elevation component prop

Some components have an elevation prop that can be used to set the elevation of the component. By default, they will be set to the one that makes most sense in a standard page flow.

To set a new elevation, use the ELEVATION constant:

import { ELEVATION } from "@eqtylab/equality";

<Component elevation={ELEVATION.BASE} />;

The following components have an elevation prop:

Components with a set fixed elevation