PF Next

Box Shadow

Boxshadow Utility

Preview

Box shadow small
Box shadow small, top
Box shadow small, right
Box shadow small, bottom
Box shadow small, left
Box shadow medium
Box shadow medium, top
Box shadow medium, right
Box shadow medium, bottom
Box shadow medium, left
Box shadow large
Box shadow large, top
Box shadow large, right
Box shadow large, bottom
Box shadow large, left
Box shadow inset
<div class="pf-u-box-shadow-sm">
  Box shadow small
</div>
<div class="pf-u-box-shadow-sm-top">
  Box shadow small, top
</div>
<div class="pf-u-box-shadow-sm-right">
  Box shadow small, right
</div>
<div class="pf-u-box-shadow-sm-bottom">
  Box shadow small, bottom
</div>
<div class="pf-u-box-shadow-sm-left">
  Box shadow small, left
</div>
<div class="pf-u-box-shadow-md">
  Box shadow medium
</div>
<div class="pf-u-box-shadow-md-top">
  Box shadow medium, top
</div>
<div class="pf-u-box-shadow-md-right">
  Box shadow medium, right
</div>
<div class="pf-u-box-shadow-md-bottom">
  Box shadow medium, bottom
</div>
<div class="pf-u-box-shadow-md-left">
  Box shadow medium, left
</div>
<div class="pf-u-box-shadow-lg">
  Box shadow large
</div>
<div class="pf-u-box-shadow-lg-top">
  Box shadow large, top
</div>
<div class="pf-u-box-shadow-lg-right">
  Box shadow large, right
</div>
<div class="pf-u-box-shadow-lg-bottom">
  Box shadow large, bottom
</div>
<div class="pf-u-box-shadow-lg-left">
  Box shadow large, left
</div>
<div class="pf-u-box-shadow-inset">
  Box shadow inset
</div>

Documentation

Overview

Box shadow utility

Usage

Class Applied To Outcome
.pf-u-box-shadow-sm * Applies box-shadow small.
.pf-u-box-shadow-sm-top * Applies box-shadow small top.
.pf-u-box-shadow-sm-right * Applies box-shadow small right.
.pf-u-box-shadow-sm-bottom * Applies box-shadow small bottom.
.pf-u-box-shadow-sm-left * Applies box-shadow small left.
.pf-u-box-shadow-md * Applies box-shadow medium.
.pf-u-box-shadow-md-top * Applies box-shadow medium top.
.pf-u-box-shadow-md-right * Applies box-shadow medium right.
.pf-u-box-shadow-md-bottom * Applies box-shadow medium bottom.
.pf-u-box-shadow-md-left * Applies box-shadow medium left.
.pf-u-box-shadow-lg * Applies box-shadow large.
.pf-u-box-shadow-lg-top * Applies box-shadow large top.
.pf-u-box-shadow-lg-right * Applies box-shadow large right.
.pf-u-box-shadow-lg-bottom * Applies box-shadow large bottom.
.pf-u-box-shadow-lg-left * Applies box-shadow large left.