Callout

Highlighted content blocks with titles, icons, and colors.

Callout showcase controls

Color

Icon

Usage#

Choose a palette with color and write the body as Markdown.

:::Callout{color="sky"}
Even a **small detail** deserves a little attention.
:::

Add a title for a heading above the body.

:::Callout{color="sky" title="A small heads-up"}
Even a small detail deserves a little attention.
:::

Add a registered icon ID with icon, or omit it for text only.

:::Callout{color="sky" title="A small heads-up" icon="lightbulb"}
Even a small detail deserves a little attention.
:::

Use ariaLabel to name a callout without adding a visible title.

:::Callout{color="yellow" ariaLabel="Before you start"}
Save your changes before continuing.
:::

colorRequired: ColorID; Required registered palette for the callout surface, border, and text.

ctaDefault undefined: object; Top-right action with a label and destination.

iconDefault undefined: IconID; Decorative icon alongside the title or body.

titleDefault undefined: string; Heading. Omit for a body-only callout.

ariaLabelDefault undefined: string; Accessible name used only when no title is supplied.