HTML

Sizing

ExamplesDocumentation

Examples

Width base and percentage units

.pf-u-w-0
.pf-u-w-25
.pf-u-w-50
.pf-u-w-75
.pf-u-w-100
.pf-u-w-initial (auto)
.pf-u-w-inherit

Usage

ClassApplied toOutcome
.pf-u-w-initial{-on-[breakpoint]}*Sets width: initial (auto)
.pf-u-w-inherit{-on-[breakpoint]}*Sets width: inherit
.pf-u-w-0{-on-[breakpoint]}*Sets width: 0%
.pf-u-w-25{-on-[breakpoint]}*Sets width: 25%
.pf-u-w-33{-on-[breakpoint]}*Sets width: calc(100% / 3)
.pf-u-w-50{-on-[breakpoint]}*Sets width: 50%
.pf-u-w-66{-on-[breakpoint]}*Sets width: calc(100% / 3 * 2)
.pf-u-w-75{-on-[breakpoint]}*Sets width: 75%
.pf-u-w-100{-on-[breakpoint]}*Sets width: 100%

Usage

ClassApplied toOutcome
.pf-u-w-25vw{-on-[breakpoint]}*Sets width: 25vw
.pf-u-w-33vw{-on-[breakpoint]}*Sets width: calc(100vw / 3)
.pf-u-w-50vw{-on-[breakpoint]}*Sets width: 50vw
.pf-u-w-66vw{-on-[breakpoint]}*Sets width: calc(100vw / 3 * 2)
.pf-u-w-75vw{-on-[breakpoint]}*Sets width: 75vw
.pf-u-w-100vw{-on-[breakpoint]}*Sets width: 100vw

Height base and percentage units

.pf-u-h-0
.pf-u-h-25
.pf-u-h-50
.pf-u-h-75
.pf-u-h-100
.pf-u-h-initial (auto)
.pf-u-h-inherit

Usage

ClassApplied toOutcome
.pf-u-h-initial{-on-[breakpoint]}*Sets height: initial (auto)
.pf-u-h-inherit{-on-[breakpoint]}*Sets height: inherit
.pf-u-h-0{-on-[breakpoint]}*Sets height: 0%
.pf-u-h-25{-on-[breakpoint]}*Sets height: 25%
.pf-u-h-33{-on-[breakpoint]}*Sets height: calc(100% / 3)
.pf-u-h-50{-on-[breakpoint]}*Sets height: 50%
.pf-u-h-66{-on-[breakpoint]}*Sets height: calc(100% / 3 * 2)
.pf-u-h-75{-on-[breakpoint]}*Sets height: 75%
.pf-u-h-100{-on-[breakpoint]}*Sets height: 100%

Usage

ClassApplied toOutcome
.pf-u-h-25vh{-on-[breakpoint]}*Sets height: 25vh
.pf-u-h-33vh{-on-[breakpoint]}*Sets height: calc(100vh / 3)
.pf-u-h-50vh{-on-[breakpoint]}*Sets height: 50vh
.pf-u-h-66vh{-on-[breakpoint]}*Sets height: calc(100vh / 3 * 2)
.pf-u-h-75vh{-on-[breakpoint]}*Sets height: 75vh
.pf-u-h-100vh{-on-[breakpoint]}*Sets height: 100vh

Documentation

Usage

These utilities are not recommended for general layout purposes. They should primarily be used to enable responsive behaviors of certain components through breakpoints.