The Spacer component inserts vertical space between content and, when needed, adds a horizontal divider for extra visual separation. Authors can select a space size that fits their layout and, if a divider is included, adjust its style, color, thickness, width, and alignment. Reach for this component whenever you want a quick, consistent way to separate sections without tweaking margins or writing code.
Example
Layout and Styling Options
Vertical spacing
X-Small
Small
Medium
Large
X-Large
Custom (200px)
Divider style
Divider color
Divider thickness
Divider width
Divider alignment
Note: Divider alignment is disabled whenever the divider width is set to Expand.
Usage
Do
- Pick a vertical spacing size that reflects the visual importance of the sections you’re separating.
- Stick with the predefined sizes to keep page rhythm consistent.
- Keep divider thickness subtle so it guides the eye without becoming a focal point.
- Align a non-full-width divider with the primary content column for neat edges.
- Reserve custom pixel values for special layouts that truly need them.
- Group related sections with similar spacer settings to reinforce hierarchy.
- Preview the page flow after inserting a spacer to ensure it still reads smoothly.
Don't
- Avoid stacking several spacers in a row just to create an oversized gap.
- Using random custom sizes when a preset would work introduces inconsistency.
- Adding a divider to every spacer quickly clutters the layout.
- Bright, high-contrast divider colors can sometimes distract from your content.
- Excessively thick dividers pull attention away from headings and images.
- Relying on spacers to patch deeper layout problems hides issues rather than fixing them.
- Mixing spacers with manual line breaks can lead to unpredictable spacing.