← All layouts  ·  Commerce

grid_view Category grid

Faceted catalogue: filter rail, sort bar, product grid.

Filters in a left rail rather than a modal, so the shopper can see what they have narrowed and undo it. The count of results sits beside the sort control where it answers the question the filters just raised.

• .ms-card
• .ms-btn
• .ms-thumb
• .ms-chip
• .ms-checkbox
• .ms-label

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">
    <div class="u-grid u-grid-cols-12">

        <aside class="u-col-12 u-col-lg-3">
            <div class="ms-card">
                <h2>Filter</h2>
                <fieldset style="border:0;padding:0;margin:0 0 1rem">
                    <legend class="ms-label">Size</legend>
                    <div class="ms-chip-set">
                        <button class="ms-chip" type="button">XS</button>
                        <button class="ms-chip ms-chip--active" type="button">S</button>
                        <button class="ms-chip" type="button">M</button>
                        <button class="ms-chip" type="button">L</button>
                    </div>
                </fieldset>
                <fieldset style="border:0;padding:0;margin:0 0 1rem">
                    <legend class="ms-label">Price</legend>
                    <label class="ms-checkbox"><input type="checkbox"> Under &pound;100</label><br>
                    <label class="ms-checkbox"><input checked type="checkbox"> &pound;100 to &pound;200</label><br>
                    <label class="ms-checkbox"><input type="checkbox"> Over &pound;200</label>
                </fieldset>
                <fieldset style="border:0;padding:0">
                    <legend class="ms-label">Availability</legend>
                    <label class="ms-toggle">
                        <input checked type="checkbox">
                        <span class="ms-toggle__track"><span class="ms-toggle__thumb"></span></span>
                        In stock only
                    </label>
                </fieldset>
            </div>
        </aside>

        <div class="u-col-12 u-col-lg-9">
            <div class="ms-toolbar">
                <h1 style="margin:0">Outerwear</h1>
                <span class="ms-badge">28 results</span>
                <span class="ms-toolbar__spacer"></span>
                <select class="ms-select" style="max-width:200px">
                    <option>Sort: Most popular</option>
                    <option>Price: low to high</option>
                    <option>Newest</option>
                </select>
            </div>

            <div class="ms-chip-set u-mb-4">
                <button class="ms-chip ms-chip--active" type="button">Size: S &times;</button>
                <button class="ms-chip ms-chip--active" type="button">&pound;100&ndash;200 &times;</button>
                <a class="u-link" href="#">Clear all</a>
            </div>

            <div class="u-grid u-grid-cols-12">
                <div class="u-col-6 u-col-md-4"><div class="ms-card ms-card--media ms-card--fill">
                    <span class="ms-thumb ms-card__media ms-thumb--portrait"></span>
                    <div class="ms-card__body"><p><strong>Fell Jacket</strong><br>&pound;189.00</p></div></div></div>
                <div class="u-col-6 u-col-md-4"><div class="ms-card ms-card--media ms-card--fill">
                    <span class="ms-thumb ms-card__media ms-thumb--portrait"></span>
                    <div class="ms-card__body"><p><strong>Tarn Overshirt</strong><br>&pound;95.00</p></div></div></div>
                <div class="u-col-6 u-col-md-4"><div class="ms-card ms-card--media ms-card--fill">
                    <span class="ms-thumb ms-card__media ms-thumb--portrait"></span>
                    <div class="ms-card__body"><p><strong>Moor Anorak</strong><br>&pound;145.00</p></div></div></div>
                <div class="u-col-6 u-col-md-4"><div class="ms-card ms-card--media ms-card--fill">
                    <span class="ms-thumb ms-card__media ms-thumb--portrait"></span>
                    <div class="ms-card__body"><p><strong>Crag Gilet</strong><br>&pound;110.00</p></div></div></div>
                <div class="u-col-6 u-col-md-4"><div class="ms-card ms-card--media ms-card--fill">
                    <span class="ms-thumb ms-card__media ms-thumb--portrait"></span>
                    <div class="ms-card__body"><p><strong>Beck Smock</strong><br>&pound;120.00</p></div></div></div>
                <div class="u-col-6 u-col-md-4"><div class="ms-card ms-card--media ms-card--fill">
                    <span class="ms-thumb ms-card__media ms-thumb--portrait"></span>
                    <div class="ms-card__body"><p><strong>Dale Parka</strong><br>&pound;199.00</p></div></div></div>
            </div>

            <nav class="ms-pagination u-mt-6">
                <a class="ms-btn ms-btn--sm ms-btn--outline" href="#">Previous</a>
                <a class="ms-btn ms-btn--sm ms-btn--primary" href="#">1</a>
                <a class="ms-btn ms-btn--sm ms-btn--outline" href="#">2</a>
                <a class="ms-btn ms-btn--sm ms-btn--outline" href="#">3</a>
                <a class="ms-btn ms-btn--sm ms-btn--outline" href="#">Next</a>
            </nav>
        </div>
    </div>
</div>

More commerce layouts