Skip to content
STYLESCAPE

Order Summary

Examples for the ss-c-order-summary module, used beside the cart, in checkout and on the order confirmation. Amounts are a <dl>; each row is a div holding a dt/dd pair.

Summary

HTML 
<aside class="ss-c-order-summary" aria-labelledby="summary-title" style="max-width: 24rem">
            <h3 class="ss-c-order-summary__title" id="summary-title">Order summary</h3>
            <ul class="ss-c-order-summary__items">
                <li class="ss-c-order-summary__item"><span>Canvas tote bag <span class="ss-c-order-summary__quantity">× 2</span></span><span>€ 25,00</span></li>
                <li class="ss-c-order-summary__item"><span>Harbour map print <span class="ss-c-order-summary__quantity">× 1</span></span><span>€ 32,00</span></li>
            </ul>
            <dl class="ss-c-order-summary__rows">
                <div class="ss-c-order-summary__row"><dt>Subtotal</dt><dd>€ 57,00</dd></div>
                <div class="ss-c-order-summary__row ss-c-order-summary__row--discount"><dt>Discount (HARBOUR10)</dt><dd>− € 5,70</dd></div>
                <div class="ss-c-order-summary__row"><dt>Shipping</dt><dd>€ 4,95</dd></div>
                <div class="ss-c-order-summary__row"><dt>VAT (21%)</dt><dd>€ 9,63</dd></div>
                <div class="ss-c-order-summary__row ss-c-order-summary__row--total"><dt>Total</dt><dd>€ 56,25</dd></div>
            </dl>
            <p class="ss-c-order-summary__note">Prices include VAT. Free returns within 30 days.</p>
        </aside>