Two factor and sign in

Sign in, compact

A compact card for popovers, sidebars and embedded flows: the method switcher and code entry in a tight layout with .auth-card-compact. Needs monsoon.js for the code cells.

Two factor and sign in3 classesNeeds monsoon.jsLight and dark

Needs monsoon.js. The styles work on their own, and the behavior comes from the optional interactive layer: add <script src="https://cdn.jsdelivr.net/npm/monsooncss/dist/monsoon.js" defer></script> or import 'monsooncss/js'. See the interactive layer.

Example

Full

sign-in-compact.html

<form class="auth-card auth-card-compact" action="#" onsubmit="event.preventDefault()">
  <header class="auth-header auth-header-start">
    <h2 class="auth-title text-lg">Confirm it's you</h2>
    <p class="auth-description text-sm">Enter a code from your authenticator app to change your email.</p>
  </header>
  <div class="otp otp-sm" data-m-otp data-m-otp-separator="3">
    <input class="otp-field" name="code" maxlength="6" inputmode="numeric" autocomplete="one-time-code" aria-label="Verification code">
  </div>
  <div class="flex items-center justify-between gap-2">
    <a class="link link-muted text-sm" href="#recovery">Use a recovery code</a>
    <button class="btn btn-primary btn-sm">Confirm</button>
  </div>
</form>

Classes

3 classes. Click a name to copy it. Utilities on the same element always win over component defaults, so any of them can be adjusted with plain utility classes.

Class Type What it does

Class	Type	What it does
	Modifier	Modifier, combined with the auth-card class. On a <form> in the example. Sets gap, width and shadow, and `--auth-pad` and `--auth-radius`. CSS `.auth-card-compact { --auth-pad: 1.25rem; --auth-radius: var(--m-radius-2xl); gap: 1rem; max-width: 22rem; box-shadow: var(--m-shadow-md); }`
	Base	Base class of the sign in, compact. On a <form> in the example. Sets grid display, gap, width, padding, text color and background, and 4 custom properties. CSS `.auth-card { --tone: var(--primary); --tone-fg: var(--primary-foreground); --auth-pad: clamp(1.25rem, 5vw, 2rem); --auth-radius: var(--m-radius-3xl); display: grid; gap: 1.5rem; width: 100%; max-width: 26rem; padding: var(--auth-pad); color: var(--foreground); background-color: var(--surface); border: var(--m-border-width) solid var(--border); border-radius: var(--auth-radius); box-shadow: var(--m-shadow-lg); }`
	Part	Part of the sign in, compact. On a <header> in the example. Sets alignment, text style and width. CSS `.auth-header-start > .auth-description { max-width: 60ch; } .auth-header-start { justify-items: start; text-align: start; }`

Modifier

Modifier, combined with the auth-card class. On a <form> in the example. Sets gap, width and shadow, and --auth-pad and --auth-radius.

CSS

.auth-card-compact {
  --auth-pad: 1.25rem;
  --auth-radius: var(--m-radius-2xl);
  gap: 1rem;
  max-width: 22rem;
  box-shadow: var(--m-shadow-md);
}

Base

Base class of the sign in, compact. On a <form> in the example. Sets grid display, gap, width, padding, text color and background, and 4 custom properties.

CSS

.auth-card {
  --tone: var(--primary);
  --tone-fg: var(--primary-foreground);
  --auth-pad: clamp(1.25rem, 5vw, 2rem);
  --auth-radius: var(--m-radius-3xl);
  display: grid;
  gap: 1.5rem;
  width: 100%;
  max-width: 26rem;
  padding: var(--auth-pad);
  color: var(--foreground);
  background-color: var(--surface);
  border: var(--m-border-width) solid var(--border);
  border-radius: var(--auth-radius);
  box-shadow: var(--m-shadow-lg);
}

Part

Part of the sign in, compact. On a <header> in the example. Sets alignment, text style and width.

CSS

.auth-header-start > .auth-description {
  max-width: 60ch;
}

.auth-header-start {
  justify-items: start;
  text-align: start;
}

Usage

The styles ship inside the same stylesheet as the utilities, and the behavior comes from the optional monsoon.js script, which enhances any element with a matching data-m attribute, including markup added later.

index.html

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss">
<script src="https://cdn.jsdelivr.net/npm/monsooncss/dist/monsoon.js" defer></script>

<!-- Sign in, compact: start from the base class, then add modifiers -->
<form class="auth-card auth-card-compact" action="#" onsubmit="event.preventDefault()">
  <header class="auth-header auth-header-start">
    <h2 class="auth-title text-lg">Confirm it's you</h2>
    <p class="auth-description text-sm">Enter a code from your authenticator app to change your email.</p>
  </header>
  <div class="otp otp-sm" data-m-otp data-m-otp-separator="3">
    <input class="otp-field" name="code" maxlength="6" inputmode="numeric" autocomplete="one-time-code" aria-label="Verification code">
  </div>
  <div class="flex items-center justify-between gap-2">
    <a class="link link-muted text-sm" href="#recovery">Use a recovery code</a>
    <button class="btn btn-primary btn-sm">Confirm</button>
  </div>
</form>

Theme it with --seed on any ancestor, for example style="--seed: #0d9488", and force a scheme with class="dark" or class="light" on a wrapper.

#Example

#Classes

#Usage

#Accessibility

#Related components

Example

Classes

Usage

Accessibility

Related components