Use box shadow modifiers to add shadows to elements. Box shadows are used to to describe the visual hierarchy of objects.

box-shadow-key-* modifiers add directional shadows (heavier on the bottom than the top). box-shadow-amb-* modifiers add shadows that are even on all sides, emulating ambient light. box-shadow-* modifiers combine them both.

Classes

Modifier	Purpose
box-shadow-key-1	Add light key shadow
box-shadow-key-2	Add medium key shadow
box-shadow-key-3	Add heavy key shadow
box-shadow-amb-1	Add light ambient shadow
box-shadow-amb-2	Add medium ambient shadow
box-shadow-amb-3	Add heavy ambient shadow
box-shadow-1	Add light shadow
box-shadow-2	Add medium shadow
box-shadow-3	Add heavy shadow

box-shadow-key-1

box-shadow-amb-1

box-shadow-1

box-shadow-key-2

box-shadow-amb-2

box-shadow-2

box-shadow-key-3

box-shadow-amb-3

box-shadow-3

Imports

Import CSS:

import 'pivotal-ui/css/box-shadows';