Divider

The built-in divider tag — a labelled or plain horizontal/vertical rule. Usage, options, and live examples (labels, position, variants, color).

divider is a horizontal or vertical rule — plain, or with a caption. It ships with aardvark, so a divider is a single tag with no setup. A plain Markdown thematic break (---) already renders as a Divider, so reach for the tag when you want a label, a variant, a specific color, or a vertical rule.

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

Demonstrations

The label is the block body or a label param. A plain divider with a centered label, and a dashed one with a body label:

The label sits in the center by default; labelPosition moves it left or right:

variant, color, and size change the line itself — dashed, dotted, or a thick colored rule:

my controls the breathing room around a horizontal rule (a spacing token or any CSS length):

A paragraph above the rule.

A paragraph below the rule — note the wider gap above and below.

Set orientation='vertical' and give the rule an h (height); a vertical rule is meant to sit inside a flex row, between two pieces of content:

With other components

A divider separates sections inside any surface. Here it splits a paper panel:

Attributes

Omit any attribute to take its default. Spacing and sizing values take a Mantine token (xs–xl) or any CSS length.

attr={...} forwards raw HTML attributes (e.g. an id for a deep link) onto the rendered rule.

CSS Selectors

Target the rendered element through its island marker, [data-aardvark-island="Divider"], or through the Mantine Styles API classes:

/* Every rendered Divider carries this island marker */
[data-aardvark-island="Divider"] { }

/* Mantine Styles API classes */
.mantine-Divider-root { }
.mantine-Divider-label { }

Injecting Attributes

attr={…} forwards raw HTML attributes — including event handlers — straight onto the rendered element, so you can wire DOM behavior the tag does not expose. The handler can be a full multi-line script, not just one expression — this one logs the value to the console and shows it in an alert: