Auth Compact Card

Fetch pattern JSON: curl https://webspire.de/patterns/auth/compact-card.json

compact-card.html

<section class="ws-auth-compact-card flex min-h-screen items-center justify-center bg-slate-50 px-6 py-12" style="--ws-auth-bg: var(--ws-color-surface); --ws-auth-text: var(--ws-color-text); --ws-auth-text-soft: var(--ws-color-text-muted); --ws-auth-border: var(--ws-color-border); --ws-auth-accent: var(--ws-color-primary);">
  <div class="w-full max-w-sm rounded-3xl border border-[var(--ws-auth-border)] bg-[var(--ws-auth-bg)] p-8 shadow-sm">
    <div class="text-center">
      <p class="text-lg font-semibold text-[var(--ws-auth-text)]">Webspire</p>
      <h1 class="mt-4 text-2xl font-semibold text-[var(--ws-auth-text)]">Welcome back</h1>
      <p class="mt-2 text-sm text-[var(--ws-auth-text-soft)]">A compact login card for admin, dashboard, and member-entry flows.</p>
    </div>
    <form class="mt-8 space-y-4">
      <div>
        <label for="compact-email" class="block text-sm font-medium text-[var(--ws-auth-text)]">Email</label>
        <input id="compact-email" type="email" placeholder="maya@webspire.dev" class="mt-1.5 w-full rounded-xl border border-[var(--ws-auth-border)] px-3 py-2.5 text-sm text-[var(--ws-auth-text)] focus:border-[var(--ws-auth-accent)] focus:outline-none focus:ring-2 focus:ring-[var(--ws-auth-accent)]/15" />
      </div>
      <div>
        <div class="flex items-center justify-between">
          <label for="compact-password" class="block text-sm font-medium text-[var(--ws-auth-text)]">Password</label>
          <a href="#" class="text-sm font-medium text-[var(--ws-auth-accent)]">Forgot?</a>
        </div>
        <input id="compact-password" type="password" placeholder="••••••••" class="mt-1.5 w-full rounded-xl border border-[var(--ws-auth-border)] px-3 py-2.5 text-sm text-[var(--ws-auth-text)] focus:border-[var(--ws-auth-accent)] focus:outline-none focus:ring-2 focus:ring-[var(--ws-auth-accent)]/15" />
      </div>
      <button type="submit" class="w-full rounded-xl bg-[var(--ws-auth-accent)] px-4 py-2.5 text-sm font-semibold text-white">Sign in</button>
    </form>
    <div class="mt-6 flex items-center gap-3">
      <div class="h-px flex-1 bg-[var(--ws-auth-border)]"></div>
      <span class="text-xs uppercase tracking-[0.16em] text-[var(--ws-auth-text-soft)]">or</span>
      <div class="h-px flex-1 bg-[var(--ws-auth-border)]"></div>
    </div>
    <div class="mt-6 grid gap-3">
      <button type="button" class="rounded-xl border border-[var(--ws-auth-border)] px-4 py-2.5 text-sm font-medium text-[var(--ws-auth-text)]">Continue with Google</button>
      <button type="button" class="rounded-xl border border-[var(--ws-auth-border)] px-4 py-2.5 text-sm font-medium text-[var(--ws-auth-text)]">Continue with GitHub</button>
    </div>
    <p class="mt-6 text-center text-sm text-[var(--ws-auth-text-soft)]">
      Need an account? <a href="#" class="font-semibold text-[var(--ws-auth-accent)]">Request access</a>
    </p>
  </div>
</section>

Details

Family

auth

Tier

enhanced

Kind

section

Extends

auth/base

Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste

Stable Published

authlogincompactsign-incard

Slots

Name	Required	Description
brand	Yes	Product or workspace identifier.
form	Yes	Compact email/password form with primary action.
social	No	Secondary provider buttons.

Compact auth card for tighter login flows. Best when the product does not need a full split-screen marketing moment and should get the user into the app quickly.