Shadow

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

Notation

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

{breakpoint}

Optionally include -{breakpoint} to apply the utility behaviour to some breakpoints. As a mobile first library, any applying to smaller breakpoint will modify also larger ones unless other class overrides this behaviour.

• blank - leave blank to apply shadow to all breakpoints.
• sm - use to apply shadow to sm and larger breakpoints.
• md - use to apply shadow to ms and larger breakpoints.
• lg - use to apply shadow to lg and larger breakpoints.
• xl - use to apply shadow to xl breakpoints.

Examples

Default

<div class="-s--0"></div>
<div class="-s--1"></div>
<div class="-s--2"></div>
<div class="-s--3"></div>
<div class="-s--4"></div>
<div class="-s--5"></div>

Responsive

Change viewport size to view the effect. You can do it by resizing your browser window.

<div class="-s--5 -s-md--0"></div>
<div class="-s-md--5 -s-xl--0"></div>
<div class="-s-xl--5"></div>

SASS

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

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

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