Skip to content

Login form in a card

A simple login form.

Preview

Open the screen alone (new tab)

Built with

The components this screen renders, through their own templates. Changing one of them, or a token they read, changes this screen.

Design system gaps

What the design system lacks to render the original as it is. The screen fills each gap with native HTML on semantic tokens until a component or a token covers it.

  • Password fields are Text fields: the Text field has no input type yet, so the password shows as plain text.
  • The Card has no content part: the form is placed inside the Card root after its title and description.
  • Links are native links on semantic tokens: there is no Link component yet.

Changes from the original

  • "Forgot your password?" sits under the password field: the Text field owns its label row.
  • The card title is an h2: the Card heading level goes from 2 to 6.
  • Rebuilt as static HTML with the design system's component templates; every color, type style, radius, border and spacing comes from its tokens.
  • The original visual design (Tailwind classes, the Geist font) is not reused.
  • Lucide and Tabler icons are remapped to Material Symbols; brand logos (Apple, Google, GitHub, Meta) are dropped, the buttons keep their text.
  • Placeholder images are drawn with semantic tokens.
  • No script: behaviour that needs JavaScript (collapsing the sidebar, toasts, drag and drop, client-side tables) is dropped or simplified, and each screen says so.

Code

The HTML the screen renders, from apps/docs/screens/shadcn-ui/login-01.screen.mjs, with the stylesheets of @quantum-ds/tokens, the reference implementation (packages/components/src/) and apps/docs/screens/screens.css.

HTML 
<div class="scr-viewport">
  <div class="scr-screen scr-auth" data-layout="centered">
    <div class="scr-auth__panel">
      <div class="ds-card" data-surface="level-1">
        <h2
          class="ds-card__title"
          data-part="title"
        >Login to your account</h2>
        <p
          class="ds-card__description"
          data-part="description"
        >Enter your email below to login to your account</p>
        <form class="scr-form" action="#" method="post">
          <div class="scr-stack">
            <div class="ds-text-field" data-size="medium">
              <label
                class="ds-text-field__label"
                data-part="label"
                for="login-01-email"
              >Email</label>
              <input
                type="text"
                class="ds-text-field__control"
                data-part="control"
                id="login-01-email"
                name="email"
                placeholder="m@example.com"
                required
                autocomplete="email"
                inputmode="email"
              >
            </div>
            <div class="ds-text-field" data-size="medium">
              <label
                class="ds-text-field__label"
                data-part="label"
                for="login-01-password"
              >Password</label>
              <input
                type="text"
                class="ds-text-field__control"
                data-part="control"
                id="login-01-password"
                name="login-01-password"
                required
                autocomplete="current-password"
              >
            </div>
            <p class="scr-hint" data-align="end">
              <a class="scr-link" href="#">Forgot your password?</a>
            </p>
            <button
              type="submit"
              class="ds-button"
              data-emphasis="accent"
              data-intent="neutral"
              data-size="medium"
            >
              <span
                class="ds-button__label"
                data-part="label"
              >Login</span>
            </button>
            <button
              type="button"
              class="ds-button"
              data-emphasis="subtle"
              data-intent="neutral"
              data-size="medium"
            >
              <span
                class="ds-button__label"
                data-part="label"
              >Login with Google</span>
            </button>
            <p class="scr-hint" data-align="center">
              Don't have an account?
              <a class="scr-link" href="#">Sign up</a>
            </p>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>