callout

block

An admonition — an icon, a coloured heading, and a body — selected by class: note/info/tip/warning/success/error, or a custom type.

A callout is an admonition: an icon, a coloured heading, and a body. Six built-in types are selected by class, each shipping a default colour and icon — note, info, tip, warning, error, success. See callout classes.

callout "Note"    { class = ["note"]    body = "Background context the reader should remember." }
callout "Info"    { class = ["info"]    body = "Neutral information worth surfacing." }
callout "Tip"     { class = ["tip"]     body = "A helpful shortcut or best practice." }
callout "Warning" { class = ["warning"] body = "Something to be careful about." }
callout "Error"   { class = ["error"]   body = "A failure or hard constraint." }
callout "Success" { class = ["success"] body = "Confirm an action completed." }

Custom types

For a custom type, give a class an accent colour and list it in the callout's class — that sets the accent (heading, border, icon) with no CSS — and the icon field picks any glyph. See styling.

class "deploy" { accent = "#b48ead" }
callout "Deploying" {
  class = ["deploy"]
  icon  = "lucide.rocket"
  body  = "A custom type — the class sets its accent colour."
}

Examples

The six callout types

Each built-in admonition type is selected by its class, shipping a default colour and icon.

callout "Note"    { class = ["note"]    body = "Background context the reader should remember." }
callout "Tip"     { class = ["tip"]     body = "A helpful shortcut or best practice." }
callout "Warning" { class = ["warning"] body = "Something to be careful about." }
callout "Error"   { class = ["error"]   body = "A failure or hard constraint." }

Expected: Four admonitions, each with its type's icon and accent colour.

Related

- table

- list / li