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 commands, each a separate menu item:
Info Callout (blue): supplementary information, tips, notes
Warning Callout (amber): caution, potential issues
Danger Callout (red): critical warnings, destructive actions
Success Callout (green): confirmations, positive outcomes
Type your message inside the callout block.
Change callout type
Click the variant icon at the start 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 are on the right track" | Expected results after completing a task |
Do not overuse callouts. If every paragraph has one, readers start ignoring them and the visual emphasis is lost. Aim for 1 or 2 for each topic.
Tips
Keep callouts brief, 1 to 3 sentences. Long callouts lose their visual emphasis.
Do not 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