Scenario component

Scenario stage

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

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

ISQ Rise implementation preview

Rendered with the governed ISQ 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.

Current implementation

Theme and platform: ISQ · Articulate Rise

Implementation type: custom-html

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

HTML

<div class="isq-panel isq-panel--elevated">
  <div class="isq-scenario-stage__header">
    <span class="isq-eyebrow">Stage 1</span>
    <h2 class="isq-heading isq-heading--h1">Recognise &amp; respond</h2>
  </div>
  <div class="isq-scenario-stage__content">
    <div class="isq-scenario-stage__content-inner">
      <p class="isq-body">It’s Week 6 of Term 2. Mark, a well-respected Year 7 teacher, asks to speak privately with Principal Sarah.</p>
      <blockquote class="isq-scenario-stage__quote">“Mum’s boyfriend gets angry… I don’t feel safe when he’s around.”</blockquote>
    </div>
    <div class="isq-scenario-stage__media">
      <img src="../../assets/icons/placeholder.svg" alt="" role="presentation" loading="lazy">
    </div>
  </div>
</div>

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

ISQ 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.