Callouts
Three callout variants ship with the theme: .info,
.warning, and .box. Each is plain
<div> markup. An optional <strong>
first child renders as the callout heading.
Info
<div class="info"> — informational asides,
reference notes, gentle reminders.
The HTML pipeline reads <strong> as a heading
only when it’s the callout’s first child. Anywhere
else, it’s just emphasized text.
Without a heading, the callout still renders — just without the icon row:
Embed paths, fragment markers, and JSONPath selectors are all documented in Code blocks.
<div class="note"> is an alias for .info
— same colors and icon. It exists so content carried over from
older themes that used <div class="note"> renders
unchanged.
Warning
<div class="warning"> — sharper attention
cues for breaking changes, deprecations, footguns.
Upgrading past v0.3 requires running the symbol-id rewriter once on existing content. Skipping it leaves stale anchors in the published index.
The data-toc-skip attribute is gone in v0.4 —
use data-toc="omit" on the section instead. Pages
still carrying the old attribute build, but the value is
ignored.
Box
<div class="box"> — a generic shaded
container with no semantic role. Use it for sidebars, callouts
that don’t fit either of the above, or to visually group a
list with its preamble.
~3 minutes for the whole authoring contract; ~8 minutes if you also work through the embed and JSONPath examples on the Code blocks page.
Composition
Callouts can contain any block content — paragraphs, lists,
nested <pre> blocks, even images. The
pipeline doesn’t treat callout interiors specially.
The code-box transform runs as usual:
// Callouts pass their interior through every standard transform.
const ok = process(input);