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

Live preview

Rendered with 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.

Implementation

Type: custom-html-js

Dependencies: Scoped JavaScript.

Code

HTML


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

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

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.