Right panels
Right panels surface contextual detail without navigating away from the current page. They come in three widths — Standard Drawer (700px), Condensed Drawer (480px), and On-Page Supplemental (480px) — and can be combined for layered detail flows.
Panel types
| Type | Width | When to use |
|---|---|---|
| Standard Drawer | 700px | Primary detail views — claim detail, policy detail, add coverage workflow. Slides in from right, dims the main content. |
| Condensed Drawer | 480px | Secondary or stepped detail within a 700px drawer. Stacks on top of Standard Drawer. |
| On-Page Supplemental | 480px | Always-visible right panel anchored beside the main content area, not overlaying it. Used for persistent context panes. |
Standard drawer — 700px
The primary drawer slides in from the right edge of the viewport and overlays the main content. A dimmed backdrop prevents interaction with the page beneath. Keyboard focus is trapped inside until the panel is dismissed.
Condensed drawer — 480px
When a flow inside a Standard Drawer requires a secondary step (e.g., selecting a contact from within a claim detail panel), a 480px Condensed Drawer slides in, stacking on top of the 700px parent. The parent dims but remains visible.
On-page supplemental panel
Unlike a drawer, the On-Page Supplemental panel does not overlay content. It anchors to the right side of the content area, reducing the main layout's width. Use for persistent context that should always be visible — e.g., a policy header, related contacts, or a document preview.
Drawer combination
In complex workflows, a 700px Standard Drawer and a 480px Condensed Drawer can be stacked simultaneously — for example, viewing claim detail in the 700px panel and adding a note in the 480px panel. Dismiss the 480px panel first (back/close), then the 700px panel.
Never stack more than two panels simultaneously. A third layer means the workflow should instead be a full-page navigation or a modal.
Universal panel components
| Zone | CSS class | Contents |
|---|---|---|
| Header | .ws-panel-header | Title (h2), optional subtitle, close button (×). 16px 24px padding. |
| Tab bar | .ws-tabs (optional) | Placed directly below header when tabbed content is needed. |
| Body | .ws-panel-body | Scrollable content area. 24px padding. Houses modules, forms, lists. |
| Footer | .ws-panel-footer | Sticky to bottom. Contains primary + secondary actions. Right-aligned. |
Usage guidance
- Trap keyboard focus inside the drawer when it is open.
- Return focus to the trigger element when the panel is dismissed.
- Use the 700px drawer for primary workflows; 480px for secondary/confirmatory steps.
- Allow Escape key to close the top-most panel.
- Don't stack more than 2 panels.
- Don't open a drawer from within another drawer of the same width.
- Don't use a drawer when a full-page view would serve better.
- Don't put destructive actions in the footer without a confirmation step.