Chi Documentation

Shadow

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

Notation

Shadow utility classes can be defined using the format -s{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

-s0
-s1
-s2
-s3
-s4
-s5
<div class="-s0"></div>
<div class="-s1"></div>
<div class="-s2"></div>
<div class="-s3"></div>
<div class="-s4"></div>
<div class="-s5"></div>

SASS

Chi defines shadows with Saas maps. The following example will render a shadow equivalent to -s1 / 1px.

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

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