Pull out the message people should not scroll past. The Callout box separates one important statement from the surrounding content. Use it for a condition, warning, short summary, editorial tip or any line that deserves its own visual weight.
Its sense of scale comes from inner spacing and content width together: the same block can feel like a compact note or a large, spacious pause.
Inner spacing controls the air inside the box, while content width determines how broadly the message runs.
For a short condition, note or one important sentence. Minimal inner space gives a quick visual signal.
A strong starting point for most callouts. Noticeable without interrupting the page rhythm too heavily.
For a larger summary or strong transition. More inner space can make it feel like its own section.
Compact example: this offer applies only to products currently in stock.
Spacious example: choose the goal first, then the tool. More inner space works when the message deserves a deliberate pause in the page.
Marker example: if every other section is highlighted, none of them will stand out. The marker is optional; here it uses the Tab appearance, a category word on top of the box. Use it to communicate meaning, not as decoration.
Style sets how much weight the callout carries:
A Note or Card takes a Tone: Neutral or Info (in the site's accent), Warning (amber) or Success (green). The last three come with an icon you can switch off. Keep Warning for a real caution. Below is an example of each style.
Applications for the spring course close at midnight on Friday; after that we can only add you to the waiting list. This is the Note style in the Warning tone.
Your first version is ready in a few minutes, and you can shape it block by block afterwards. This is the Card style with two actions: a button and a text link.
Fewer, precise sentences beat a page of generalities.
Keep to one or two callouts per page. Let the weight of the message pick the style: a Note sits inside running text, a Panel closes a section.
Not only the copy and background: style, tone, marker, buttons and scale can all be tuned.
Note, Card, Statement or Panel, depending on how much weight the message needs.
For Note and Card: Neutral, Info, Warning or Success. The icon can be switched off.
An optional short word or number, shown as a Label, Tab, Watermark (in any of the four corners), Step number (for a 01 / 02 / 03 series) or Quotation mark; Hidden keeps it out of sight.
A primary button and a secondary action can go under the text. The secondary one can be a text link or a button, side by side or stacked.
Choose Tight, Normal or Spacious to control how much air sits inside the box.
Let the background stay in the content column, extend full width or take the content edge to edge; inner and outer spacing are controlled separately.
Choose Reading, Wide or Full to control how broadly the content itself runs.
Align the content left, centre or right. Centre can work for short summaries; left is usually easier for longer copy.
Use custom background, text and accent colours, or a Dark background. Keep contrast clear.
Full-width example: a callout can become a full-width content band too, but use this more sparingly. It works when you genuinely need to signal a strong transition or summary.
The role of the highlighted content determines whether the Callout box is really the right choice.
HIGHLIGHT WHAT ACTUALLY MATTERS
Keep the message short and understandable on its own, then use the background and spacing to fit the rhythm of the page.