Skip to main content Skip to secondary navigation

Spacer

Main content start

Spacers are a great way to add visual white space within the content layout of a page. They can provide padding and open space between Paragraphs within the same section and horizontally between sections

A Spacer Paragraph is particularly useful if you want to “group/chunk” a few sections together visually, and separate them from what’s above and below. Perhaps you want to have a Text Area Paragraph that describes a section of cards, adding the spacer above the Text Area Paragraph, and below the section of cards, affords this clear “chunking” to the eye.

Spacer Paragraph options

The Spacer Paragraph creates space. When you place the Spacer Paragraph in your layout, you get to decide between three options. All three of these options are based on modular spacing, so they adjust as your screen size changes. Pixel dimensions are given for reference.  

  • None. This is the default (largest) option. 36px/3.6rem
  • Reduced. 26px/2.6rem
  • Minimal. 12px/1.2rem

If you add no Spacer Paragraph, you will not get any additional space between paragraphs in the same section.

Add a spacer within the same section

When editing: 

Screenshot illustrating adding a spacer within a section

What the end user sees:

Screenshot illustrating what the visitor sees when a spacer is added within a section

 

Adding a horizontal spacer

When editing:

Screenshot illustrating adding a horizontal spacer between sections

What the end user sees:

Screenshot illustrating what the visitor sees when a horizontal spacer is added between sections

Related Topics

desk step with different typography elements
Learn about the most flexible tool you have with the Text Area Paragraph.