Callouts are used to highlight important information within content. They draw attention to notes, tips, warnings, and other contextual messages.
Core Principles
- Callouts use a base + variant pattern (like buttons and borders)
- The base class provides structure and neutral styling
- Variant classes add semantic color via left border and background tint
- All colors are controlled by semantic tokens that can be customized per project
Status Color Tokens
Callout variants are powered by status color tokens defined in :root. Each status has a foreground and background token:
| Token | Default | Purpose |
|---|---|---|
| Informational, notes | ||
| Info background | ||
| Tips, positive feedback | ||
| Success background | ||
| Warnings, attention needed | ||
| Warning background | ||
| Caution, destructive actions | ||
| Danger background | ||
| Important, emphasis | ||
| Accent background |
Callouts, badges, and other components reference these tokens directly — no intermediate --callout-* layer needed.
Base Callout
The class provides the structural foundation:
General-purpose highlighted content.
<div class="callout">
<p class="callout-description">General-purpose highlighted content.</p>
</div>
Structural properties:
- Left border using width (4px)
- Padding using spacing tokens
- Neutral background ()
- First/last child margin normalization
Callout Title
Use inside any callout for a styled heading:
Content here.
<div class="callout callout-note">
<div class="callout-title">Note</div>
<p class="callout-description">Content here.</p>
</div>
The title inherits the variant's accent color automatically.
Callout with Icon
Icons are optional. Add to the element to enable the icon layout. No wrapper div needed — the icon, title, and description are all direct children with their own classes.
<div class="callout callout-note callout--icon">
<div class="svg-icn" data-icon="info"><!-- info SVG --></div>
<div class="callout-title">Note</div>
<p class="callout-description">This callout has an icon for extra visual context.</p>
</div>
How it works:
- switches the callout to a two-column CSS grid
- The is pinned to row 1, column 1 — vertically centered with the title via
align-self: center - and auto-flow into column 2
- The icon stays aligned with the title regardless of title font size (
font-s,h2,h3, etc.) - To remove the icon, drop and the
| Class | Role |
|---|---|
| Enables two-column grid layout | |
| Icon (direct child, pinned to row 1, vertically centered with title) | |
| Title text (row 1, column 2) | |
| Description content (below title, column 2) |
Recommended Icons
Each variant has a suggested icon for visual consistency. These are recommendations — any brand icon can be used.
| Variant | Icon | Shorthand |
|---|---|---|
| Info circle | {{icon:info}} |
|
| Lightning bolt | {{icon:bolt}} |
|
| Warning triangle | {{icon:warning}} |
|
| Close circle | {{icon:close-circled}} |
|
| Exclamation circle | {{icon:exclamation}} |
Variants
Note ()
For useful information users should know, even when skimming.
Useful information that users should know.
<div class="callout callout-note">
<div class="callout-title">Note</div>
<p class="callout-description">Useful information that users should know.</p>
</div>
With icon:
<div class="callout callout-note callout--icon">
<div class="svg-icn" data-icon="info"><!-- info SVG --></div>
<div class="callout-title">Note</div>
<p class="callout-description">Useful information that users should know.</p>
</div>
Tip ()
For helpful advice on doing things better or more easily.
Helpful advice for doing things better.
<div class="callout callout-tip">
<div class="callout-title">Tip</div>
<p class="callout-description">Helpful advice for doing things better.</p>
</div>
With icon:
<div class="callout callout-tip callout--icon">
<div class="svg-icn" data-icon="bolt"><!-- bolt SVG --></div>
<div class="callout-title">Tip</div>
<p class="callout-description">Helpful advice for doing things better.</p>
</div>
Warning ()
For urgent information that needs immediate attention.
Urgent information to avoid problems.
<div class="callout callout-warning">
<div class="callout-title">Warning</div>
<p class="callout-description">Urgent information to avoid problems.</p>
</div>
With icon:
<div class="callout callout-warning callout--icon">
<div class="svg-icn" data-icon="warning"><!-- warning SVG --></div>
<div class="callout-title">Warning</div>
<p class="callout-description">Urgent information to avoid problems.</p>
</div>
Caution ()
For advising about risks or negative outcomes.
Risks or negative outcomes of certain actions.
<div class="callout callout-caution">
<div class="callout-title">Caution</div>
<p class="callout-description">Risks or negative outcomes of certain actions.</p>
</div>
With icon:
<div class="callout callout-caution callout--icon">
<div class="svg-icn" data-icon="close-circled"><!-- close-circled SVG --></div>
<div class="callout-title">Caution</div>
<p class="callout-description">Risks or negative outcomes of certain actions.</p>
</div>
Important ()
For key information users need to achieve their goal.
Key information users need to know.
<div class="callout callout-important">
<div class="callout-title">Important</div>
<p class="callout-description">Key information users need to know.</p>
</div>
With icon:
<div class="callout callout-important callout--icon">
<div class="svg-icn" data-icon="exclamation"><!-- exclamation SVG --></div>
<div class="callout-title">Important</div>
<p class="callout-description">Key information users need to know.</p>
</div>
Rules
| Do | Don't |
|---|---|
| Use semantic variants for meaning | Use color to decorate without purpose |
| Keep callout content concise | Put entire sections inside callouts |
| Use for labeling | Use headings (h1–h6) inside callouts |
| Use recommended icons for visual consistency | Add icons to every callout — use them when they add clarity |
Customize --status-* tokens per project |
Hardcode colors on individual callouts |
Relationship to Alerts
The site also includes an component (, , , , ) for inline callout boxes — typically used in documentation content. These share the same colour tokens as the design system callouts.
The design system callouts () are the structured, project-wide equivalent with icon support and richer layout. For simple inline messages, use . For prominent UI callouts, use .