---
title: "Elevation"
source: "Equality"
---
import { Icon, Card, CardContent, DisplayField } from "@eqtylab/equality";
import { TooltipDemo } from "@demo/components/demo/tooltip";
import { DialogWithTableDemo } from "@demo/components/demo/dialog";
import { ELEVATION } from "@eqtylab/equality";

## 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.

<Card elevation={ELEVATION.SUNKEN}>
  <CardContent>
    <div className="space-y-2">
      <h4 className="font-medium">Sunken Background</h4>
      <div className="text-text-secondary text-sm">
        This card has an elevation of Sunken.
      </div>
    </div>
  </CardContent>
</Card>

### Base

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

<Card elevation={ELEVATION.BASE}>
  <CardContent>
    <div className="space-y-2">
      <h4 className="font-medium">Base Background</h4>
      <div className="text-text-secondary text-sm">
        This card has an elevation of Base. In this case, it is equal with the
        background color, but generally cards should be set to raised.
      </div>
    </div>
  </CardContent>
</Card>

### Raised

Used to lift content or sections out of the background.

<Card elevation={ELEVATION.RAISED}>
  <CardContent>
    <div className="space-y-2">
      <h4 className="font-medium">Raised Background</h4>
      <div className="text-text-secondary text-sm">
        This card has an elevation of Raised.
      </div>
    </div>
  </CardContent>
</Card>

### Overlay

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

<TooltipDemo client:only="react" />

## 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:

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

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

The following components have an `elevation` prop:

| Component    | Default Elevation | Notes                        |
| ------------ | ----------------- | ---------------------------- |
| Card         | Raised            |                              |
| DisplayField | Base              |                              |
| Icon         | Sunken            |                              |
| Info Card    | Raised            |                              |
| Metric Card  | Raised            |                              |
| Select       | Overlay           | in `SelectContent` component |
| Table        | Base              |                              |

### Components with a set fixed elevation

| Component     | Elevation |
| ------------- | --------- |
| Alert Dialog  | Overlay   |
| Dialog        | Overlay   |
| Drawer        | Overlay   |
| Dropdown Menu | Overlay   |
| Popover       | Overlay   |
| Sheet         | Overlay   |
| Tooltip       | Overlay   |