Add callouts
Callouts draw attention to important information — tips, warnings, errors, and confirmations.
Insert a callout
Type
/in the editor to open the Editor slash commands menu.Select one of the four callout types:
Info (blue) — supplementary information, tips, notes
Warning (amber) — caution, potential issues
Danger (red) — critical warnings, destructive actions
Success (green) — confirmations, positive outcomes
Type your message inside the callout block.
Change callout type
Click the icon on the left side of an existing callout to cycle through the four types: info → warning → danger → success → info.
When to use each type
Type | Use for | Example |
|---|---|---|
Info | Tips, additional context, "good to know" notes | Feature availability, background context |
Warning | Potential issues, prerequisites, things that could go wrong | Version requirements, deprecated features |
Danger | Data loss, irreversible actions, security implications | Destructive operations, permanent deletions |
Success | Confirmation of expected outcomes, "you're on the right track" | Expected results after completing a task |
Don't overuse callouts. If every paragraph has one, readers start ignoring them and the visual emphasis is lost. Aim for one or two per topic.
Tips
Keep callouts brief — one to three sentences. Long callouts lose their visual emphasis.
Don't overuse callouts. If everything is highlighted, nothing stands out.
Callouts render with their colors and icons on Publish a web site, making them effective for scanning.
Callout styling carries over to published sites automatically. The colors, icons, and formatting you see in the editor match what readers see on the published page.
See also
Format content in the editor — Inline and block-level formatting options
Use slash commands — Insert any block type from the keyboard
Editor slash commands — Full list of available slash commands
Published site features — How content renders on published sites