Depth

Use depth utility classes to assist in creating a visual hierarchy.

Notation

Depth utility classes can be defined using the format -d{size}.

{size}

• 0 - use to set box-shadow to none
• 1 - use to set box-shadow to 1px
• 2 - use to set box-shadow to 4px
• 3 - use to set box-shadow to 6px
• 4 - use to set box-shadow to 8px
• 5 - use to set box-shadow to 12px

Examples

<div class="-d0"></div>
<div class="-d1"></div>
<div class="-d2"></div>
<div class="-d3"></div>
<div class="-d4"></div>
<div class="-d5"></div>

SASS

Chi defines depths with Saas maps. The following example will render a depth equivalent to -d1 / 1px.

@import '@centurylink/chi/src/css/variables';

.example {
  box-shadow: map-get($depth, 1);
}