Open experiment
Resizable glass split panel
A responsive layout primitive for inspectors, comparisons, and editing workspaces. Its semantic separator reports the current split and supports arrows, Home, and End as well as direct pointer dragging.
Lab tested Responsive Dark mode Interactive
- Version
- 1.0.0
- Updated
- 2026-08-02
- Dependencies
- Zero
<section class="cmp-glass-split" style="--cmp-split: 54" aria-label="Resizable workspace">
<article class="cmp-glass-split__pane cmp-glass-split__pane--a">
<header><span>Draft</span><b>Live</b></header>
<h2>Spatial canvas</h2>
<div class="cmp-glass-split__canvas" aria-hidden="true"><i></i><i></i><i></i></div>
<p>Move the divider to compare layout and inspector space.</p>
</article>
<button
class="cmp-glass-split__divider"
type="button"
role="separator"
aria-label="Resize draft and inspector panes"
aria-orientation="vertical"
aria-valuemin="30"
aria-valuemax="70"
aria-valuenow="54"
aria-valuetext="Draft pane 54 percent"
>
<i aria-hidden="true"></i>
</button>
<aside class="cmp-glass-split__pane cmp-glass-split__pane--b">
<header><span>Inspector</span><b>⌘ I</b></header>
<dl>
<div>
<dt>Width</dt>
<dd>Auto</dd>
</div>
<div>
<dt>Gap</dt>
<dd>24 px</dd>
</div>
<div>
<dt>Radius</dt>
<dd>16 px</dd>
</div>
</dl>
</aside>
</section>
No runtime reactions detected Open in Editor
Validated in the lab
Experiment report
- Schema and source files passed
- Responsive test passed
- Keyboard test passed
- No console errors
Component ingredients
- Dependencies
- None
- Browser support
- Current Chrome, Current Edge, Current Firefox, Current Safari
- Version
- 1.0.0
- Last tested
- 2026-08-02
Accessibility notes
- The divider uses a labelled separator role with synchronized value attributes.
- Arrow keys, Home, and End provide complete keyboard resizing.
- Both panes retain readable minimum widths at the allowed bounds.
License: MIT License for open-source use, modification, and distribution.