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

attr={...} forwards raw HTML attributes onto the rendered element.

Good to know

• justify needs somewhere to distribute: a stack is exactly as tall as its children unless you give it an h (or mih), so center, flex-end, and space-between look identical to the default until you do — the example above sets h=160 for that reason.
• Because align defaults to stretch, children fill the column’s width — buttons and papers come out full-width. Set align='center' (or flex-start) to let them size to their own content.
• Each tag in the body becomes its own child, one line after another — but consecutive lines of plain text are a single paragraph and stack as one child. Separate text items with a blank line if each should be spaced by gap.

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.