Spacing

How white space is used in a layout is critical to how people experience your page. It’s a fundamental element in effective design and helps lead the users through the content. We’ve established some guidelines to help you account for sufficient vertical spacing between your block components to assist in vertical spacing between elements when the default spacing is not sufficient.

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 “spacer” block to load it into your page below the component that you have selected.


Some guidelines for vertical spacing

By default, the spacer sets 100px of vertical space. We have found that the following guidelines for vertical spacing work well on both desktop view and mobile.

8px spacer: Use after headlines

48px spacer: Use between blocks

120px spacer: Use above the footer

160px spacer: between certain components when stacked.. ie: between stacked Media & Text blocks. See example:

Skip to toolbar