Callout

Callouts draw attention to important information using colored containers with icons.

Variants

Four variants are available: info, success, warning, and danger.

:::callout{variant="info"}
This is an **info** callout for general tips and notes.
:::

:::callout{variant="success"}
This is a **success** callout for positive outcomes or confirmations.
:::

:::callout{variant="warning"}
This is a **warning** callout for things to be cautious about.
:::

:::callout{variant="danger"}
This is a **danger** callout for critical warnings or breaking changes.
:::

Syntax

Use the directive syntax with three colons:

:::callout{variant="info"}
Your content here. Supports **Markdown** formatting.
:::

JSX alternative

You can also use the JSX component syntax:

<Callout variant="info" title="Optional Title">
  Content with **Markdown** support.
</Callout>

Props