Content component

Process block

Shows a genuinely ordered procedure.

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

Notice Recognise a possible indicator of harm.
Record Document what was observed or disclosed.

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

Order is real and matters to the outcome.

Avoid when

The steps aren't truly sequential — numbering implies an order that doesn't exist.

Anatomy

Step number (.isq-step)
Step title (.isq-step__title)
Step body

States

Responsive behaviour

Stacks vertically; step numbers remain aligned with their titles.

Accessibility

Marked up as an ordered list where the sequence is meaningful to assistive technology, not only visually numbered.

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

<ol class="isq-process">
  <li class="isq-step"><span class="isq-step__title">Notice</span> Recognise a possible indicator of harm.</li>
  <li class="isq-step"><span class="isq-step__title">Record</span> Document what was observed or disclosed.</li>
</ol>

Classes used: .isq-process, .isq-step, .isq-step__title

ISQ production stylesheet reference →

Related items

Related patterns: Process

Related components: —

Governance metadata

Owner	Design and development steward
Status	Approved
Version introduced	1.0.0
Last reviewed	2026-07
Known limitations	"Process" is named as a component in Document 2's prose catalogue but was missing from its technical class index — corrected here.