Stack

The built-in stack tag — a flex column that stacks its children vertically with a consistent gap. Usage, options (justify, align, gap), and live examples.

{% stack %} stacks its children in a vertical column with a consistent gap — the column counterpart to {% group %}. It is a flex column: control where children sit along the column (justify), how they line up across it (align), and the space between them (gap). By default align is stretch, so children fill the width. The block body is the content.

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

Basic column

With no options, children stretch to the full width and stack with the default md gap.

Align (cross axis)

align sets align-items — how children line up across the column. The default is stretch (children fill the width); use center, flex-start, or flex-end to size children to their content and position them.

Justify (main axis)

justify sets justify-content — where children sit along the column when the stack is taller than its content. The default is flex-start; center, flex-end, and space-between need a fixed height (h) to have a visible effect.

Gap

gap is the space between children — a Mantine size token (xs–xl) or any CSS value (4px, 2rem). The default is md.

With other components

stack composes with any other tag. Here it stacks a heading badge above a group of action buttons.

Attributes

CSS Selectors

Each stack carries data-aardvark-island="Stack" on its wrapper, and Mantine exposes its parts as mantine-Stack-* classes — target either to style it from your theme CSS.

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

.mantine-Stack-root {
  /* the root part */
}

Injecting Attributes

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