Open experiment
Editorial product card
An expressive store card that keeps product information, variant selection, price, and purchase action within one coherent keyboard path.
Lab tested Responsive Dark mode Interactive
- Version
- 1.0.0
- Updated
- 2026-08-02
- Dependencies
- Zero
<article class="cmp-product-card">
<div class="cmp-product-card__visual" aria-label="Golden yellow travel lamp">
<div aria-hidden="true" class="cmp-product-card__lamp"><i></i></div>
<span>New batch</span>
</div>
<div class="cmp-product-card__body">
<p>Field notes / No. 08</p>
<div class="cmp-product-card__title">
<h2>Fold travel lamp</h2>
<strong>$84</strong>
</div>
<p>Warm, dimmable light that packs flat and runs for 18 hours.</p>
<fieldset>
<legend>Finish</legend>
<button type="button" aria-pressed="true">Sun</button
><button type="button" aria-pressed="false">Moss</button
><button type="button" aria-pressed="false">Ink</button>
</fieldset>
<button class="cmp-product-card__buy" type="button">Add to cart</button>
<p class="cmp-product-card__status" role="status" aria-live="polite"></p>
</div>
</article>
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
- Color choices include text labels.
- Selected variant uses aria-pressed.
- Price is adjacent to product title.
License: MIT License for open-source use, modification, and distribution.