The spacer component has no background of its own and will thus have the same background as its containing component.

It can be used in the main page flow, or within another component. When used inside another component, such as a Flexible Column Frame, the spacer component will only add space in its enclosing column.

For any device, the height of the spacer is configured in steps. Each step is a multiple of the standard component padding for a particular device. This simply means that the steps are designed to look good when positioned next to other components.

Note: Spacer components with height set to 0 will show up in edit mode. This is because you need to be able to click on it to edit its settings. If you go into preview mode, the spacer component will disappear as expected.

1. Per Device Spacing Enabled (Checkbox Checked): use this spacing mode if you want the spacer to show up only on desktop, or to occupy more space on tablet than other devices.
   • Desktop Height: the number of steps occupied by the spacer on desktop devices. A value of 0 will make it disappear.
   • Tablet Height: same as above, except for tablet devices.
   • Mobile Height: same as above, except for mobile devices.
2. Per Device Setting Disabled (Checkbox Unchecked): use this spacing mode if you want the spacer to show up on all devices. It will still resize to match the proportions of a given device, but will occupy the same number of steps.
   • Height: the number of steps occupied by the spacer on all devices. 0 will make it disappear.