auth login compact sign-in card auth login compact sign in card member compact login card member sign in panel
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
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.