Open experiment
Receipt price breakdown
A compact order-summary disclosure whose stable total remains visible while itemized charges expand underneath. Semantic terms and amounts make the relationship between savings and final price easy to scan and announce.
Lab tested Responsive Dark mode Interactive
- Version
- 1.0.0
- Updated
- 2026-08-02
- Dependencies
- Zero
<article class="cmp-price-receipt">
<header><span>Page Kit Supply</span><b>Receipt preview</b></header>
<div class="cmp-price-receipt__items"><span>3 studio objects</span><span>Order #2084</span></div>
<button type="button" aria-expanded="false" aria-controls="cmp-price-receipt-lines">
<span>Show price breakdown</span><b aria-hidden="true">+</b>
</button>
<dl id="cmp-price-receipt-lines" hidden>
<div>
<dt>Subtotal</dt>
<dd>$184.00</dd>
</div>
<div data-saving>
<dt>Studio discount</dt>
<dd>−$24.00</dd>
</div>
<div>
<dt>Express delivery</dt>
<dd>$8.00</dd>
</div>
<div>
<dt>Estimated tax</dt>
<dd>$12.40</dd>
</div>
</dl>
<footer>
<span>Total <small>USD</small></span
><strong>$180.40</strong>
</footer>
<p>You saved <b>$24.00</b> on this order.</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
- A description list associates every charge label with its amount.
- The itemized section uses a native button and synchronized expanded state.
- The discount is explicit signed text rather than color alone.
License: MIT License for open-source use, modification, and distribution.