← All layouts  ·  Commerce

storefront Storefront

Shop home with a promoted hero, categories and a product rail.

The front of a shop has one job: get somebody into a category or a product within a screen. The hero promotes one thing rather than rotating through five, because a carousel is a decision nobody made.

• .ms-card
• .ms-thumb
• .ms-btn
• .ms-hero
• .ms-badge
• .ms-footer-section

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>

<section class="ms-hero ms-hero--split">
    <div>
        <h1 class="ms-hero__title">Built for the long way round</h1>
        <p class="ms-hero__sub">Hard-wearing kit for people who are outside whether or not
            the weather agrees. New autumn range, in stock now.</p>
        <div class="ms-hero__actions">
            <a class="ms-btn ms-btn--primary ms-btn--lg" href="#">Shop the range</a>
            <a class="ms-btn ms-btn--outline ms-btn--lg" href="#">Our materials</a>
        </div>
    </div>
    <span class="ms-thumb ms-thumb--wide"></span>
</section>

<div class="u-container u-py-8">
    <h2>Shop by category</h2>
    <div class="u-grid u-grid-cols-12">
        <div class="u-col-6 u-col-md-3"><a class="ms-card ms-card--media ms-card--interactive" href="#">
            <span class="ms-thumb ms-card__media"></span>
            <div class="ms-card__body"><strong>Outerwear</strong></div></a></div>
        <div class="u-col-6 u-col-md-3"><a class="ms-card ms-card--media ms-card--interactive" href="#">
            <span class="ms-thumb ms-card__media"></span>
            <div class="ms-card__body"><strong>Footwear</strong></div></a></div>
        <div class="u-col-6 u-col-md-3"><a class="ms-card ms-card--media ms-card--interactive" href="#">
            <span class="ms-thumb ms-card__media"></span>
            <div class="ms-card__body"><strong>Packs</strong></div></a></div>
        <div class="u-col-6 u-col-md-3"><a class="ms-card ms-card--media ms-card--interactive" href="#">
            <span class="ms-thumb ms-card__media"></span>
            <div class="ms-card__body"><strong>Accessories</strong></div></a></div>
    </div>

    <div class="ms-toolbar u-mt-8">
        <h2 style="margin:0">New this week</h2>
        <span class="ms-toolbar__spacer"></span>
        <a class="u-link" href="#">See all 42 &rarr;</a>
    </div>
    <div class="u-grid u-grid-cols-12">
        <div class="u-col-6 u-col-md-3"><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">
                <span class="ms-badge ms-badge--success">New</span>
                <p><strong>Fell Jacket</strong><br>&pound;189.00</p>
            </div></div></div>
        <div class="u-col-6 u-col-md-3"><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-3"><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">
                <span class="ms-badge ms-badge--danger">Last few</span>
                <p><strong>Scree Boot</strong><br>&pound;240.00</p>
            </div></div></div>
        <div class="u-col-6 u-col-md-3"><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>Ridge Pack 30L</strong><br>&pound;130.00</p>
            </div></div></div>
    </div>
</div>

<footer class="ms-footer"><div class="ms-footer-inner">
    <div class="ms-footer-section"><strong>Northbound</strong><p>Made for weather.</p></div>
    <div class="ms-footer-section"><strong>Shop</strong><p>New in<br>Sale<br>Gift cards</p></div>
    <div class="ms-footer-section"><strong>Help</strong><p>Delivery<br>Returns<br>Contact</p></div>
</div></footer>

More commerce layouts