PF Next

Spacing

Spacer margin

Preview

Margin, marginX, marginY

Margin - xl
Margin x axis - pf-u-mx-xl
Margin y axis - pf-u-my-xl

Margin top, margin right, margin bottom, margin left

Margin-top - xl
Margin-right - xl
Margin-bottom - xl
Margin-left - xl

Responsive margin

Margin-top - xl
Margin-top - xl on-sm
Margin-top - xl on-md
Margin-top - xl on-lg
Margin-top - xl on-xl
<h2 class="pf-c-title pf-m-lg">
  Margin, marginX, marginY
</h2>
<div class="pf-u-display-flex pf-u-align-items-flex-start pf-u-flex-wrap">
  <div class="pf-u-m-xl">
    Margin - xl
  </div>
  <div class="pf-u-mx-xl">
    Margin x axis - pf-u-mx-xl
  </div>
  <div class="pf-u-my-xl">
    Margin y axis - pf-u-my-xl
  </div>
</div>
<br>
<h2 class="pf-c-title pf-m-lg">
  Margin top, margin right, margin bottom, margin left
</h2>
<div class="pf-u-display-flex pf-u-align-items-flex-start pf-u-flex-wrap">
  <div class="pf-u-mt-xl">
    Margin-top - xl
  </div>
  <div class="pf-u-mr-xl">
    Margin-right - xl
  </div>
  <div class="pf-u-mb-xl">
    Margin-bottom - xl
  </div>
  <div class="pf-u-ml-xl">
    Margin-left - xl
  </div>
</div>
<br>
<h2 class="pf-c-title pf-m-lg">
  Responsive margin
</h2>
<div class="pf-u-display-flex pf-u-align-items-flex-start pf-u-flex-column pf-u-flex-wrap">
  <div class="pf-u-mt-xl">
    Margin-top - xl
  </div>
  <div class="pf-u-mt-xl-on-sm">
    Margin-top - xl on-sm
  </div>
  <div class="pf-u-mt-xl-on-md">
    Margin-top - xl on-md
  </div>
  <div class="pf-u-mt-xl-on-lg">
    Margin-top - xl on-lg
  </div>
  <div class="pf-u-mt-xl-on-xl">
    Margin-top - xl on-xl
  </div>
</div>

Spacer padding

Preview

Padding, paddingX, paddingY

Padding - xl
Padding x axis - pf-u-px-xl
Padding y axis - pf-u-py-xl

Padding top, padding right, padding bottom, padding left

Padding-top - xl
Padding-right - xl
Padding-bottom - xl
Padding-left - xl

Responsive padding

Padding-top
Padding-top - xl on-sm
Padding-top - xl on-md
Padding-top - xl on-lg
Padding-top - xl on-xl
<h2 class="pf-c-title pf-m-lg">
  Padding, paddingX, paddingY
</h2>
<div class="pf-u-display-flex pf-u-align-items-flex-start pf-u-flex-wrap">
  <div class="pf-u-p-xl">
    Padding - xl
  </div>
  <div class="pf-u-px-xl">
    Padding x axis - pf-u-px-xl
  </div>
  <div class="pf-u-py-xl">
    Padding y axis - pf-u-py-xl
  </div>
</div>
<br>
<h2 class="pf-c-title pf-m-lg">
  Padding top, padding right, padding bottom, padding left
</h2>
<div class="pf-u-display-flex pf-u-align-items-flex-start pf-u-flex-wrap">
  <div class="pf-u-pt-xl">
    Padding-top - xl
  </div>
  <div class="pf-u-pr-xl">
    Padding-right - xl
  </div>
  <div class="pf-u-pb-xl">
    Padding-bottom - xl
  </div>
  <div class="pf-u-pl-xl">
    Padding-left - xl
  </div>
</div>
<br>
<h2 class="pf-c-title pf-m-lg">
  Responsive padding
</h2>
<div class="pf-u-display-flex pf-u-align-items-flex-start pf-u-flex-column pf-u-flex-wrap">
  <div class="pf-u-pt-xl">
    Padding-top
  </div>
  <div class="pf-u-pt-xl-on-sm">
    Padding-top - xl on-sm
  </div>
  <div class="pf-u-pt-xl-on-md">
    Padding-top - xl on-md
  </div>
  <div class="pf-u-pt-xl-on-lg">
    Padding-top - xl on-lg
  </div>
  <div class="pf-u-pt-xl-on-xl">
    Padding-top - xl on-xl
  </div>
</div>

Spacers combined

Preview

Combined spacers

Padding lg, margin lg
Padding lg on-lg, margin lg

Combined spacers (responsive)

Item 1
Item 2
Item 3
<h2 class="pf-c-title pf-m-lg">
  Combined spacers
</h2>
<div class="pf-u-display-flex pf-u-align-items-flex-start pf-u-flex-wrap">
  <div class="pf-u-p-lg pf-u-m-lg">
    Padding lg, margin lg
  </div>
  <div class="pf-u-p-lg-on-lg pf-u-m-lg">
    Padding lg on-lg, margin lg
  </div>
</div>
<br>
<h2 class="pf-c-title pf-m-lg">
  Combined spacers (responsive)
</h2>
<div class="pf-u-display-flex pf-u-align-items-flex-start pf-u-flex-wrap">
  <div class="pf-u-p-sm pf-u-p-lg-on-md pf-u-mr-lg">
    Item 1
  </div>
  <div class="pf-u-p-sm pf-u-p-lg-on-md pf-u-mr-lg">
    Item 2
  </div>
  <div class="pf-u-p-sm pf-u-p-lg-on-md pf-u-ml-auto-on-xl">
    Item 3
  </div>
</div>

Documentation

Overview

Breakpoint is optional. Breakpoints: base (no breakpoint value), -on-sm, -on-md, -on-lg, -on-xl. Example .pf-u-m-sm-on-lg

Margin properties:

Abbreviation Property
m margin
mt margin-top
mr margin-right
mb margin-bottom
ml margin-left
mx margin-left & margin-right
my margin-top & margin-bottom

Padding properties:

Abbreviation Property
p padding
pt padding-top
pr padding-right
pb padding-bottom
pl padding-left
px padding-left & padding-right
py padding-top & padding-bottom

Size values:

Abbreviation Property
auto auto
0 0
xs var(--pf-global--spacer--xs)
sm var(--pf-global--spacer--sm)
md var(--pf-global--spacer--md)
lg var(--pf-global--spacer--lg)
xl var(--pf-global--spacer--xl)
2xl var(--pf-global--spacer--2xl)
3xl var(--pf-global--spacer--3xl)

Usage

Class Applied To Outcome
.pf-u-{m, mt, mr, mb, ml, mx, my}-{size}{-on-[breakpoint]} * Sets margin top, right, bottom, left, margin-left & right, margin-top & bottom to spacer value
.pf-u-{p, pt, pr, pb, pl, px, py}-{size}{-on-[breakpoint]} * Sets padding top, right, bottom, left, padding-left & right, padding-top & bottom to spacer value