Shortcodes

Callouts

Six callout types via the relearn-compatible `notice` shortcode.

Callouts are the most-used shortcode in any workshop. The theme ships one shortcode — notice — with six built-in styles, each with its own color and icon. It’s a drop-in for hugo-theme-relearn’s notice , so existing relearn content migrates verbatim.

The six styles #

{{< notice tip >}}
A warm, helpful aside.
{{< /notice >}}

With a custom title #

{{< notice tip "Pro move" >}}
Use the keyboard shortcut to skip the menu altogether.
{{< /notice >}}

Parameters #

All parameters are optional. Positional 0/1/2 map to style/title/icon.

Style presets #

Style values are case-insensitive — style="Info" and style="info" resolve the same way. See Migrating from relearn for the full migration checklist.

Custom icon #

Override the default icon with any Lucide name the theme ships (rocket, shield, download, etc.).

{{% notice style="tip" title="Lift off" icon="rocket" %}}
The `icon` param accepts any name from the [Icons](../07-icons/) catalog.
{{% /notice %}}

Collapsible #

Set expanded="true" for an open-by-default <details> the reader can collapse, or expanded="false" for the opposite.

{{% notice style="info" title="Advanced details" expanded="false" %}}
Collapsed by default; reader can expand to see the body.
{{% /notice %}}

Use groupid to sync multiple <details> notices so opening one closes the others (native <details name> attribute, no JS).

GitHub Alerts — markdown syntax #

If you’re authoring in plain markdown (or migrating content from a GitHub README), the theme also recognises GitHub Alerts . They route through the same renderer as notice, so the output is identical to a shortcode invocation.

> [!NOTE]
> Useful information that users should know.

> [!TIP]
> Helpful advice for doing things better.

> [!IMPORTANT]
> Key information users need to know to achieve their goal.

> [!WARNING]
> Urgent info that needs immediate user attention to avoid problems.

> [!CAUTION]
> Advises about risks or negative outcomes of certain actions.

Renders as:

GitHub’s five types map onto the theme’s six like this:

GitHub doesn’t have a success equivalent — use {{< notice success >}} for that.

Nested callouts #

A callout inside a callout sheds its box and gets a coloured vertical strip on the left edge — like a margin mark. The inner keeps its own type color so the reader still sees whether it’s a tip, an info, a warning, etc.; the type icon sits at the top of the strip as the visual anchor. Works for any combination of types, on either authoring path ({{% notice %}} or > [!TYPE] blockquote), and cascades to arbitrary nesting depth.

{{% notice icon="user" style="orange" title="Persona" %}}
Putting your SRE hat back on...

> [!IMPORTANT]
> Wouldn't it be great if we could have 24/7 monitoring...
{{% /notice %}}

Purely a visual treatment — no shortcode change. The CSS picks it up because the inner .callout literally lives inside the outer’s .callout__body; the descendant selector handles it. Deep nesting (3+ levels) keeps cascading.

Severity ladder #

Visual weight escalates with severity — pick the right type and the page does the right thing automatically:

Use danger sparingly. Its visual cost is high by design; if everything’s an emergency, nothing is. A workshop with two genuine danger blocks across 40 pages has them land properly. A workshop with twenty does not.

When to use which #

Callouts are noisy. Use them sparingly — three per page is the sweet spot, six is too many. If you find yourself reaching for a callout to highlight every paragraph, your prose is doing the wrong job.