Skip to content

← Components

Interaction component

Tabs

Local navigation across a small number of parallel categories.

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

Live preview

Rendered with production Rise CSS

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

  • Categories are genuine peers, not sequential steps.

Avoid when

  • Sequential steps, or labels too long to remain readable on mobile.

Anatomy

  • Tab list
  • Tab buttons
  • Tab panels

States

selectedunselectedfocus

Responsive behaviour

Left-navigation tabs move above the panel on mobile and may become a horizontally scrollable row.

Accessibility

  • Real buttons for tab triggers, arrow-key navigation between tabs, one visible tabpanel at a time.

Implementation

Type: custom-html-js

Dependencies: Requires scoped JavaScript for tab switching (see Harm tabs for the current course-specific implementation).

Code

HTML

Classes used: .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: Harm tabs Accordion

Governance metadata

OwnerDesign and development steward
StatusApproved
Version introduced1.0.0
Last reviewed2026-07
Known limitations
  • The only current implementation of the tabs pattern in the shared CSS is the Harm tabs course-specific variant — a generalised Tabs component has not yet been extracted from it.