Layers

These are the levels of elevation that elements can occupy.

Restrictions

  • Elements at the same layer may not occupy the same space.

Available Layers

Layer Components

Base

This is the default layer for all elements.

All that are not otherwise listed.

$layer-height-xs

For elements that are positioned, but not intended to show up above more important elements.

  • Monetary Input (icon)
  • Date Picker Input (icon)

$layer-height-s

Intended for elements that cover content, but are not global site scoped.

None

$layer-height-m

Intended for elements that cover content, that are globally site scoped.

  • Secondary Navigation (sub-menu)
  • Narrow Navigation (open menu)
  • Masthead (narrow)

$layer-height-l

The layer directly beneath the highest layer. Intended for overlays.

  • Choice Modal (Overlay)
  • Wait Modal (Overlay)
  • Info Modal (Overlay)

$layer-height-xl

The uppermost layer. No elements should be positioned above this level.

  • Choice Modal (Modal)
  • Wait Modal (Modal)
  • Info Modal (Modal)