Spacer
Add a deliberate gap between elements when a separate spacing block is useful.
Code name: Spacer · Category: Layout
Registered in the live renderer. Website context and the limitations below still apply.
When to use it
Use a spacer for an intentional gap in a layout. Prefer the surrounding block’s spacing settings when that is easier to maintain.
In the editor
- Insert a spacer between elements.
- Set its height.
- Check the gap on mobile as well as desktop.
Example
This example uses illustrative content. Media placeholders must be replaced with your own assets; data-backed blocks need the normal website context.
<Spacer height={24} />Behaviour and limitations
- A spacer has no content. Large fixed gaps can push useful information too far down a small screen.
Property reference
Types below describe the editor controls and known choices, not every value accepted by the renderer. A renderer default is extracted from its parameter; an editor-only default does not prove the runtime default. “Not declared here” does not mean required. Preserve omitted values unless the requested edit needs them.
| Property | Editor value type | Default evidence | Guidance |
|---|---|---|---|
height | number | 150 (renderer) | Height. See the usage notes for this block. |
backgroundColor | string | "transparent" (renderer) | Background colour. Theme-derived appearance can still depend on the surrounding section. |
spacing | object | Not declared here | An object of spacing settings. Preserve existing responsive values when changing a single setting. |
screenList | string | "" (renderer) | Comma-separated device names to hide on: mobile, tablet, desktop. An empty string hides on none. |
idAnchorName | string | "" (renderer) | ID (anchor). See the usage notes for this block. |
css | string | Not declared here | Custom CSS text. Preserve unrelated rules and prefer the dedicated property for supported edits. |
