Open experiment
Actionable empty state
A flexible, compact empty-state panel with an original CSS illustration, a primary corrective action, and a secondary path to documentation.
Lab tested Responsive Dark mode
- Version
- 1.0.0
- Updated
- 2026-08-02
- Dependencies
- Zero
<section class="cmp-empty-state" aria-labelledby="cmp-empty-title">
<div class="cmp-empty-state__flask" aria-hidden="true"><i></i><span></span></div>
<p>Experiment shelf</p>
<h2 id="cmp-empty-title">Nothing saved here yet.</h2>
<p>Save useful components while you browse, or start a page and add sections as you go.</p>
<div><a href="#browse">Browse components</a><a href="#guide">Read the quick-start guide</a></div>
</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
- Illustration is decorative.
- Message states both the condition and recovery path.
- Primary action is visually and semantically clear.
License: MIT License for open-source use, modification, and distribution.