Authentication (Card) Blocks

Sign-up card: a brand badge over a centered title and supporting line, icon-prefixed name, email and password fields with a show-password toggle and a forgot-password link, a terms agreement checkbox, and a create-account action with a sign-in link.

Sign-in card: a featured icon over a welcome title, three icon-only social providers above an OR divider, icon-prefixed email and password fields with a show-password toggle and a forgot-password link, a remember-me checkbox, and a sign-in action with a sign-up link.

Phone sign-in card: a featured icon over a title and a two-line note about the code, a required phone field with a country select and a helper tooltip, an SMS updates checkbox, a send-code action, and a continue-with-email fallback below an OR divider.

OTP verification card: a featured icon over the number the code went to, four digit slots, a verify action, a resend button that unlocks when its countdown runs out, and a link back to change the number.

Forgot password card: a featured icon over the reassurance line, an email/SMS segmented control that swaps the field between an email address and a phone number, and send-reset next to a back-to-sign-in action.

New password card: a featured icon over the reset instruction, a password field with a live requirements checklist and strength meter, a confirmation field that flags a mismatch, and an update action.

Check your email card: a success featured icon over the address the reset link went to and how long it lasts, an open-mail-app action next to skip for now, and a resend link.

Verification failed card: a danger featured icon over what went wrong with the link, an inline alert carrying the error code, and request-a-new-link next to contact support.

Social sign-in card: three full-width branded providers over an OR divider, a two-column grid of neutral providers with short labels, and enterprise SAML SSO alongside them.

Two-factor card: an info featured icon over the authenticator instruction, a six digit split code field with a live refresh countdown in its label, a trust-this-device checkbox, a verify action, and a backup code link.

Magic link card: an info featured icon over where the sign-in link was sent, an inline alert with how long it lasts, open-inbox next to send-a-new-link, and a link back to password sign-in.

Account locked card: an away featured icon over why sign-in was paused, an inline alert counting down to the automatic unlock and naming the last attempt, unlock-with-email next to a password reset, and a link to report the activity.