Structural component

Divider

Transitions between adjoining structural surfaces with an angled decorative edge.

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

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

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

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.

Implementation

Type: css-foundation

Dependencies: Production CSS only.

Code

HTML

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

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.