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 breakpoints will also modify larger ones unless another 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 md and larger breakpoints.
  • lg - use to apply shadow to lg and larger breakpoints.
  • xl - use to apply shadow to xl breakpoints.

Examples #

Default #

-s--0
-s--1
-s--2
-s--3
-s--4
-s--5

Responsive #

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

-s--5 -s-md--0
-s-md--5 -s-xl--0
-s-xl--5

SASS #

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