Callout

Callout — the built-in admonition box, shown across all four severities (success, info, caution, warning).

The built-in callout tag renders a titled, colored admonition with a severity color and a matching icon. severity is one of success (green), info (primary), caution (yellow), or warning (red); title is optional; and the block body is the message. Close it with {% endCallout %}.

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

Demonstrations

Severities

Set severity to success, info, caution, or warning — one titled example of each:

Without a title

title is optional — omit it for a plain icon + message:

With other components

The block body is full Markdown, so a callout can wrap lists, links, inline code, and other tags:

Attributes

CSS Selectors

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

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

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

.mantine-Alert-title {
  /* the title part */
}

.mantine-Alert-message {
  /* the message part */
}

.mantine-Alert-icon {
  /* the icon part */
}

Injecting Attributes

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