← All layouts  ·  Utility

error_outline Error page

A 404 that helps rather than apologises.

Says what happened, offers the three things the visitor was most likely looking for, and keeps the search box. An apology is not navigation.

• .ms-btn
• .ms-card
• .ms-empty
• .ms-divider
• .ms-stat
• .ms-topbar

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="#">Ledgerline</a></div>
    <nav class="ms-topbar__nav"><a href="#">Product</a><a href="#">Pricing</a><a href="#">Docs</a></nav>
</header>

<div class="u-container u-py-8" style="max-width:640px">
    <div class="ms-empty" style="padding-top:3rem">
        <span class="ms-empty__icon material-icons">travel_explore</span>
        <p class="ms-stat__value" style="font-size:3.5rem">404</p>
        <p class="ms-empty__title">We cannot find that page</p>
        <p>The link may be old, or the page may have moved. Nothing is broken on your side.</p>
    </div>

    <div class="ms-card">
        <label class="ms-label" for="q">Search instead</label>
        <div class="ms-input-group">
            <input class="ms-input" id="q" placeholder="What were you looking for?">
            <button class="ms-btn ms-btn--primary">Search</button>
        </div>
    </div>

    <div class="ms-card ms-card--flat">
        <h2>Popular pages</h2>
        <p><a class="u-link" href="#">Documentation</a> &mdash; API reference and guides</p>
        <hr class="ms-divider">
        <p><a class="u-link" href="#">Pricing</a> &mdash; plans and what is in them</p>
        <hr class="ms-divider">
        <p><a class="u-link" href="#">Status</a> &mdash; is something actually down?</p>
    </div>

    <div class="u-text-center u-mt-6">
        <a class="ms-btn ms-btn--primary" href="#">Back to the homepage</a>
        <a class="ms-btn ms-btn--ghost" href="#">Contact support</a>
    </div>

    <p class="ms-stat__meta u-text-center u-mt-6">If you followed a link from our own site,
        <a class="u-link" href="#">tell us</a> &mdash; that is a bug we can fix.</p>
</div>

More utility layouts