← All layouts  ·  Utility

Sign in

Split authentication page with providers and a fallback.

Password and provider sign-in given equal weight, with the reset link where somebody who has just failed will look for it.

  • .ms-btn
  • .ms-stat
  • .ms-divider
  • .ms-field
  • .ms-input
  • .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.

<div class="ms-auth">
    <div class="ms-auth__form">
        <div class="ms-auth__inner">
            <div class="ms-logo"><strong>Ledgerline</strong></div>
            <h1 class="u-mt-4">Sign in</h1>
            <p class="ms-stat__meta">Welcome back.</p>

            <form class="ms-form u-mt-4">
                <div class="ms-field">
                    <label class="ms-label" for="email">Email</label>
                    <input autocomplete="username" class="ms-input" id="email" type="email">
                </div>
                <div class="ms-field">
                    <label class="ms-label" for="password">Password</label>
                    <input autocomplete="current-password" class="ms-input" id="password" type="password">
                    <p class="ms-form-help"><a class="u-link" href="#">Forgotten your password?</a></p>
                </div>
                <label class="ms-checkbox"><input type="checkbox"> Keep me signed in</label>
                <button class="ms-btn ms-btn--primary ms-btn--lg u-w-full u-mt-4">Sign in</button>
            </form>

            <div class="ms-toolbar u-mt-4">
                <hr class="ms-divider" style="flex:1">
                <span class="ms-stat__meta">or</span>
                <hr class="ms-divider" style="flex:1">
            </div>
            <button class="ms-btn ms-btn--outline u-w-full">Continue with your work account</button>

            <p class="u-mt-6 ms-stat__meta">No account yet?
                <a class="u-link" href="#">Register</a></p>
        </div>
    </div>

    <div class="ms-auth__panel">
        <div class="ms-auth__inner">
            <blockquote class="u-text-2xl">
                &ldquo;We closed the month in an afternoon for the first time in nine
                years.&rdquo;</blockquote>
            <p class="u-mt-4"><strong>Priya Kaur</strong><br>
                Finance director, Fellside Outdoor</p>
        </div>
    </div>
</div>

More utility layouts

Onboarding
Search results
Error page