Spacers

PatternFly designs use spacers to define fixed amounts of space between elements. Spacers make it easy for designers to maintain consistency across screens and simplify the design handoff between designers and developers.

To see a list of all PatternFly spacer tokens, search our list of design tokens.

4px spacer

Global CSS variable

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

Global CSS variable

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

Global CSS variable

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

Global CSS variable

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

Global CSS variable

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

Global CSS variable

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

Global CSS variable

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

Best practices

When using spacers, adhere to the following best practices:

  • Include spacers in your designs to make it easy for developers to quickly see what size spacer you are using between elements.
  • Do not use spacers to design flexible layouts that utilize responsive measurement variables.
  • Do not use spacers to define both horizontal and vertical space at the same time. Spacers should only be used to define a single spacing variable.

Considering line height and padding

There are additional considerations to keep in mind when adapting spacers to different line heights and padding, which are common with PatternFly components and text content.

Using spacers with components

Some components like icons, buttons, and input fields, have a fixed amount of padding built in. Remember to account for this extra space when laying the content out on your page. You may not have as much horizontal or vertical room as you think.

Spacers example

Using spacers with text

When using spacers with text-based content, you should consider line height to ensure that you’re leaving the right amount of vertical space between each line of text.

Design is a journey of discovery

Body text should be Red Hat Text at 16px. It should have 24px of lead space 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 Red Hat Text at 16px. It should have 24px of leading because of its relative line height of 1.5.

Design is a journey of discovery

Body text should be Red Hat Text at 16px. It should have 24px of leading 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, read our typography guidelines.


View source on GitHub