Monsoon v0.2.0
Made by Alexandre Kohler Star

Two factor and sign in

Magic link sent

Check your email: an animated envelope, the masked address, buttons that open the common mail apps, a resend link with a countdown and a way back to the password. Needs monsoon.js for the countdown.

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

JavaScript API

Attribute

data-m-auth-resend

Options

OptionDescription
data-m-auth-resend-seconds="60"
data-m-auth-resend-idle

Methods

MethodDescription
Monsoon.authResend(el).start(60)
Monsoon.authResend(el).remaining

Events

EventDescription
monsoon:auth-resend { seconds }
monsoon:auth-resend-ready

Classes

6 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
Part Part of the magic link sent. On a <div> in the example. Sets width, height, margin, text color and overflow.
CSS
.auth-mail-visual > svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.auth-mail-visual {
  position: relative;
  width: 5.5rem;
  height: 4.25rem;
  margin-block: .5rem .25rem;
  color: var(--primary);
}
Part Part of the magic link sent. On a <g> in the example. Sets animation and icon color.
CSS
.auth-mail-letter {
  animation: m-auth-float 3s ease-in-out infinite;
}

.auth-mail-letter > rect {
  fill: var(--surface);
  stroke: color-mix(in oklab, currentColor 40%, var(--border));
  stroke-width: 1.5;
}
Part Part of the magic link sent. On a <path> in the example. Sets icon color.
CSS
.auth-mail-front {
  fill: color-mix(in oklab, currentColor 13%, var(--surface));
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linejoin: round;
}
Part Part of the magic link sent. On a <div> in the example. Sets grid display, grid tracks and gap.
CSS
.auth-mail-apps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 6.25rem), 1fr));
  gap: .5rem;
}
Part Part of the magic link sent. On an <a> in the example. Sets flex display, alignment, gap, height, padding and text size.
CSS
.auth-mail-app > svg {
  width: 1rem;
  height: 1rem;
  flex: none;
}

.auth-mail-app:focus-visible {
  outline: var(--m-ring);
  outline-offset: var(--m-ring-offset);
}

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>

<!-- Magic link sent: start from the base class, then add modifiers -->
<div class="auth-card">
  <header class="auth-header">
    <div class="auth-mail-visual" aria-hidden="true">
      <svg viewBox="0 0 88 68">
        <path d="M6 26 44 3l38 23" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" opacity=".45"/>
        <g class="auth-mail-letter"><rect x="16" y="9" width="56" height="42" rx="4"/><path d="M25 20h24M25 28h38M25 36h30"/></g>
        <path class="auth-mail-front" d="M6 26l38 24 38-24v34a4 4 0 0 1-4 4H10a4 4 0 0 1-4-4z"/>
      </svg>
    </div>
    <h2 class="auth-title">Check your email</h2>
    <p class="auth-description">We sent a sign in link to <span class="auth-destination">y•••@example.com</span>. The link works once and expires in 15 minutes.</p>
  </header>
  <div class="auth-mail-apps">
    <a class="auth-mail-app" href="https://mail.google.com/" target="_blank" rel="noopener"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2.5"/><path d="m3.5 7.5 8.5 6 8.5-6"/></svg> Gmail</a>
<!-- 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

  • 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.
Navigation and overlaysLinkText links with a soft underline that firms up on hover, a hover only underline, primary, muted and danger colors and an external marker.Navigation and overlaysSkip linkA link to the main content that stays out of view until it receives keyboard focus.Two factor and sign inTwo factor statusAccount settings card: on or off badge, the methods in use with manage and remove actions, recovery codes left with a regenerate button and when the account was last verified. The .auth-status-off modifier turns the card into a prompt to switch it on.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".

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.