# Callouts

Six kinds of note, from a friendly tip to a warning about losing data.

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.

<Note>
**Good to know**

A note adds context that's useful but not essential.
</Note>

<Info>
**How it works**

Info explains something happening behind the scenes.
</Info>

<Tip>
**A faster way**

A tip saves the reader a few steps.
</Tip>

<Check>
**All set**

Check confirms that something worked, such as a finished install.
</Check>

<Warning>
**Before you continue**

A warning comes before a step that's hard to undo.
</Warning>

<Danger>
**This deletes data**

Danger is for actions that remove something for good.
</Danger>

## 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.