Login — Split with media panel

An inset media panel beside a vertically centred credential form, with a logo above and legal links below. Use when a large visual should accompany account access.

ReactHTML

1440 × 900

Open in new tab

Component.tsx31 lines

export default function LoginSplitMedia() {
  return (
    <section className="grid min-h-[720px] bg-white text-neutral-900 lg:grid-cols-2">
      <div className="p-4">
        <div role="img" aria-label="Image placeholder: account access visual" className="flex h-48 items-center justify-center rounded-lg bg-neutral-100 text-neutral-400 sm:h-72 lg: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"><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>
      <div className="flex flex-col gap-12 px-6 py-8 sm:p-10">
        <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>
        <div className="flex flex-1 items-center justify-center">
          <div className="w-full max-w-sm">
            <h1 className="text-3xl font-semibold tracking-tight text-balance sm:text-4xl">Sign in</h1>
            <p className="mt-4 text-lg text-pretty text-neutral-600">A brief welcome and account-access explanation.</p>
            <form className="mt-8 grid gap-5">
              <div><label htmlFor="login-split-media-email" className="block text-sm font-medium text-neutral-900">Email</label><input id="login-split-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-split-media-password" className="block text-sm font-medium text-neutral-900">Password</label><input id="login-split-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>
              <div className="flex flex-wrap items-center justify-between gap-3"><label className="inline-flex items-center gap-2 text-sm text-neutral-600"><input name="remember" type="checkbox" className="size-4 shrink-0 accent-neutral-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900" />Remember me</label><span className="text-sm"><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">Forgot password?</a></span></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>
        <footer className="flex flex-wrap items-center justify-between gap-4 text-sm text-neutral-500">
          <p>© 2026</p>
          <div className="flex gap-4"><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">Privacy</a><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">Terms</a></div>
        </footer>
      </div>
    </section>
  )
}

Pattern notes

When to use: Use when sign-in needs a prominent screenshot or visual. Choose login-card-on-media when the form should float over media. Variations: reverse desktop columns, use a video placeholder, or replace the footer copyright with a help link.
Hierarchy: A large image placeholder balances the 30px sign-in h1, 18px lede and Email and Password fields. The remember-me and recovery controls share a wrapping row. A sign-up link follows the submit; copyright and Privacy and Terms links anchor the footer. Slots: lede up to 15 words, copyright one short line.
Responsive: Below 1024px the media becomes a band above the right column, 192px high below 640px and 288px from 640px. The right column uses 24px padding below 640px and 40px above. Logo, form and footer stack with 48px gaps; from 1024px the form expands into the available vertical space. Heading increases to 36px at 640px.
Layout: A full-width white section has a 720px minimum height. From 1024px it is two equal columns. The media is inset 16px and stretches to the column height; the right side has 40px padding, a top logo, a flexible centred max-w-sm form and a bottom footer. The form uses 20px gaps and a full-width 44px submit.
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 remember-me checkbox is native and toggleable. The media and logo are static placeholders.

Desktop wireframe

┌──────────────────────────────────────────────────────────┐
│┌──────────────────────┐  Logo                            │
││                      │                                  │
││                      │  Sign-in headline                │
││        Image         │  Lede                            │
││                      │  Email                           │
││                      │  Password                        │
││                      │  [ ] Remember   [Forgot?]        │
││                      │  [Sign in               ]        │
││                      │  No account? [Sign up]           │
│└──────────────────────┘  Copyright [Privacy] [Terms]     │
└──────────────────────────────────────────────────────────┘

View all

Login — Split with media panel

Pattern notes

Login — Account picker with credential pane

Login — Card over full-bleed media

Login — Centred card

Login — Split with media panel

Pattern notes

More in Login

Login — Account picker with credential pane

Login — Card over full-bleed media

Login — Centred card