Callouts and asides

callout, note, tip, warning, caution, and aside.

Callouts mark editorial guidance. callout takes a kind; note, tip, warning, and caution are aliases that fix the kind. aside is for non-linear supporting material.

Attributes

Attribute	Values	Default
`kind`	`note`, `tip`, `warning`, `caution` (callout only)	`note`
`title`	any text	the kind, capitalized (aside: no title)
`id`	any text; becomes the HTML id	none

Callout

Default kind

Markus

:::callout
With no attributes a callout is a note and the title is the kind, capitalized.
:::

Preview

kind="note"

Markus

:::callout{kind="note"}
The note kind with the automatic title.
:::

Preview

kind="tip"

Markus

:::callout{kind="tip"}
The tip kind with the automatic title.
:::

Preview

kind="warning"

Markus

:::callout{kind="warning"}
The warning kind with the automatic title.
:::

Preview

kind="caution"

Markus

:::callout{kind="caution"}
The caution kind with the automatic title.
:::

Preview

Custom title

Markus

:::callout{kind="tip" title="Save a step"}
Use `title` to replace the automatic title.
:::

Preview

Body with Markdown

Markus

:::callout{kind="note" title="Rich body"}
A callout body is full Markdown:

- lists
- **emphasis** and `code`

```bash
markus site site --out _site
```
:::

Preview

Alias directives: note, tip, warning, caution

Each kind is also a directive of its own. kind is implied by the name; only title is accepted.

:::note

Markus

:::note
The `note` alias without a title.
:::

:::note{title="Custom note title"}
The `note` alias with a title.
:::

Preview

:::tip

Markus

:::tip
The `tip` alias without a title.
:::

:::tip{title="Custom tip title"}
The `tip` alias with a title.
:::

Preview

:::warning

Markus

:::warning
The `warning` alias without a title.
:::

:::warning{title="Custom warning title"}
The `warning` alias with a title.
:::

Preview

:::caution

Markus

:::caution
The `caution` alias without a title.
:::

:::caution{title="Custom caution title"}
The `caution` alias with a title.
:::

Preview

Aside

An aside is supporting material that sits apart from the main flow. It is a separate directive from callout.

Aside without title

Markus

:::aside
Supporting material with no heading.
:::

Preview

Aside with title

Markus

:::aside{title="Why this matters"}
An aside should still make sense if a renderer flattens the page to one column.
:::

Preview