Sign-in page
A split sign-in or sign-up page: the form on one side, the brand and a quote or image on the other.
Sign in
<div class="mn-auth" style="min-height:30rem;border:1px solid var(--mn-border);border-radius:var(--mn-radius-box);overflow:hidden">
<div class="mn-auth-main"><form class="mn-auth-form" action="#">
<a class="mn-header-brand" href="#"><svg viewBox="0 0 24 24" aria-hidden="true" fill="currentColor"><rect x="3" y="3" width="18" height="18" rx="5"/><path d="M8 7v10h8" stroke="var(--mn-bg)" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>Ledger</a>
<div class="mn-stack" style="--mn-gap:.35rem"><h1 class="mn-h3" style="margin:0">Sign in</h1><p class="mn-muted" style="margin:0">Welcome back. Your close is 72% done.</p></div>
<button class="mn-btn mn-btn-outline mn-btn-block" type="button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/></svg> Continue with SSO</button>
<p class="mn-or">or</p>
<div class="mn-field"><label class="mn-label" for="au-e">Work email</label><input class="mn-input" id="au-e" type="email" autocomplete="email" required></div>
<div class="mn-field"><label class="mn-label" for="au-p">Password</label><input class="mn-input" id="au-p" type="password" autocomplete="current-password" required></div>
<button class="mn-btn mn-btn-block">Sign in</button>
</form></div>
<aside class="mn-auth-aside" aria-label="About Ledger"><span class="mn-badge mn-badge-outline mn-neutral">Ledger for finance teams</span>
<figure class="mn-quote"><blockquote><p>“The close is a Tuesday meeting now.”</p></blockquote><figcaption><span class="mn-avatar">MR</span><span><strong>Maren Richter</strong><small>Halden & Co</small></span></figcaption></figure></aside>
</div>Installation
Everything ships in one stylesheet. There is nothing to import per component.
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">Prefer to own the files? /r/auth.json is a registry item with this component's CSS and example markup, ready to copy into your project with any tool that reads the open registry-item format.
Class reference
| Class / attribute | Description |
|---|---|
| mn-auth | The page. Stacks to the form only on narrow screens. |
| mn-auth-main · mn-auth-form | The form column and the form (max 24rem). |
| mn-auth-aside | The brand panel, shown from 60rem. |
| mn-or | An “or” divider between single sign-on and email. |
Accessibility
- Use autocomplete="email" and autocomplete="current-password" (or "new-password") so password managers work.
- Show errors next to the field with aria-describedby and aria-invalid.
- Never disable paste in password fields.