Skip to content
Patternfly Logo

Box shadow

Examples

Small

Regular
Top
Right
Bottom
Left

Medium

Regular
Top
Right
Bottom
Left

Large

Regular
Top
Right
Bottom
Left

Extra large

Regular
Top
Right
Bottom
Left

Inset

Regular

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.
.pf-u-box-shadow-xl
*
Applies box-shadow x-large.
.pf-u-box-shadow-xl-top
*
Applies box-shadow x-large top.
.pf-u-box-shadow-xl-right
*
Applies box-shadow x-large right.
.pf-u-box-shadow-xl-bottom
*
Applies box-shadow x-large bottom.
.pf-u-box-shadow-xl-left
*
Applies box-shadow x-large left.

View source on GitHub