Panel
The shared bordered, rounded content container that nearly every other component is built from.
ISQ Rise implementation preview
Panel content.
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
- Grouping related content that needs a visible boundary from the surrounding page.
Avoid when
- A lighter separation (spacing alone, a rule) would do — not every group of content needs a panel.
Anatomy
- Container (.isq-panel)
- Surface modifier (pale / tint / ice / dark / blue)
- Elevation modifier (elevated / strong / soft)
- Content wrapper (.isq-content — see Foundations > Widths for the density modifiers it accepts)
Variants
States
Responsive behaviour
Panel padding reduces at narrow widths via the .isq-content density modifiers it wraps; no structural change.
Accessibility
- No semantic meaning of its own — the content inside carries structure (headings, lists).
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 — no JavaScript.
Code
<div class="isq-panel isq-panel--elevated">
<div class="isq-content">
<p class="isq-body">Panel content.</p>
</div>
</div>Classes used: .isq-panel, .isq-panel--elevated, .isq-panel--strong, .isq-panel--pale, .isq-panel--tint, .isq-panel--ice, .isq-panel--dark, .isq-panel--blue, .isq-panel--square, .isq-panel--soft
Governance metadata
| Owner | Design and development steward |
|---|---|
| Status | Foundation |
| Version introduced | 1.0.0 |
| Last reviewed | 2026-07 |
| Known limitations | None recorded. |