Open experiment
Split launch hero
A two-column launch section with semantic actions, an evidence row, and a CSS-only product illustration that remains useful without images.
Lab tested Responsive Dark mode
- Version
- 1.0.0
- Updated
- 2026-08-02
- Dependencies
- Zero
<section class="cmp-split-hero">
<div class="cmp-split-hero__copy">
<p class="cmp-split-hero__eyebrow">Ship the clear version</p>
<h1>Your product story, ready for launch.</h1>
<p class="cmp-split-hero__lede">
Turn scattered feedback into a focused release plan your whole team can follow.
</p>
<div class="cmp-split-hero__actions">
<a href="#start">Start free</a><a href="#tour">See the 2-minute tour</a>
</div>
<ul aria-label="Product assurances">
<li>No credit card</li>
<li>Export anytime</li>
<li>Built for teams</li>
</ul>
</div>
<div class="cmp-split-hero__visual" aria-hidden="true">
<div class="cmp-split-hero__window">
<span></span><span></span><span></span>
<div class="cmp-split-hero__metric">87%<small>release clarity</small></div>
<div class="cmp-split-hero__bars"><i></i><i></i><i></i><i></i></div>
</div>
</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
- Maintains one primary heading.
- Decorative preview is hidden from assistive technology.
- Actions use descriptive labels.
License: MIT License for open-source use, modification, and distribution.