Monsoon v0.2.0
Made by Alexandre Kohler Star

Two factor and sign in

Sign in, split

Two columns: the second factor step on one side and an illustration panel with a quote on the other, drawn with inline SVG over the theme colors. The panel hides itself when the container is narrow. Needs monsoon.js for the code cells and the countdown.

Two factor and sign in5 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

Classes

5 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.

ClassTypeWhat it does
Base Base class of the sign in, split. On a <div> in the example. Sets grid display, grid tracks, overflow, background, border and corner radius.
CSS
.auth-split {
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  overflow: hidden;
  background-color: var(--surface);
  border: var(--m-border-width) solid var(--border);
  border-radius: var(--m-radius-3xl);
  box-shadow: var(--m-shadow-lg);
}
Part Part of the sign in, split. On a <div> in the example. Sets grid display, alignment, gap and padding.
CSS
.auth-split-main {
  display: grid;
  align-content: center;
  gap: 1.5rem;
  padding: clamp(1.5rem, 6cqi, 3rem);
}
Part Part of the sign in, split. On an <aside> in the example. Sets grid display, alignment, gap, height, padding and overflow.
CSS
@container (max-width: 40rem) {
  .auth-split-panel {
    display: none;
  }
}

.auth-split-panel > svg {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}
Part Part of the sign in, split. On a <p> in the example. Sets margin, text size, font weight and text style.
CSS
.auth-split-quote {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.5;
  text-wrap: pretty;
}
Part Part of the sign in, split. On a <p> in the example. Sets margin, text size and opacity.
CSS
.auth-split-caption {
  margin: 0;
  font-size: .8125rem;
  opacity: .8;
}

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, split: start from the base class, then add modifiers -->
<div class="auth-split">
  <div class="auth-split-main">
    <form class="grid gap-6" action="#" onsubmit="event.preventDefault()">
      <ol class="auth-flow" aria-label="Sign in progress">
      <li class="auth-flow-step auth-flow-done"><span class="auth-flow-label">Password<span class="sr-only">, completed</span></span></li>
      <li class="auth-flow-step" aria-current="step"><span class="auth-flow-label">Verify</span></li>
      <li class="auth-flow-step"><span class="auth-flow-label">Done</span></li>
    </ol>
      <header class="auth-header">
        <span class="auth-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4.5 5.5h15a1 1 0 0 1 1 1V16a1 1 0 0 1-1 1H9l-4.5 3.5V6.5a1 1 0 0 1 1-1z"/><path d="M8.5 11.25h.01M12 11.25h.01M15.5 11.25h.01" stroke-width="2.4"/></svg></span>
        <h2 class="auth-title">Enter the code we texted you</h2>
        <p class="auth-description">We sent a 6 digit code to <span class="auth-destination">+55 •• •••••-0474</span>. It expires in 10 minutes.</p>
      </header>
      <div class="otp mx-auto" data-m-otp data-m-otp-separator="3" data-m-otp-autosubmit>
<!-- the full example is in the Code tab above -->

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.

Accessibility

  • Give every control a visible label linked with for, or an aria-label when the purpose is obvious from context. Link help and error text with aria-describedby; invalid styles use :user-invalid, so they appear only after the user interacts.
  • Checkboxes and radios stay real inputs, so they keep native keyboard behavior (Space toggles, arrow keys move within a radio group) and form submission.
  • Use button for actions and a for navigation. Icon only buttons need an aria-label; decorative icons carry aria-hidden="true".
  • Every interactive part shows a visible focus ring with :focus-visible, and tone colors pair with -foreground tokens that keep text at 4.5:1 or better in light and dark mode.
Two factor and sign inSign in, centeredA centered sign in card on a soft backdrop: passkey first, then email and password, the flow progress, and a footer link. Composes the card shell with the native form fields; needs monsoon.js only for the reveal button.Two factor and sign inSign in, compactA 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 inSign in progressA compact step indicator for the sign in flow: password, second factor, done. Completed steps get .auth-flow-done (with a check), the current one aria-current="step".Two factor and sign inNew passwordPassword with a reveal toggle, a four step strength meter and a live rule checklist: length, lower and upper case, a number, a symbol, and not a common password, keyboard run or repeated character. Needs monsoon.js.

No recent searches

Try , , or .

Recent

Loading the search index

No results for ""

Check the spelling, or search a class name such as px-4.