Interaction component

Tabs

Local navigation across a small number of parallel categories.

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

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

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.

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: Requires scoped JavaScript for tab switching (see Harm tabs for the current course-specific implementation).

Code

HTML

<!-- See Harm tabs for the current working implementation of this pattern -->

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

Governance metadata

Owner	Design and development steward
Status	Approved
Version introduced	1.0.0
Last reviewed	2026-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.