Spacing

We’ve made some “spacer” blocks of different sizes to assist in vertical spacing between elements when the default spacing is not sufficient. Within reason, white space greatly helps with the usability and design of the page. This page offers some basic guidelines for intended use of these spacer blocks.

To implement spacing block on your page: While you are on the page you wish to edit, click on the block before where you want to add some vertical space. Then, click the little [+] icon at the top left of your page. Type “spacer” in the Block search field to filter all blocks by “spacer”. Select the reusable block for the amount of space you wish to add. The selected spacer block will load into your page below the component that you have selected.

Some guidelines for vertical spacing

8px spacer: Use after headlines

48px spacer: Use between blocks

120px spacer: Use above the footer

Skip to toolbar