Open experiment
Focused pricing trio
A readable pricing group that highlights one recommended plan without making the remaining options hard to scan or compare.
Lab tested Responsive Dark mode
- Version
- 1.0.0
- Updated
- 2026-08-02
- Dependencies
- Zero
<section class="cmp-pricing" aria-labelledby="cmp-pricing-title">
<header>
<p>Simple monthly pricing</p>
<h2 id="cmp-pricing-title">Choose the room you need to grow.</h2>
</header>
<div class="cmp-pricing__grid">
<article>
<h3>Starter</h3>
<p><strong>$0</strong> / month</p>
<ul>
<li>2 projects</li>
<li>Core components</li>
<li>Community support</li>
</ul>
<a href="#starter">Start free</a>
</article>
<article class="cmp-pricing__featured">
<span>Most useful</span>
<h3>Studio</h3>
<p><strong>$24</strong> / month</p>
<ul>
<li>Unlimited projects</li>
<li>All components</li>
<li>Team collections</li>
</ul>
<a href="#studio">Choose Studio</a>
</article>
<article>
<h3>Agency</h3>
<p><strong>$68</strong> / month</p>
<ul>
<li>Client workspaces</li>
<li>Shared templates</li>
<li>Priority support</li>
</ul>
<a href="#agency">Choose Agency</a>
</article>
</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
- Recommended status is written in text.
- Plan features use semantic lists.
- Prices include billing period.
License: MIT License for open-source use, modification, and distribution.