Skip to content
Patternfly Logo

Spacers

We use spacers to define fixed amounts of space between elements. Spacers make it easy for designers to maintain consistency across screens. Since the same spacer sizes and values are built into the PatternFly codebase, spacers also majorly simplify the design handoff between designers and developers.

4px spacer

Global CSS variable

--pf-global--spacer--xs
8px spacer

Global CSS variable

--pf-global--spacer--sm
16px spacer

Global CSS variable

--pf-global--spacer--md
24px spacer

Global CSS variable

--pf-global--spacer--lg
32px spacer

Global CSS variable

--pf-global--spacer--xl
48px spacer

Global CSS variable

--pf-global--spacer--2xl
64px spacer

Global CSS variable

--pf-global--spacer--3xl

Click here for all variables

Correct

Include spacers in your designs to make it easy for developers to quickly see what size spacer you are using between elements.

Incorrect

Don’t use spacers to design flexible layouts that utilize responsive measurement variables.

Don’t use spacers to define both horizontal and vertical space at the same time - spacers should be used to define a single spacing variable.

Considering line height and padding

Certain components or elements like icons, buttons, and input fields, have a fixed amount of padding built-in. Remember to take that extra space around each element into account when laying the content out on your page. You may not have as much horizontal or vertical room as you think.

Spacers Example

When laying out text-based content, remember to take line height into account so you’re leaving the right amount of vertical space between each line of text.

Design is a journey of discovery

Body text should be Overpass Regular at 16px. It should have leading of 24px because of its relative line height of 1.5.

You also need to use different spacer sizes depending on the type of text you’re using. For example, you’ll need to provide a 16px spacer between a title and body copy, but only an 8px spacer between items in a bulleted or numbered list.

Design is a journey of discovery

Body text should be Overpass Regular at 16px. It should have leading of 24px because of its relative line height of 1.5.

Design is a journey of discovery

Body text should be Overpass Regular at 16px. It should have leading of 24px because of its relative line height of 1.5.

  1. Lists should use body text style with 8px between items.

  1. This is the second item in the list.

a. Secondary items in the list should use 8px spacing.

b. They still use the same text styling, however.

For more information about line height and typography, go to the typography page.


View source on GitHub