GitHub

Blocks / Login

Login beta

A centered sign-in card: brand mark, two fields, one decision, and the way out.

Preview

Built from: Input, Button, Checkbox / Radio, Separator — include their CSS alongside this block.

<div class="login-card">
  <div class="login-mark"><svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="4" y="4" width="16" height="16" rx="4"/><rect x="10" y="10" width="4" height="4" rx="1.2"/></svg></div>
  <h3 class="login-h">Welcome back</h3>
  <p class="login-sub">Sign in to your workspace.</p>
  <div class="field"><label for="li-email">Email</label><input class="input" id="li-email" type="email" placeholder="[email protected]"></div>
  <div class="field"><label for="li-pass">Password</label><input class="input" id="li-pass" type="password" placeholder="Your password"></div>
  <div class="login-row">
    <label class="check"><input type="checkbox" checked>Remember me</label>
    <a class="login-link" href="#">Forgot password?</a>
  </div>
  <button class="btn btn-pri btn-lg login-cta">Sign in</button>
  <div class="k-sep-label">OR</div>
  <button class="btn btn-sec btn-lg login-cta">Continue with SSO</button>
  <p class="login-foot">No account? <a href="#">Create one</a></p>
</div>
.login-card{max-width:368px;margin:0 auto;background:var(--k-bg);border:1px solid var(--k-line);border-radius:16px;padding:30px 28px;font-family:var(--k-font);color:var(--k-ink);text-align:left}
.login-mark{display:grid;place-items:center;color:var(--k-ink)}
.login-h{margin-top:14px;text-align:center;font-size:19px;font-weight:600;letter-spacing:-.015em}
.login-sub{margin-top:5px;text-align:center;font-size:13px;color:var(--k-ink-2)}
.login-card .field{margin-top:16px}
.login-row{display:flex;align-items:center;justify-content:space-between;margin-top:14px;font-size:13px}
.login-link{color:var(--k-accent-ink);text-decoration:none}
.login-cta{width:100%;justify-content:center;margin-top:16px}
.login-card .k-sep-label{margin-top:18px}
.login-foot{margin-top:18px;text-align:center;font-size:13px;color:var(--k-ink-2)}
.login-foot a{color:var(--k-accent-ink);text-decoration:none;font-weight:550}

Usage

Drop it on a bare page with the tokens loaded. The card centers itself; the SSO button and the footer link are the first things to rewire.

Previous
Integrations