Container

The built-in container tag — centers content horizontally and caps its width with a comfortable side gutter. Size tokens, fluid mode, and a full attribute reference.

{% container %} is a built-in tag that centers content horizontally and caps it to a comfortable reading width with a side gutter. It’s the wrapper you reach for around a block of prose or a centered section. Set size to choose the max width, or fluid to take the full width while keeping the gutter.

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

Sized column

size is a Mantine size token (xs–xl) or any CSS width — it sets the max content width. Smaller tokens make a narrower column. A tinted background and padding make the bounds visible.

A wider size

Bump size up to widen the column. lg is roomy enough for two-column content or a wide section.

Fluid

fluid ignores size and takes the full available width, keeping only the gutter — handy for a full-bleed section that still wants side padding.

With other components

The body is ordinary Markdown, so Container makes a tidy frame for a centered {% stack %} — a heading, a paragraph, and a call to action capped at a readable width.

Attributes

size and fluid are the options of their own; everything else is the shared Mantine spacing/sizing system. Omit any attribute to take its Mantine default (size md).

CSS Selectors

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

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

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

Injecting Attributes

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