Box Shadow

When to use it

The Box Shadow utility is used to add or remove box shadows of various sizes to elements. It provides a way to enhance the visual appearance of elements by adding depth and emphasis.

Variants

• None: Use the .u-box-shadow--none class to remove any box shadow.
• Small: Use the .u-box-shadow--small class to add a small box shadow.
• Medium: Use the .u-box-shadow--medium class to add a medium box shadow.
• Large: Use the .u-box-shadow--large class to add a large box shadow.
• Extra Large: Use the .u-box-shadow--xlarge class to add an extra-large box shadow.

What it looks like

Code examples

None

<div class="c-box u-margin-bottom--large u-box-shadow--none">box-shadow--none</div>

Small

<div class="c-box u-margin-bottom--large u-box-shadow--small">box-shadow--small</div>

Medium

<div class="c-box u-margin-bottom--large u-box-shadow--medium">box-shadow--medium</div>

Large

<div class="c-box u-margin-bottom--large u-box-shadow--large">box-shadow--large</div>

Extra large

<div class="c-box u-margin-bottom--large u-box-shadow--xlarge">box-shadow--xlarge</div>