Callout
Default, blue, success, warning and error messages that need to stand apart from body text.
ISQ Rise implementation preview
This raises Sarah’s concern further. Sarah reviews section 10 of the Child Protection Act 1999.
Light background shown; verify against a tinted or dark surface where the component is used that way in course.
Use when / avoid when
Use when
- A short reinforcing message, a state result, or a boundary note within a panel.
Avoid when
- Multiple callouts in succession — choose the one point that deserves emphasis.
Anatomy
- Left rule (colour-coded)
- Message text
Variants
States
Responsive behaviour
Stacks naturally; no restructuring at narrow widths.
Accessibility
- Colour is always paired with the message text itself — never a colour-only cue.
- Use role="status" for callouts injected dynamically after an interaction.
Current implementation
Theme and platform: ISQ · Articulate Rise
Implementation type: css-foundation
The classes below belong to the ISQ implementation namespace. A future theme may implement the same component contract with different tokens and class names.
Dependencies: Production CSS only.
Code
<div class="isq-callout isq-callout--blue">
<p class="isq-body">This raises Sarah’s concern further. Sarah reviews section 10 of the <strong>Child Protection Act 1999</strong>.</p>
</div>Classes used: .isq-callout, .isq-callout--white, .isq-callout--blue, .isq-callout--success, .isq-callout--warning, .isq-callout--error
Governance metadata
| Owner | Design and development steward |
|---|---|
| Status | Core |
| Version introduced | 1.0.0 |
| Last reviewed | 2026-07 |
| Known limitations |
|