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 CSS variables, including spacers visit our developer resources.
Global CSS variable
--pf-v5-global--spacer--xsGlobal CSS variable
--pf-v5-global--spacer--smGlobal CSS variable
--pf-v5-global--spacer--mdGlobal CSS variable
--pf-v5-global--spacer--lgGlobal CSS variable
--pf-v5-global--spacer--xlGlobal CSS variable
--pf-v5-global--spacer--2xlGlobal CSS variable
--pf-v5-global--spacer--3xlBest 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.
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.
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.
Body text should be Red Hat Text at 16px. It should have 24px of leading because of its relative line height of 1.5.
Body text should be Red Hat Text at 16px. It should have 24px of leading because of its relative line height of 1.5.
- Lists should use body text style with 8px between items.
- 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
