AspectRatio

The built-in aspectratio tag — keeps its content at a fixed width-to-height ratio as it scales. Common ratios, sizing, and a full attribute reference.

{% aspectratio %} is a built-in tag that keeps its content at a fixed width-to-height ratio as it scales. It’s the reliable way to embed a video, map, or image so the box never jumps the layout while the media loads. The ratio is a plain number — width divided by height — and the block body is the content that fills the box.

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

Widescreen (16:9)

1.7777 is the classic 16∶9 widescreen video ratio. Cap the size with maw (max width) so the box doesn’t stretch edge to edge.

A square (1:1)

ratio=1 makes a perfect square — useful for avatars, thumbnails, and icon tiles.

Standard (4:3)

1.3333 is the 4∶3 ratio of older photos and slides.

With other components

The body is ordinary Markdown, so the most common use is wrapping a media embed — here a Markdown image — so the box holds its shape before the image arrives.

Attributes

ratio is the one option of its own; everything else is the shared Mantine spacing/sizing system. Omit any attribute to take its Mantine default (ratio 1).

CSS Selectors

Each aspectratio carries data-aardvark-island="AspectRatio" on its wrapper, and Mantine exposes its parts as mantine-AspectRatio-* classes — target either to style it from your theme CSS.

[data-aardvark-island="AspectRatio"] {
  /* style every aspectratio on the page */
}

.mantine-AspectRatio-root {
  /* the root part */
}

Injecting Attributes

attr={…} forwards raw HTML attributes (including event handlers) straight onto the rendered element.