Title

The built-in title tag — a Mantine heading (h1–h6) with an explicit level, visual size independent of the level, and the full typography surface: color, align, transform, weight. Usage, options, and live examples.

{% title %} is a built-in tag for headings — the Mantine Title element (<h1>–<h6>) with explicit control over the level and its styling. A plain Markdown # heading still works for ordinary headings; reach for this tag when you want a heading with a specific color, alignment, transform, or a visual size that differs from its level.

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

Demonstrations

Order

order sets the heading level, 1–6 (<h1> … <h6>). It controls both the semantics and the default visual size. Out-of-range values fall back to Mantine’s default:

Visual size

Set size to detach the visual size from the level — a small <h2> for SEO without a giant heading, say. It takes a heading token (h1–h6), a Mantine size (xs–xl), or any CSS size:

Color, align, transform, weight

The usual typography props apply: c (color), ta (align), tt (transform), and fw (weight). lh and lts tune line height and letter spacing:

Content and spacing

Give the heading inline with text, or as the block body. The block body renders inline Markdown (**bold**, `code`, [links]). Margin props (mt, mb, …) space the heading from its neighbours:

With other components

Pair a title with Text for a lead paragraph, or sit one above a Table as a section header. Here a heading and a dimmed standfirst form a section intro:

Attributes

Omit any attribute to take its Mantine default.

CSS Selectors

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

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

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

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: