Structural component

Section opener

Introduces a major course section with strong orientation.

approved 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

Stage 1

Recognise & respond

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

Once per genuine major section reset.

Avoid when

Every subtopic or minor heading change.

Anatomy

Eyebrow
Heading
Optional intro paragraph

States

Responsive behaviour

Type scale reduces fluidly; no text clipping or manual line breaks.

Accessibility

Correct heading level for a genuine structural transition (usually h2).

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

<section class="isq-block isq-block--standard">
  <span class="isq-eyebrow">Stage 1</span>
  <h2 class="isq-heading isq-heading--h1">Recognise &amp; respond</h2>
</section>

Classes used: .isq-block, .isq-heading, .isq-eyebrow, .isq-body--intro

ISQ production stylesheet reference →

Related items

Related patterns: Section opener

Related components: Dark / footer band

Governance metadata

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