Open experiment
Product spotlight card
A conversion-focused product card that creates its showcase object entirely with CSS. Native variant buttons update the staged color and selected state, while the purchase action reports a clear result.
Lab tested Responsive Dark mode Interactive
- Version
- 1.0.0
- Updated
- 2026-08-02
- Dependencies
- Zero
<article class="cmp-product-spotlight">
<div class="cmp-product-spotlight__stage" aria-hidden="true"><i></i><b></b><span></span></div>
<div class="cmp-product-spotlight__copy">
<p>Limited studio series</p>
<h2>Orbit Speaker Mini</h2>
<span class="cmp-product-spotlight__finish">Acid lime finish</span>
</div>
<div class="cmp-product-spotlight__controls">
<div role="group" aria-label="Choose product finish">
<button
type="button"
data-color="#c9ff4a"
data-name="Acid lime"
aria-label="Acid lime finish"
aria-pressed="true"
></button>
<button
type="button"
data-color="#ff6fcf"
data-name="Plasma pink"
aria-label="Plasma pink finish"
aria-pressed="false"
></button>
<button
type="button"
data-color="#65c9ff"
data-name="Pool blue"
aria-label="Pool blue finish"
aria-pressed="false"
></button>
</div>
<strong>$149</strong>
</div>
<button class="cmp-product-spotlight__buy" type="button">
<span>Add to bag</span><b aria-hidden="true">→</b>
</button>
<p class="cmp-product-spotlight__status" aria-live="polite"></p>
</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
- Variant choices are native pressed buttons with descriptive names.
- Product name, selected finish, price, and action result are real text.
- The CSS product sculpture and lighting are decorative.
License: MIT License for open-source use, modification, and distribution.