Callout Types

Callouts

Callouts are specially formatted blocks for notes, warnings, tips, and other highlighted content.

Callout Types

Five built-in types: note, warning, important, tip, caution.

::: {.callout-note}
This is a note callout.
:::

Replace note with any other type (warning, important, tip, caution) for the corresponding style.

Custom Titles

Use a heading for custom title:

::: {.callout-note}

## Custom Title Here

Content of the callout.

:::

Or use title attribute:

::: {.callout-note title="My Custom Title"}
Content of the callout.
:::

Appearance Options

Three styles: default (colored header with icon), simple (lighter, no colored header), minimal (borders only).

::: {.callout-note appearance="simple"}
Simple appearance.
:::

Set document default in YAML:

callout-appearance: simple

Collapsible Callouts

::: {.callout-tip collapse="true"}

## Expand for Details

Hidden content revealed on click.

:::

collapse="true" starts collapsed. collapse="false" starts expanded but is collapsible. Without collapse, the callout is not collapsible.

Icons

Disable per-callout or document-wide:

::: {.callout-note icon="false"}
No icon on this callout.
:::

callout-icon: false

Cross-Referenceable Callouts

Add an ID with the appropriate prefix to reference callouts:

::: {#nte-important .callout-note}

## Important Information

This callout can be referenced.

:::

See @nte-important for details.

Callout Prefixes

Nested Callouts

Use more colons for outer divs when nesting:

:::: {.callout-note}

## Outer Callout

::: {.callout-tip}
Nested callout.
:::

::::

Format-Specific Options

# HTML
format:
  html:
    callout-appearance: simple
    callout-icon: true

# PDF
format:
  pdf:
    callout-appearance: default

RevealJS supports callouts but collapse is not available.

Styling Callouts

Custom CSS (HTML)

.callout-note {
  border-left-color: #0066cc;
}

.callout-note .callout-title {
  background-color: #e6f0ff;
}

SCSS Variables

$callout-color-note: #0066cc;
$callout-color-tip: #00cc66;

Summary of Attributes

Callouts support any markdown content including lists, code blocks, images, and multiple paragraphs.

Resources

• Quarto Callouts