← All layouts  ·  Commerce

credit_card Checkout

Stepped checkout with address, delivery and payment.

One column, numbered steps, and the order summary always visible. Nothing is hidden behind an accordion, because a checkout that surprises somebody at step three loses them.

• .ms-card
• .ms-stat
• .ms-thumb
• .ms-toolbar
• .ms-btn
• .ms-field

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>
    <span class="ms-badge ms-badge--success"><span class="material-icons">lock</span> Secure checkout</span>
</header>

<div class="u-container u-py-6">
    <div class="ms-progress u-mb-6"><div class="ms-progress__bar" style="width:66%"></div></div>

    <div class="u-grid u-grid-cols-12">
        <div class="u-col-12 u-col-lg-7">
            <div class="ms-card ms-card--accent-success">
                <div class="ms-toolbar">
                    <strong>1. Contact</strong>
                    <span class="ms-toolbar__spacer"></span>
                    <a class="u-link" href="#">Edit</a>
                </div>
                <p class="ms-stat__meta">ellie@example.com</p>
            </div>

            <div class="ms-card ms-card--accent-success">
                <div class="ms-toolbar">
                    <strong>2. Delivery</strong>
                    <span class="ms-toolbar__spacer"></span>
                    <a class="u-link" href="#">Edit</a>
                </div>
                <p class="ms-stat__meta">14 Bridge Street, Kendal, LA9 &middot; Next day</p>
            </div>

            <div class="ms-card ms-card--accent">
                <strong>3. Payment</strong>
                <form class="ms-form u-mt-4">
                    <div class="ms-field">
                        <label class="ms-label" for="card">Card number</label>
                        <input class="ms-input" id="card" inputmode="numeric" placeholder="0000 0000 0000 0000">
                    </div>
                    <div class="ms-form-row">
                        <div class="ms-field">
                            <label class="ms-label" for="exp">Expiry</label>
                            <input class="ms-input" id="exp" placeholder="MM/YY">
                        </div>
                        <div class="ms-field">
                            <label class="ms-label" for="cvc">Security code</label>
                            <input class="ms-input" id="cvc" placeholder="123">
                        </div>
                    </div>
                    <label class="ms-checkbox"><input checked type="checkbox"> Billing address is the same</label>
                    <button class="ms-btn ms-btn--primary ms-btn--lg u-w-full u-mt-4">Pay &pound;433.95</button>
                </form>
            </div>
        </div>

        <div class="u-col-12 u-col-lg-5">
            <div class="ms-card" style="position:sticky; top:1rem">
                <h2>Your order</h2>
                <div class="ms-card ms-card--horizontal ms-card--flat">
                    <span class="ms-thumb ms-thumb--square"></span>
                    <div><strong>Fell Jacket</strong><p class="ms-stat__meta">Size M &times;1</p></div>
                </div>
                <div class="ms-card ms-card--horizontal ms-card--flat">
                    <span class="ms-thumb ms-thumb--square"></span>
                    <div><strong>Ridge Pack 30L</strong><p class="ms-stat__meta">Moss &times;2</p></div>
                </div>
                <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>
        </div>
    </div>
</div>

More commerce layouts