Overlay

The built-in overlay tag — a dimming or gradient veil over a box, for spotlighting content or a disabled state. Usage, options, and live examples.

A built-in tag for a dimming veil over a box — for spotlighting content, a hover scrim, or a disabled state. The tag wraps the veil in a sized box so it’s visible right here on the page, and the block body renders centered on top of the veil. Tune the veil with color, backgroundOpacity, blur, and radius, or swap the flat color for a gradientFrom/gradientTo/gradientDeg linear gradient.

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

Demonstrations

A flat dimming veil — set the color and backgroundOpacity (0–1); the body sits centered above it:

A blurred veil

blur frosts whatever sits behind the veil (in px); radius rounds the box:

A gradient veil

Pass gradientFrom / gradientTo / gradientDeg for a fade instead of a flat color — its start/end colors and angle:

With other components

The body is ordinary Markdown, so any tag can sit on the veil. Here a button reads as a call to action through a dimmed scrim:

Attributes

Setting any of gradientFrom / gradientTo / gradientDeg composes a linear-gradient veil and overrides the flat color. Unset gradient endpoints default to a dark-to-transparent fade at 90°.

CSS Selectors

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

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

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