Skip to main content

Pivotal UI

v18.0.0
Modifiers / Box shadows

Box shadows

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

ModifierPurpose
box-shadow-key-1Add light key shadow
box-shadow-key-2Add medium key shadow
box-shadow-key-3Add heavy key shadow
box-shadow-amb-1Add light ambient shadow
box-shadow-amb-2Add medium ambient shadow
box-shadow-amb-3Add heavy ambient shadow
box-shadow-1Add light shadow
box-shadow-2Add medium shadow
box-shadow-3Add heavy shadow
Basic example
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';