Scenario component

Scenario stage

Presents context, evidence or an update within a running scenario, from the decision-maker's perspective.

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

Live preview

Rendered with production Rise CSS

It’s Week 6 of Term 2. Mark, a well-respected Year 7 teacher, asks to speak privately with Principal Sarah.

“Mum’s boyfriend gets angry… I don’t feel safe when he’s around.”

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 discrete stage of a scenario — orient, notice, decide, explain or continue.

Avoid when

General explanation unrelated to the running scenario.

Anatomy

Header (eyebrow + stage title)
Body / narrative
Quote (optional, .isq-scenario-stage__quote)
Media

States

Responsive behaviour

Narrative and image restack; the quote remains adjacent to its narrative context.

Accessibility

Quoted dialogue uses
or clearly marked quotation, not styling alone.

Implementation

Type: custom-html

Dependencies: Production CSS only.

Code

HTML


  
    Stage 1
    Recognise & respond
  
  
    
      It’s Week 6 of Term 2. Mark, a well-respected Year 7 teacher, asks to speak privately with Principal Sarah.
      “Mum’s boyfriend gets angry… I don’t feel safe when he’s around.”

Classes used: .isq-scenario-stage__header, .isq-scenario-stage__body, .isq-scenario-stage__content, .isq-scenario-stage__content-inner, .isq-scenario-stage__quote, .isq-scenario-stage__media

Production stylesheet reference →

Related items

Related patterns: Scenario stage

Related components: Split card Decision point

Governance metadata

Owner	Design and development steward
Status	Core
Version introduced	1.0.0
Last reviewed	2026-07
Known limitations	None recorded.