Login — Context column beside form

An account-context column with three icon rows beside a bordered credential form. Use to explain access, protection or availability before users sign in.

ReactHTML

1440 × 900

Open in new tab

Component.tsx28 lines

export default function LoginSplitContext() {
  return (
    <section className="bg-white text-neutral-900">
      <div className="mx-auto grid max-w-6xl items-center gap-12 px-6 py-16 sm:py-24 lg:grid-cols-[1.4fr_1fr] lg:gap-16">
        <div>
          <p className="text-sm font-medium text-neutral-500">Account context</p>
          <h1 className="mt-4 text-3xl font-semibold tracking-tight text-balance sm:text-4xl">Headline explaining what your account unlocks</h1>
          <p className="mt-4 text-lg text-pretty text-neutral-600">A short introduction to the content and support available after sign-in.</p>
          <ul role="list" className="mt-8">
            <li className="flex gap-4 border-t border-neutral-200 py-5"><span aria-hidden="true" className="flex size-10 shrink-0 items-center justify-center rounded-md bg-neutral-100 text-neutral-900"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-5"><circle cx="12" cy="8" r="4" /><path d="M4 21v-2a8 8 0 0 1 16 0v2" /></svg></span><div><h2 className="text-base font-semibold">Account access</h2><p className="mt-1 text-sm text-neutral-600">One line naming the content available after sign-in.</p></div></li>
            <li className="flex gap-4 border-t border-neutral-200 py-5"><span aria-hidden="true" className="flex size-10 shrink-0 items-center justify-center rounded-md bg-neutral-100 text-neutral-900"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-5"><rect x="5" y="10" width="14" height="11" rx="2" /><path d="M8 10V7a4 4 0 0 1 8 0v3" /></svg></span><div><h2 className="text-base font-semibold">Account protection</h2><p className="mt-1 text-sm text-neutral-600">A short note explaining how access is protected.</p></div></li>
            <li className="flex gap-4 border-t border-neutral-200 py-5"><span aria-hidden="true" className="flex size-10 shrink-0 items-center justify-center rounded-md bg-neutral-100 text-neutral-900"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-5"><path d="m5 12 4 4L19 6" /></svg></span><div><h2 className="text-base font-semibold">Availability note</h2><p className="mt-1 text-sm text-neutral-600">Brief status or support information for members.</p></div></li>
          </ul>
        </div>
        <div className="rounded-lg border border-neutral-200 bg-white p-6 sm:p-8">
          <h2 className="text-2xl font-semibold tracking-tight">Sign in</h2>
          <form className="mt-6 grid gap-5">
            <div><label htmlFor="login-split-context-email" className="block text-sm font-medium text-neutral-900">Email</label><input id="login-split-context-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-context-password" className="block text-sm font-medium text-neutral-900">Password</label><input id="login-split-context-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>
            <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>
            <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 border-t border-neutral-200 pt-6 text-sm text-neutral-500">Hint about which account to use for access.</p>
        </div>
      </div>
    </section>
  )
}

Pattern notes

When to use: Use when users need context about their account before entering credentials. Pick login-centered-card when sign-in needs no explanation. Variations: turn rows into access benefits, service status notes, or support instructions.
Hierarchy: Context leads with a 30px semibold section heading, 18px lede and three 16px item titles. The card title is 24px, followed by Email and Password, a recovery link and full-width Sign in. A 14px hint sits below a top hairline. Slots: eyebrow up to 5 words, headline up to 8, lede up to 20, item descriptions up to 14.
Responsive: Below 1024px the context stacks above the form with a 48px gap; rows remain one column. At 640px vertical padding increases to 96px, card padding to 32px and context heading to 36px. The card stays full width within its grid column.
Layout: A 1152px max-w-6xl container with 24px gutters and 64px vertical padding, 96px from 640px. From 1024px the grid is 1.4fr/1fr with a 64px gap and centred alignment. The left column has an eyebrow, heading, lede and three hairline-separated rows with 40px icon tiles and 16px gaps. The right card uses 24px padding, 32px from 640px, and 20px form gaps.
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. Icon tiles are decorative. No selected or disabled states are shown.

Desktop wireframe

┌──────────────────────────────────────────────────────────┐
│Eyebrow                          ┌─────────────────────┐  │
│Context headline                 │ Sign-in title       │  │
│Lede                             │ Email               │  │
│                                 │ Password            │  │
│Icon  Access summary             │ [Forgot password?]  │  │
│──────────────────────────       │ [Sign in          ] │  │
│Icon  Account benefit            ├─────────────────────┤  │
│──────────────────────────       │ Account hint        │  │
│Icon  Availability note          └─────────────────────┘  │
└──────────────────────────────────────────────────────────┘

View all

Login — Context column beside form

Pattern notes

Login — Account picker with credential pane

Login — Card over full-bleed media

Login — Centred card

Login — Context column beside form

Pattern notes

More in Login

Login — Account picker with credential pane

Login — Card over full-bleed media

Login — Centred card