Interaction component

Harm tabs

Specialised content navigation for categories of harm — lets the learner move between related but distinct categories (physical abuse, psychological/emotional abuse, neglect, sexual abuse or exploitation, grooming) without a full page per category.

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

Course specific. Built for a specialised need and not yet generalised. Do not reuse without review.

ISQ Rise implementation preview

Rendered with the governed ISQ production Rise CSS

Physical abuse

Physical abuse may be indicated by injuries, behavioural changes, fear responses or patterns that are not easily explained.

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

Built specifically for the Child Protection course's five harm categories.

Avoid when

Do not reuse elsewhere without review — assess for generalisation into the shared Tabs component first.

Anatomy

Layout (.isq-harm-tabs__layout)
Nav (.isq-harm-tabs__nav)
Tab (.isq-harm-tabs__tab)
Content (.isq-harm-tabs__content)
Panel (.isq-harm-tabs__panel)

States

Responsive behaviour

Navigation moves above the panel and may become a horizontally scrollable row if labels remain readable.

Accessibility

Real buttons for tab triggers, one visible panel, arrow-key navigation expected.

Current implementation

Theme and platform: ISQ · Articulate Rise

Implementation type: custom-html-js

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: Scoped JavaScript.

Code

HTML

<div class="isq-harm-tabs">
  <div class="isq-harm-tabs__layout">
    <div class="isq-harm-tabs__nav" role="tablist">
      <button class="isq-harm-tabs__tab" role="tab" aria-selected="true">Physical abuse</button>
      <button class="isq-harm-tabs__tab" role="tab" aria-selected="false">Psychological / emotional abuse</button>
    </div>
    <div class="isq-harm-tabs__content">
      <div class="isq-harm-tabs__panel" role="tabpanel">
        <h3 class="isq-heading isq-heading--h3">Physical abuse</h3>
        <p class="isq-body">Physical abuse may be indicated by injuries, behavioural changes, fear responses or patterns that are not easily explained.</p>
      </div>
    </div>
  </div>
</div>

Classes used: .isq-harm-tabs, .isq-harm-tabs__layout, .isq-harm-tabs__nav, .isq-harm-tabs__tab, .isq-harm-tabs__content, .isq-harm-tabs__panel

ISQ production stylesheet reference →

Related items

Related patterns: Comparison

Related components: Tabs Accordion

Governance metadata

Owner	Design and development steward
Status	Course specific
Version introduced	1.0.0
Last reviewed	2026-07
Known limitations	Document 1's own component audit already flags this as an “assess for generalisation” candidate — it is the working reference for what the generic Tabs component should become.