A callout lifts one message out of the text. Each kind has its own colour and icon, so readers learn what to expect at a glance. A title is optional.
Good to know
A note adds context that's useful but not essential.
How it works
Info explains something happening behind the scenes.
A faster way
A tip saves the reader a few steps.
All set
Check confirms that something worked, such as a finished install.
Before you continue
A warning comes before a step that's hard to undo.
This deletes data
Danger is for actions that remove something for good.
When to use one
- Keep callouts rare. Three on a screen and readers stop seeing them.
- Pick the kind by consequence: a tip when it saves time, a warning when it can cost data or money.
- Put the callout right before the step it's about, not at the end of the page.