Monsoon v0.2.0
Made by Alexandre Kohler Star

Two factor and sign in

Two factor status

Account 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 in19 classesNo JavaScriptLight and dark

Example

Full

Classes

19 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 two factor status. On a <section> in the example. Sets grid display, overflow, background, border, corner radius and shadow, and --tone.
CSS
.auth-status {
  --tone: var(--success);
  display: grid;
  overflow: hidden;
  background-color: var(--surface);
  border: var(--m-border-width) solid var(--border);
  border-radius: var(--m-radius-2xl);
  box-shadow: var(--m-shadow-xs);
}
Modifier Modifier, combined with the auth-status class. On a <section> in the example. Sets --tone.
CSS
.auth-status-off {
  --tone: var(--warning);
}
Part Part of the two factor status. On a <header> in the example. Sets flex display, alignment, gap, padding and margin.
CSS
.auth-status-header > .auth-icon {
  margin: 0;
}

.auth-status-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem 1.25rem 1rem;
}
Part Part of the two factor status. On a <div> in the example. Sets grid display, alignment, gap and width.
CSS
.auth-status-intro {
  display: grid;
  flex: 1 1 14rem;
  gap: .25rem;
  min-width: 0;
}
Part Part of the two factor status. On a <h3> in the example. Sets flex display, alignment, gap, margin, text size and font weight.
CSS
.auth-status-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .375rem .625rem;
  margin: 0;
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.35;
}
Part Part of the two factor status. On a <p> in the example. Sets margin, text size, text style and text color.
CSS
.auth-status-text {
  margin: 0;
  font-size: .875rem;
  line-height: 1.5;
  color: var(--muted-foreground);
}
Part Part of the two factor status. On an <ul> in the example. Sets margin, padding and border.
CSS
.auth-status-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--m-border-width) solid var(--border);
}
Part Part of the two factor status. On a <li> in the example. Sets grid display, grid tracks, alignment, gap, padding and border.
CSS
.auth-status-item + .auth-status-item {
  border-top: var(--m-border-width) solid var(--border);
}

.auth-status-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .875rem;
  padding: .875rem 1.25rem;
}
Part Part of the two factor status. On a <span> in the example. Sets grid display, alignment, width, height, text color and background.
CSS
.auth-status-icon > svg {
  width: 1.125rem;
  height: 1.125rem;
}

.auth-status-icon {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  color: var(--foreground);
  background-color: var(--surface-2);
  border: var(--m-border-width) solid var(--border);
  border-radius: var(--m-radius-lg);
}
Part Part of the two factor status. On a <div> in the example. Sets grid display, gap and width.
CSS
.auth-status-body {
  display: grid;
  gap: .125rem;
  min-width: 0;
}
Part Part of the two factor status. On a <p> in the example. Sets flex display, alignment, gap, margin, text size and font weight.
CSS
.auth-status-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem .5rem;
  margin: 0;
  font-size: .875rem;
  font-weight: 600;
}
Part Part of the two factor status. On a <p> in the example. Sets margin, text size and text color.
CSS
.auth-status-meta {
  margin: 0;
  font-size: .75rem;
  color: var(--muted-foreground);
}
Part Part of the two factor status. On a <div> in the example. Sets flex display, alignment and gap.
CSS
.auth-status-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .25rem;
}
Part Part of the two factor status. On a <span> in the example. Sets --tone.
CSS
.auth-icon-success {
  --tone: var(--success);
}
Part Part of the two factor status. On a <span> in the example. Sets --tone.
CSS
.auth-icon-warning {
  --tone: var(--warning);
}
Part Part of the two factor status. Not used in the example above. Sets --tone.
CSS
.auth-icon-danger {
  --tone: var(--danger);
}
Part Part of the two factor status. Not used in the example above. Sets --tone.
CSS
.auth-icon-info {
  --tone: var(--info);
}
Part Part of the two factor status. Not used in the example above. Sets --tone.
CSS
.auth-icon-neutral {
  --tone: var(--muted-foreground);
}

Usage

Components ship inside the same stylesheet as the utilities. There is nothing else to install and no script to load: link Monsoon and write the markup.

index.html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss">

<!-- Two factor status: start from the base class, then add modifiers -->
<div class="grid gap-4 max-w-2xl">
  <section class="auth-status" aria-labelledby="mfa-status-title">
    <header class="auth-status-header">
      <span class="auth-icon auth-icon-success"><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="M12 3 5 6v5.2c0 4.4 3 8.3 7 9.8 4-1.5 7-5.4 7-9.8V6z"/><path d="m9 12 2.2 2.2L15.5 10"/></svg></span>
      <div class="auth-status-intro">
        <h3 class="auth-status-title" id="mfa-status-title">Two factor authentication <span class="badge badge-success badge-sm">On</span></h3>
        <p class="auth-status-text">You'll be asked for a second step when you sign in on a new device.</p>
      </div>
      <button type="button" class="btn btn-sm btn-outline btn-neutral">Turn off</button>
    </header>
    <ul class="auth-status-list">
      <li class="auth-status-item">
        <span class="auth-status-icon"><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="6.5" y="2.5" width="11" height="19" rx="2.5"/><path d="M10.5 18.5h3"/><path d="M9.5 9.5h5M9.5 12.5h3"/></svg></span>
        <div class="auth-status-body">
<!-- 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.
Actions and feedbackStatusA small status dot for presence and health, with an optional ping animation.Two factor and sign inSecurity key and passkeyPrompt for a passkey or a hardware security key: an animated key mark, the steps, platform hints (Touch ID, Windows Hello, Android, USB or NFC keys) and error, retry and success states through classes. The page calls WebAuthn and switches the classes.Two factor and sign inPhone numberPhone number with a country picker: a searchable list with flags and dial codes, formatting as you type for the selected country, typing or pasting +44 or 0044 switches the country, and a hidden field with the E.164 number. Without the script the native select and tel input still work. Needs monsoon.js.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.