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#

SASS#

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