Panel

The built-in panel tag — a supplementary side panel that floats beside the main content on a wide screen and stacks below it on a narrow one. Usage, options, and live examples.

panel is a supplementary side panel — a bordered, subtly-raised surface for secondary content that sits beside the main text. Use it for a “see also”, an API note, related links, or any aside that supports the main flow without interrupting it. On a wide screen the panel floats to one side and the surrounding text wraps alongside it; on a narrow screen it drops into place as a full-width block. It ships with aardvark, so a side panel is a single tag with no setup.

The block body is the panel content (any Markdown), and an optional title renders a small heading above it. Use it as {% panel %} in Markdown, or call it from Python logic (loops, snippets) via component('aardvark', 'panel', …). Close it with {% endPanel %}.

Demonstrations

A titled panel floats to the right by default, and the main content wraps around it:

The panel keeps secondary material close to the text it supports without pushing it out of the way. On a wide viewport it floats beside this paragraph; shrink the window and it stacks into a full-width block above this text instead. This is the whole point of a side panel — it stays out of the main reading path while remaining a glance away, and the responsive stacking means it never crushes the prose on a phone.

Float to the left

Set side="left" to float the panel to the left edge instead:

The surrounding paragraph flows around whichever side the panel takes. Left-floating panels read well next to a list or a definition that the panel annotates, since the eye reaches the panel before the text it comments on. As with the default right float, the panel drops below the text as a full-width block once the viewport is too narrow to sit prose beside it.

Without a title

title is optional — omit it for a plain surface:

Attributes

CSS Selectors

Each panel carries data-aardvark-island="Panel" on its wrapper, and the rendered Mantine Paper exposes its root as mantine-Paper-root — target either to style it from your theme CSS.

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

[data-aardvark-island="Panel"] .aardvark-panel-title {
  /* the optional heading */
}

[data-aardvark-island="Panel"] .aardvark-panel-body {
  /* the Markdown body */
}

Injecting Attributes

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