Text

The built-in text tag — style any run of text with the full Mantine Text surface: weight, size, style, decoration, transform, alignment, color, gradient, truncation, and the spacing system. Usage, options, and live examples.

{% text %} is a built-in tag for styled text — every Mantine Text capability (weight, size, color, alignment, transform, gradient, truncation, …) exposed as a single tag with no setup. Reach for it when plain Markdown emphasis isn’t enough: a colored lead paragraph, an uppercase label, a gradient heading, a clamped excerpt.

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

Demonstrations

Content

Give the text inline with text, or as the block body. The block body is the richer form — it renders inline Markdown (**bold**, *italic*, `code`, and [links](/)), so you can format inside the styled run. Bare URLs in the block body auto-link, and the typographer applies (straight quotes → curly, -- → en-dash). The inline text shortcut, by contrast, is plain text: no Markdown, no auto-linking, and no typography substitutions.

Typography

Set the weight (fw), size (size or fz), style (fs), decoration (td), transform (tt), alignment (ta), font family (ff), line height (lh), and letter spacing (lts):

Color

c takes any theme color, the special dimmed, or any CSS color value:

Gradient

Set variant='gradient' and any of gradientFrom, gradientTo, gradientDeg for gradient text — pair it with a large fz and a bold fw for a hero heading:

Truncation

truncate clips to a single line with an ellipsis (truncate='start' clips the start instead); lineClamp clips to a fixed number of lines. Both need a width to act on — maw caps it here:

Inline placement

By default {% text %} is a block — its own paragraph. To style a run of text inside a sentence, add span (it renders as an inline <span>, so it doesn’t break the paragraph):

Ship it when the badge turns green — never while it’s red.

With other components

Set a Title above a {% text %} standfirst, or use a span run to highlight a word inside ordinary prose. Build a legend from a Python loop:

Attributes

Omit any attribute to take its Mantine default.

CSS Selectors

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

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

/* Mantine Styles API classes */
.mantine-Text-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: