Order Cost Breakdown
An order summary expands to show item prices, shipping and tax when requested.
An order summary expands to show item prices, shipping and tax when requested.
Live Demo
Hover over the element or use Tab to focus.
Source Code
Copy the HTML, CSS or JavaScript you need for your project.
HTML
<details class="tbx-1071"><summary><span><b>Order total</b><small>Example including tax and shipping</small></span><strong>¥4,980 <i aria-hidden="true">⌄</i></strong></summary>
<div class="tbx-1071__rows"><div><span>Item subtotal</span><b>¥4,000</b></div><div><span>Shipping</span><b>¥580</b></div><div><span>Sales tax (example)</span><b>¥400</b></div><p>Amounts are sample data.</p></div></details>
CSS
.tbx-1071{width:min(293px,100%);background:#fff;border:1px solid #dce5e6;border-radius:10px;font:11px/1.4 system-ui,sans-serif;color:#2a4b5d;overflow:hidden;transition:border-color .24s,box-shadow .24s}.tbx-1071 summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:9px;padding:17px 15px;cursor:pointer;border-left:4px solid #9fcac5;transition:border-color .25s,background .25s}.tbx-1071 summary::-webkit-details-marker{display:none}.tbx-1071 summary span{display:grid;gap:6px}.tbx-1071 summary span b{font-size:11px}.tbx-1071 summary small{font-size:9px;color:#8aa0a8}.tbx-1071 summary strong{font-size:16px;white-space:nowrap}.tbx-1071 summary strong i{font-size:14px;font-style:normal;color:#779ba2;display:inline-block;transition:transform .22s}.tbx-1071[open] summary i{transform:rotate(180deg)}.tbx-1071:is(:hover,:focus-within){border-color:#7cb6b0;box-shadow:0 9px 23px #27556a16}.tbx-1071 summary:is(:hover,:focus-visible){border-left-color:#378e86;background:#edf7f4}.tbx-1071 summary:focus-visible{outline:3px solid #d8a877;outline-offset:-4px}.tbx-1071__rows{padding:12px 15px;border-top:1px solid #e1ebed;background:#f7faf9;display:grid;gap:9px}.tbx-1071__rows div{display:flex;justify-content:space-between;gap:15px;color:#647c88;font-size:10px}.tbx-1071__rows div b{color:#325568}.tbx-1071__rows p{font-size:9px;color:#94a5ab;margin:5px 0 0}
@media(prefers-reduced-motion:reduce){.tbx-1071,.tbx-1071 summary,.tbx-1071 summary strong i{transition:none}}
How to Use
Insert the HTML and add the CSS to your stylesheet. Adjust colors and sizes and avoid class conflicts.
Use Case
Useful for ec sections and checkout sections.
Technical Notes
Keep controls usable on touch devices. Test keyboard focus and reduced-motion preferences.
Mobile: Ensure the interactive content remains accessible without hover on touch devices.
Browser: Uses modern CSS. Check behavior in the browsers you support.
Reduced Motion: Check that prefers-reduced-motion is respected.