Elevation

Surface

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

s-prefix

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

Quick reference

Basic usage

Usage guide

Refer to the Elevation guide 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.

Example theme:

DBA lightFinn lightTori lightBlocket lightNeutral lightVend lightDBA darkFinn darkTori darkBlocket darkNeutral darkVend dark

.s-bg

.s-surface-sunken

.s-surface-elevated-100

.s-surface-elevated-200

.s-surface-elevated-300

.s-surface-elevated-100

.s-surface-elevated-200

.s-surface-elevated-300

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