Skip to content

← Components

Support component

Callout

Default, blue, success, warning and error messages that need to stand apart from body text.

core Version introduced: 1.0.0 Platforms: Rise Owner: Design and development steward

Live preview

Rendered with production Rise CSS

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

isq-callout--whiteisq-callout--blueisq-callout--successisq-callout--warningisq-callout--error

States

default

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.

Implementation

Type: css-foundation

Dependencies: Production CSS only.

Code

HTML 

  
This raises Sarah’s concern further. Sarah reviews section 10 of the Child Protection Act 1999.

Classes used: .isq-callout, .isq-callout--white, .isq-callout--blue, .isq-callout--success, .isq-callout--warning, .isq-callout--error

Production stylesheet reference →

Related items

Related patterns: Key message Feedback

Related components: Key message Decision point

Governance metadata

OwnerDesign and development steward
StatusCore
Version introduced1.0.0
Last reviewed2026-07
Known limitations
  • --isq-warning uses the same value as body charcoal rather than a distinct hue — confirm this is intentional (see Decisions).