Space

The built-in space tag — an empty spacer that adds horizontal or vertical room between elements. Usage and live examples.

{% space %} is an empty spacer — it adds horizontal or vertical room between elements without reaching for a margin. Set h for vertical space (above and below) or w for horizontal space (between inline elements); each takes a Mantine size token (xs–xl) or any CSS value. It is self-closing — there is no body.

Use it as {% space %} in Markdown, or call it from Python logic (loops, snippets) via component('aardvark', 'space', …).

Vertical space

h adds vertical room between stacked elements.

Horizontal space

w adds room between inline elements. Wrapping the row in a group with gap=0 lets the spacer do all the spacing.

CSS value

Both h and w accept any CSS length, not just the xs–xl tokens — handy when you need an exact gap.

With other components

space sits between any two components. Here it adds breathing room between a button and the badge that follows it.

For finer control, the Mantine spacing props on any other tag (mt, mb, mx, …) cover most cases without a separate spacer.

Attributes

CSS Selectors

Each space carries data-aardvark-island="Space" on its wrapper; it renders a single spacer element with no Mantine Styles API parts, so target the island wrapper.

[data-aardvark-island="Space"] {
  /* style every space on the page */
}

Injecting Attributes

attr={…} forwards raw HTML attributes (including event handlers) straight onto the rendered element.