Skip to content

← Components

Content component

Process block

Shows a genuinely ordered procedure.

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

Live preview

Rendered with production Rise CSS
  1. Notice Recognise a possible indicator of harm.
  2. 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

default

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.

Implementation

Type: custom-html

Dependencies: Production CSS only.

Code

HTML 
    
  
  1. Notice Recognise a possible indicator of harm.
    2. 
  
  2. Record Document what was observed or disclosed.
    3.

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

Production stylesheet reference →

Related items

Related patterns: Process

Related components: —

Governance metadata

OwnerDesign and development steward
StatusApproved
Version introduced1.0.0
Last reviewed2026-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.