Callout
Callouts are used to highlight important information within content. They draw attention to informational notes, success tips, warnings, and other contextual messages.
The class is required. Type variants use data-type with the shared status vocabulary (info, success, warning, danger). The icon layout uses the data-icon boolean attribute.
Anatomy
| Axis | Mechanism | Example |
|---|---|---|
| Type (semantic) | data-type |
data-type="info" |
| Icon layout | data-icon (boolean) |
data-icon |
No component-level tokens — callout references status tokens directly.
Callout uses data-type (not data-color) because the type describes what the content means, not just what colour to apply. Display components like badge, tag, and button use data-color for visual colour. Feedback components like callout and toast use data-type for semantic meaning.
Status colour tokens
Callout types are powered by status colour tokens defined in :root:
| Token | Default | Purpose |
|---|---|---|
| Informational content | ||
| Info background | ||
| Tips, positive feedback | ||
| Success background | ||
| Warnings, attention needed | ||
| Warning background | ||
| Risks, destructive actions | ||
| Danger background |
Callouts, badges, toasts, and other components reference these tokens directly — no intermediate --callout-* layer needed.
Base callout
The class provides the structural foundation with neutral styling.
General-purpose highlighted content.
<div class="callout">
<p class="callout-description">General-purpose highlighted content.</p>
</div>
Types
Use data-type to set the semantic variant. Each type applies a coloured background and accent colour to the title and icon. The type names are shared with toast — one vocabulary across all feedback components.
data-type |
Use for |
|---|---|
info |
Useful information users should know |
success |
Helpful advice, positive outcomes |
warning |
Urgent information to avoid problems |
danger |
Risks or negative outcomes |
Info
Useful information that users should know.
<div class="callout" data-type="info">
<div class="callout-title">Note</div>
<p class="callout-description">Useful information that users should know.</p>
</div>
Success
Helpful advice for doing things better.
<div class="callout" data-type="success">
<div class="callout-title">Tip</div>
<p class="callout-description">Helpful advice for doing things better.</p>
</div>
Warning
Urgent information to avoid problems.
<div class="callout" data-type="warning">
<div class="callout-title">Warning</div>
<p class="callout-description">Urgent information to avoid problems.</p>
</div>
Danger
Risks or negative outcomes of certain actions.
<div class="callout" data-type="danger">
<div class="callout-title">Caution</div>
<p class="callout-description">Risks or negative outcomes of certain actions.</p>
</div>
Callout with icon
Add the data-icon boolean attribute to enable a two-column grid layout with the icon pinned alongside the title.
This callout has an icon for extra visual context.
<div class="callout" data-type="info" data-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:
data-iconswitches the callout to a two-column CSS grid- The is pinned to row 1, column 1 — vertically centered with the title
- and auto-flow into column 2
Recommended icons
| Type | Icon | Shorthand |
|---|---|---|
info |
Info circle | {{icon:info}} |
success |
Lightning bolt | {{icon:bolt}} |
warning |
Warning triangle | {{icon:warning}} |
danger |
Close circle | {{icon:close-circled}} |
All types with icons
Useful information that users should know.
Helpful advice for doing things better.
Urgent information to avoid problems.
Risks or negative outcomes of certain actions.
Usage rules
| Do | Don't |
|---|---|
Use data-type for semantic meaning |
Use colour 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 only when they add clarity |
Customise --status-* tokens per project |
Hardcode colours on individual callouts |
CSS reference
This section documents how the component is built. For usage, see the sections above.
Styling
| Property | Value |
|---|---|
| Padding | var(--space-m) var(--space-l) |
| Margin | var(--space-l) 0 |
| Background | |
| Border | var(--border-s) solid var(--border-faded) |
Icon layout (data-icon)
| Property | Value |
|---|---|
| Display | grid |
| Grid columns | auto 1fr |
| Column gap | |
| Icon size | 1.25rem |
Selectors
| Selector | Purpose |
|---|---|
| Base callout container | |
.callout[data-type="info"] |
Info variant — background |
.callout[data-type="success"] |
Success variant — background |
.callout[data-type="warning"] |
Warning variant — background |
.callout[data-type="danger"] |
Danger variant — background |
.callout[data-icon] |
Enables two-column grid layout for icon + content |
| Bold title row — semi-bold, | |
| Body text — , top margin |