← All layouts  ·  Commerce

shopping_cart Shopping cart

Line items, quantities and an order summary that follows.

The summary is a sticky column, not a block at the bottom: a shopper changing quantities wants to watch the total move.

• .ms-btn
• .ms-input
• .ms-toolbar
• .ms-card
• .ms-thumb
• .ms-alert

Open full page

Live

The layout as it renders, in a frame at its own width. Resize the window to watch it respond — the frame is a real viewport.

How to build it

This is the layout's template, read from disk — the same file the frame above renders, so it cannot drift out of date. Copy it into your own page and replace the content; every class in it ships in mcgowan.css.

<header class="ms-topbar">
    <div class="ms-logo"><a class="u-link" href="#">Northbound</a></div>
    <nav class="ms-topbar__nav">
        <a href="#">New in</a><a href="#">Men</a><a href="#">Women</a><a href="#">Sale</a>
    </nav>
    <div class="ms-toolbar">
        <input class="ms-input ms-input--sm" placeholder="Search" style="max-width:180px">
        <a class="ms-btn ms-btn--ghost ms-btn--icon" href="#"><span class="material-icons">shopping_cart</span></a>
    </div>
</header>

<div class="u-container u-py-6">
    <h1>Your basket</h1>
    <div class="u-grid u-grid-cols-12">

        <div class="u-col-12 u-col-lg-8">
            <div class="ms-card ms-card--horizontal">
                <span class="ms-thumb ms-thumb--square"></span>
                <div>
                    <div class="ms-toolbar">
                        <strong>Fell Jacket</strong>
                        <span class="ms-toolbar__spacer"></span>
                        <strong>&pound;189.00</strong>
                    </div>
                    <p class="ms-stat__meta">Size M &middot; Slate</p>
                    <div class="ms-toolbar">
                        <input class="ms-input ms-input--sm" type="number" value="1" style="max-width:80px">
                        <a class="u-link" href="#">Remove</a>
                        <a class="u-link" href="#">Save for later</a>
                    </div>
                </div>
            </div>

            <div class="ms-card ms-card--horizontal">
                <span class="ms-thumb ms-thumb--square"></span>
                <div>
                    <div class="ms-toolbar">
                        <strong>Ridge Pack 30L</strong>
                        <span class="ms-toolbar__spacer"></span>
                        <strong>&pound;130.00</strong>
                    </div>
                    <p class="ms-stat__meta">One size &middot; Moss</p>
                    <div class="ms-toolbar">
                        <input class="ms-input ms-input--sm" type="number" value="2" style="max-width:80px">
                        <a class="u-link" href="#">Remove</a>
                    </div>
                </div>
            </div>

            <div class="ms-alert ms-alert--info">
                Spend &pound;41.00 more for free next-day delivery.
            </div>
        </div>

        <div class="u-col-12 u-col-lg-4">
            <div class="ms-card" style="position:sticky; top:1rem">
                <h2>Summary</h2>
                <table class="ms-table">
                    <tr><td>Subtotal</td><td class="u-text-right">&pound;449.00</td></tr>
                    <tr><td>Delivery</td><td class="u-text-right">&pound;4.95</td></tr>
                    <tr><td>Discount</td><td class="u-text-right">&minus;&pound;20.00</td></tr>
                    <tr><th>Total</th><th class="u-text-right">&pound;433.95</th></tr>
                </table>
                <div class="ms-input-group">
                    <input class="ms-input" placeholder="Promo code">
                    <button class="ms-btn ms-btn--outline">Apply</button>
                </div>
                <button class="ms-btn ms-btn--primary ms-btn--lg u-w-full u-mt-4">Checkout</button>
            </div>
        </div>
    </div>
</div>

More commerce layouts