Structural component

Divider

Transitions between adjoining structural surfaces with an angled decorative edge.

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

Experimental. Being evaluated — specifications may change. Use only in an agreed pilot.

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

Rare and purposeful surface transitions only.

Avoid when

As a routine section separator — spacing and headings do that job more accessibly.

Anatomy

Angled edge (.isq-divider-angle)
Direction/colour modifier

Variants

isq-divider-angle--blue-to-tintisq-divider-angle--blue-to-whiteisq-divider-angle--tint-to-blueisq-divider-angle--tint-to-whiteisq-divider-angle--white-to-blueisq-divider-angle--white-to-tint

States

Responsive behaviour

Purely decorative — no content to preserve, but the angle should not obscure adjacent text at narrow widths.

Accessibility

Purely decorative — must be aria-hidden.

Current implementation

Theme and platform: ISQ · Articulate Rise

Implementation type: css-foundation

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: Production CSS only.

Code

HTML

<div class="isq-divider-angle isq-divider-angle--blue-to-tint" aria-hidden="true"></div>

Classes used: .isq-divider-angle, .isq-divider-angle--blue-to-tint, .isq-divider-angle--blue-to-white, .isq-divider-angle--tint-to-blue, .isq-divider-angle--tint-to-white, .isq-divider-angle--white-to-blue, .isq-divider-angle--white-to-tint

ISQ production stylesheet reference →

Related items

Related patterns: —

Related components: —

Governance metadata

Owner	Design and development steward
Status	Experimental
Version introduced	1.0.0
Last reviewed	2026-07
Known limitations	Document 1's own component audit calls this “Experimental / decorative — review actual use and reduce if necessary”; Document 2 separately labelled it “Restricted”, a status outside the confirmed seven-value lifecycle — folded into Experimental here. Six directional variants for a component flagged for reduction is itself worth reviewing.