Spacer🔗

The spacer component creates a flexible space that expands along the major axis of its containing flex layout.

Under the hood, the spacer is simply a <div> with the flex-basis set to size relative to the baseline grid. This will allow you to create a space that will adapt vertically and horizontally in any flex-box layout.

The default space is 1x to the baseline grid. Eg. 8px if the theme baseline is 8px. Setting the size to 2 would make it 1px, set it to 0.5 would make it 4px. In accordance with the design system rules: The size must be a multiple of 0.5, we do not allow sizes like 0.3.

Basic Example🔗

In a row🔗

Adapt size based on viewport🔗

You can specify a media query (or use one from the theme) to control the size of the spacer for different viewports.

Props - Spacer🔗