Scenario component
Role split
Clarifies two related audiences, responsibilities or positions by holding them side by side.
Live preview
Able
Has the capacity to protect the child.
Willing
Shows intent and motivation to protect the child.
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
- Comparing two roles or responses where the differences matter to the decision.
Avoid when
- More than two items — use a card grid or table.
Anatomy
- Group container (.isq-role-split__group)
- Two content blocks (.isq-role-split__content)
- Optional shared media (.isq-role-split__media)
States
Responsive behaviour
Restacks to one column; both items remain in the same reading order as desktop.
Accessibility
- Each side is a labelled region so a screen-reader user can tell which role they are reading.
Implementation
Type: custom-html
Dependencies: Production CSS only.
Code
HTML
Able
Has the capacity to protect the child.
Willing
Shows intent and motivation to protect the child.
Classes used: .isq-role-split, .isq-role-split__content, .isq-role-split__content-inner, .isq-role-split__group, .isq-role-split__inner, .isq-role-split__media, .isq-role-split__text, .isq-role-split__title
Governance metadata
| Owner | Design and development steward |
|---|---|
| Status | Approved |
| Version introduced | 1.0.0 |
| Last reviewed | 2026-07 |
| Known limitations |
|