Skip to content

Asides & callouts

An aside is a callout box — a passage set off from the body with a colored left border and a light background tint. It's for tips, warnings, side notes, and worked examples.

::: {.aside type="tip"}
Run `make verify` before trusting a downloaded image.
:::

type is required and selects one of four presets, each with its own accent color:

Type Use for
tip A helpful suggestion
warning Something that needs care
note An incidental detail
example A worked illustration

Title

By default the box is titled with the capitalized type name (Tip, Warning). Override it with title, or pass an empty string to remove the title entirely:

::: {.aside type="warning" title="Before you build"}
Commit your work first.
:::

::: {.aside type="note" title=""}
A note with no heading.
:::

Appearance

  • color — override the accent color with a #rrggbb hex value (applies to both the border and the title).
  • border="none" — drop the left border for a lighter, tint-only look.
::: {.aside type="note" color="#8b6914" border="none"}
A custom-colored note with no border.
:::

Recurring callouts

If you use the same callout repeatedly, name it once as a shortcut so each use stays short:

caution:
  class: aside
  interface:
    type:
      bind: class.type
      default: warning
    title:
      bind: class.title
      default: Caution
::: caution
This operation cannot be undone.
:::

See Writing your own shortcuts.