Structural component
Panel
The shared bordered, rounded content container that nearly every other component is built from.
Live 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).
Implementation
Type: css-foundation
Dependencies: Production CSS only — no JavaScript.
Code
HTML
Panel content.
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. |