---
url: /docs/foundations/css-classes/surface.md
---
> Elevation

# Surface

A concept used to visually differentiate the height (or depth) between elements.

::: tip s-prefix
The `s-` (semantic) prefix signals that the color value of these will change with the brand css.
:::

## Quick reference

| Class | Color | Description |
|-------|-------|-------------|
| s-surface-sunken |  | background-color: var(--w-s-color-surface-sunken) |
| s-surface-elevated-100 |  | background-color: var(--w-s-color-surface-elevated-100) |
| s-surface-elevated-200 |  | background-color: var(--w-s-color-surface-elevated-200) |
| s-surface-elevated-300 |  | background-color: var(--w-s-color-surface-elevated-300) |

## Basic usage

### Usage guide

Refer to the [Elevation guide](/foundations/elevation/) for more information about when to use elevation and when not to.

### Setting the elevation

Control the elevation of an element using the `s-surface-{sunken|elevated-100|elevated-200|elevated-300}` utilities as specified in the table above.

```html
<div class="s-bg ...">
  <div class="s-surface-sunken ..."></div>
  <div class="s-surface-elevated-100 ..."></div>
  <div class="s-surface-elevated-200 ..."></div>
  <div class="s-surface-elevated-300 ..."></div>
</div>
```