List

The built-in list tag — a Mantine List (ordered or unordered) with icon bullets, sizing, and spacing controls. Usage, options, and live examples.

{% list %} is a built-in tag for ordered and unordered lists. A plain Markdown list still works for ordinary lists; reach for this tag when you want an icon bullet, an explicit size, or custom spacing. Give the items in items, pipe-separated (or as a JSON array); each item renders inline Markdown.

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

Demonstrations

Unordered (the default)

Pass items pipe-separated; each becomes a bulleted item.

Ordered

type='ordered' numbers the items instead of bulleting them.

Icon bullets

Set icon to a Tabler name to swap the bullet for an icon on every item.

Size, spacing, padding, center

size (xs–xl) sets the text size, spacing the gap between items, withPadding indents the list from its container, and center vertically centers each item against its bullet. Items render inline Markdown, so **bold**, `code`, and [links] all format.

JSON array items

When an item contains a literal pipe, pass items as a JSON array instead of a pipe-separated string.

With other components

Items render inline Markdown, so `code` and [links] format inside each item.

To compose items out of other built-in tags (Code, Mark, …), build the item strings in Python and pass them as a list — the call form lets you mix tag output into each item.

Attributes

Items render inline Markdown, so **bold**, `code`, and [links] all format.

CSS Selectors

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

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

/* Mantine Styles API classes */
.mantine-List-root { }
.mantine-List-item { }
.mantine-List-itemWrapper { }
.mantine-List-itemLabel { }

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: