“Elevation” Design Component

Design: zeplin.

In the IxDF UI Kit, interface elements have different levels of elevation that indicate their relative states or levels of importance. For example, the top navigation header has a high elevation and is displayed above most elements on the page. Not all elements are elevated. Content such as text and images usually sit flush with the surface of the browser.

All Elevation Levels:

No elevation

Tropo elevation

Strato elevation

Meso elevation

Thermo elevation

Exo elevation

Usage

<div class="elevation-tropo"></div>
<div class="elevation-strato"></div>
<div class="elevation-meso"></div>
<div class="elevation-thermo"></div>
<div class="elevation-exo"></div>

Rules of Thumb

• Only apply elevation and shadow to elements that should be emphasized or spatially separated from other page elements.
• For instance, the top navigation header has elevation since it is spatially above all page elements and sticky at the top of the page.
• Buttons and cards are also elevated in order to draw attention to them.
• Native content, like images and text, as well as sidebars, should not be elevated.
• Some elements, such as modal dialogs, can have additional ways of visually depicting their spatial separation from page elements. For instance, the background behind a dialog can be blurred or darkened to further emphasize that the dialog is elevated above all other page elements.