Login — Card over full-bleed media

A floating credential card over a full-width image placeholder, aligned right on desktop. Use when media should fill the sign-in view.

ReactHTML

1440 × 900

Open in new tab

Component.tsx21 lines

export default function LoginCardOnMedia() {
  return (
    <section className="relative min-h-[640px] bg-white text-neutral-900">
      <div role="img" aria-label="Image placeholder: full-width account access visual" className="flex h-40 items-center justify-center bg-neutral-200 text-neutral-400 sm:absolute sm:inset-0 sm:h-full">
        <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-10 sm:absolute sm:left-1/4"><rect x="3" y="3" width="18" height="18" rx="2" /><circle cx="9" cy="9" r="2" /><path d="m21 15-5-5L5 21" /></svg>
      </div>
      <div className="relative mx-auto flex min-h-[480px] max-w-6xl items-center justify-center px-6 py-16 sm:min-h-[640px] sm:py-24 lg:justify-end">
        <div className="w-full max-w-sm rounded-lg border border-neutral-200 bg-white p-8 sm:shadow-lg">
          <div className="flex items-center gap-2 font-semibold"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-6"><rect x="3" y="3" width="7" height="7" rx="1" /><rect x="14" y="3" width="7" height="7" rx="1" /><rect x="3" y="14" width="7" height="7" rx="1" /><rect x="14" y="14" width="7" height="7" rx="1" /></svg><span>Logo</span></div>
          <h1 className="mt-6 text-3xl font-semibold tracking-tight text-balance sm:text-4xl">Sign in</h1>
          <form className="mt-8 grid gap-5">
            <div><label htmlFor="login-card-on-media-email" className="block text-sm font-medium text-neutral-900">Email</label><input id="login-card-on-media-email" name="email" type="email" autoComplete="username" required placeholder="name@example.com" className="mt-2 h-10 w-full rounded-md border border-neutral-300 bg-white px-3 text-sm placeholder:text-neutral-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900" /></div>
            <div><label htmlFor="login-card-on-media-password" className="block text-sm font-medium text-neutral-900">Password</label><input id="login-card-on-media-password" name="password" type="password" autoComplete="current-password" required className="mt-2 h-10 w-full rounded-md border border-neutral-300 bg-white px-3 text-sm placeholder:text-neutral-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900" /></div>
            <button type="submit" className="w-full inline-flex h-11 items-center justify-center rounded-md bg-neutral-900 px-5 text-sm font-medium text-white transition-colors hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">Sign in</button>
          </form>
          <p className="mt-6 text-sm text-neutral-500">No account? <a href="#" className="font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">Sign up</a></p>
        </div>
      </div>
    </section>
  )
}

Pattern notes

When to use: Use when a sign-in visual should occupy the whole view. Choose login-split-media for separate media and form columns. Variations: align the card left, use a video placeholder, or add a short account hint below the heading.
Hierarchy: The full-bleed media provides context while a logo, 30px h1, Email and Password fields, full-width Sign in and a sign-up link form the foreground. Form spacing is 20px. Slots: heading up to 4 words, sign-up prompt up to 8, image label describes the intended visual.
Responsive: Below 640px the image becomes a 160px band above the card and no longer sits behind it. The card fills the 24px gutters and loses its shadow. From 640px the card floats over the background, the heading grows to 36px, and from 1024px the container pushes it right.
Layout: A relative section has a 640px minimum height. From 640px an absolute inset-0 neutral-200 image placeholder fills the background, behind a relative 1152px max-w-6xl container with 24px gutters and 64px vertical padding, 96px from 640px. A white max-w-sm card uses 32px padding, 8px radius and shadow-lg. It centres until 1024px, then aligns to the right.
States: Inputs are 40px high with a 1px neutral-300 border, 6px radius and 14px text. The 44px primary action changes neutral-900 to neutral-700 on hover with a 150ms colour transition. Text links change to neutral-600. All controls show a 2px neutral-900 keyboard-focus outline offset 2px. The elevated card is static and does not change on hover; the media is a decorative placeholder with an accessible description.

Desktop wireframe

┌──────────────────────────────────────────────────────────┐
│                                                          │
│                              ┌────────────────────────┐  │
│                              │ Logo / Sign-in title   │  │
│         Image                │ Email                  │  │
│                              │ Password               │  │
│                              │ [Sign in]              │  │
│                              │ [Sign up]              │  │
│                              └────────────────────────┘  │
│                                                          │
└──────────────────────────────────────────────────────────┘

View all

Login — Card over full-bleed media

Pattern notes

Login — Account picker with credential pane

Login — Centred card

Login — Context column beside form

Login — Card over full-bleed media

Pattern notes

More in Login

Login — Account picker with credential pane

Login — Centred card

Login — Context column beside form