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.
Global CSS variable
--pf-global--spacer--xsGlobal CSS variable
--pf-global--spacer--smGlobal CSS variable
--pf-global--spacer--mdGlobal CSS variable
--pf-global--spacer--lgGlobal CSS variable
--pf-global--spacer--xlGlobal CSS variable
--pf-global--spacer--2xlGlobal CSS variable
--pf-global--spacer--3xlInclude spacers in your designs to make it easy for developers to quickly see what size spacer you are using between elements.
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.
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.
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.
Body text should be Overpass Regular at 16px. It should have leading of 24px because of its relative line height of 1.5.
Body text should be Overpass Regular at 16px. It should have leading of 24px 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, go to the typography page.
View source on GitHub
