← All layouts  ·  Commerce

sell Product detail

Gallery, buy box, specification table and reviews.

Two columns: imagery left, the buy box right and sticky on desktop, because the price and the button are what the page exists for. Everything else sits below the fold in full width.

• .ms-thumb
• .ms-btn
• .ms-card
• .ms-breadcrumb-item
• .ms-input
• .ms-badge

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">
    <nav class="ms-breadcrumb">
        <span class="ms-breadcrumb-item"><a class="ms-breadcrumb-link" href="#">Home</a></span>
        <span class="ms-breadcrumb-item"><a class="ms-breadcrumb-link" href="#">Outerwear</a></span>
        <span class="ms-breadcrumb-item">Fell Jacket</span>
    </nav>

    <div class="u-grid u-grid-cols-12">
        <div class="u-col-12 u-col-lg-7">
            <span class="ms-thumb"></span>
            <div class="u-grid u-grid-cols-12 u-mt-2">
                <div class="u-col-3"><span class="ms-thumb ms-thumb--square"></span></div>
                <div class="u-col-3"><span class="ms-thumb ms-thumb--square"></span></div>
                <div class="u-col-3"><span class="ms-thumb ms-thumb--square"></span></div>
                <div class="u-col-3"><span class="ms-thumb ms-thumb--square"></span></div>
            </div>
        </div>

        <div class="u-col-12 u-col-lg-5">
            <div class="ms-card" style="position:sticky; top:1rem">
                <span class="ms-badge ms-badge--success">In stock</span>
                <h1>Fell Jacket</h1>
                <p class="ms-stat__value">&pound;189.00</p>
                <p>A three-layer shell that has been through two winters of testing in the
                    Cairngorms and come back asking for a third.</p>
                <div class="ms-field">
                    <label class="ms-label" for="size">Size</label>
                    <select class="ms-select" id="size">
                        <option>Small</option><option>Medium</option><option>Large</option>
                    </select>
                </div>
                <div class="ms-field">
                    <label class="ms-label" for="qty">Quantity</label>
                    <input class="ms-input" id="qty" type="number" value="1" min="1">
                </div>
                <button class="ms-btn ms-btn--primary ms-btn--lg u-w-full">Add to basket</button>
                <p class="ms-form-help">Free delivery over &pound;75. Returns within 60 days.</p>
            </div>
        </div>

        <div class="u-col-12 u-col-lg-7">
            <div class="ms-card">
                <h2>Specification</h2>
                <table class="ms-table">
                    <tr><th>Weight</th><td>480g (size M)</td></tr>
                    <tr><th>Fabric</th><td>3-layer recycled polyester, 20k/20k</td></tr>
                    <tr><th>Seams</th><td>Fully taped</td></tr>
                    <tr><th>Pockets</th><td>Two hand, one chest, one internal</td></tr>
                </table>
            </div>
        </div>

        <div class="u-col-12 u-col-lg-5">
            <div class="ms-card">
                <h2>Reviews</h2>
                <p><strong>4.6</strong> out of 5 &middot; 128 reviews</p>
                <div class="ms-card ms-card--flat">
                    <strong>Wore it for a week in Torridon</strong>
                    <p>Kept the weather out and did not sound like a crisp packet.</p>
                    <p class="ms-stat__meta">Ellie R. &middot; verified purchase</p>
                </div>
            </div>
        </div>
    </div>
</div>

More commerce layouts