Role split
Clarifies two related audiences, responsibilities or positions by holding them side by side.
ISQ Rise implementation 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.
Current implementation
Theme and platform: ISQ · Articulate Rise
Implementation type: custom-html
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
<div class="isq-role-split">
<div class="isq-role-split__group">
<div class="isq-role-split__content">
<h3 class="isq-role-split__title">Able</h3>
<p class="isq-role-split__text">Has the capacity to protect the child.</p>
</div>
<div class="isq-role-split__content">
<h3 class="isq-role-split__title">Willing</h3>
<p class="isq-role-split__text">Shows intent and motivation to protect the child.</p>
</div>
</div>
</div>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 |
|