Sign-up — Referral entry with benefit summary

An invitation-code field and email form sit opposite a concise referral summary. Use when a code unlocks a specific account offer.

ReactHTML

1440 × 900

Open in new tab

Component.tsx107 lines

export default function SignupReferralCode() {
  return (
    <section className="bg-white text-neutral-900">
      <div className="mx-auto max-w-6xl px-6 py-16 sm:py-24">
        <div className="grid items-start gap-12 md:grid-cols-2">
          <form>
            <div>
              <h1 className="text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
                Join with a referral
              </h1>
              <p className="mt-4 max-w-2xl text-lg text-pretty text-neutral-600">
                Explain how a referral changes the account setup.
              </p>
            </div>
            <div className="mt-8 space-y-6">
              <div className="min-w-0">
                <label
                  htmlFor="signup-referral-code-referral"
                  className="block text-sm font-medium"
                >
                  Referral code
                </label>
                <input
                  id="signup-referral-code-referral"
                  name="referral"
                  type="text"
                  placeholder="ABCD-1234"
                  required
                  aria-describedby="signup-referral-code-referral-hint"
                  className="mt-2 h-10 w-full min-w-0 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"
                />
                <p
                  id="signup-referral-code-referral-hint"
                  className="mt-2 text-sm text-neutral-600"
                >
                  Enter the code shared by an existing member.
                </p>
              </div>
              <div className="min-w-0">
                <label
                  htmlFor="signup-referral-code-email"
                  className="block text-sm font-medium"
                >
                  Email
                </label>
                <input
                  id="signup-referral-code-email"
                  name="email"
                  type="email"
                  placeholder="name@example.com"
                  required
                  autoComplete="email"
                  className="mt-2 h-10 w-full min-w-0 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>
            <div className="mt-6">
              <button
                type="submit"
                className="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"
              >
                Continue
              </button>
            </div>
            <p className="mt-4 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"
              >
                Continue without a code
              </a>
            </p>
          </form>
          <aside className="rounded-lg border border-neutral-200 p-6">
            <p className="text-sm font-medium text-neutral-500">
              Referral overview
            </p>
            <h2 className="mt-3 text-lg font-semibold">
              Account benefit title
            </h2>
            <p className="mt-3 text-sm text-neutral-600">
              Short explanation of the benefit granted by an eligible referral.
            </p>
            <dl className="mt-6 space-y-4">
              <div className="flex justify-between gap-4">
                <dt className="text-sm text-neutral-600">Offer duration</dt>
                <dd className="text-sm font-medium">30 days</dd>
              </div>
              <div className="flex justify-between gap-4">
                <dt className="text-sm text-neutral-600">Account type</dt>
                <dd className="text-sm font-medium">Individual</dd>
              </div>
            </dl>
            <p className="mt-6 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"
              >
                Offer terms
              </a>
            </p>
          </aside>
        </div>
      </div>
    </section>
  )
}

Pattern notes

When to use: Use when a referral code changes registration eligibility or terms. Choose signup-invite-accept for an invitation already identified by a link. Variations: show a referrer name, replace duration with credit, or add an optional organization field.
Hierarchy: The h1 explains referral access, then code and email precede Continue. The referral summary confirms eligibility context. Limit h1 to 6 words, lede 16, benefit title 5 and explanation 18.
Responsive: Below 768px the benefit summary follows the entry form. Label/value pairs can wrap without forcing the column wider. Heading grows at 640px.
Layout: White section with a 1152px max-w-6xl container, 24px side gutters and 64px vertical padding, increasing to 96px at 640px. A 48px-gap two-column layout starts at md. The left form uses 24px-separated fields and a primary action. The right p-6 card contains offer copy and two definition rows.
States: Links and controls have a 2px neutral-900 keyboard-focus outline offset by 2px. Filled actions change to neutral-700 on hover, outlined actions to neutral-50, and underlined links to neutral-600. Native form fields retain browser validation; controls describe structure and need application integration for persistence or navigation.

Desktop wireframe

┌──────────────────────────────────────────────────────────────┐
│Join with a referral            Referral overview             │
│Lede                            Account benefit title         │
│Referral code                   Benefit description           │
│[ABCD-1234                   ]  Offer duration   30 days      │
│Email                           Account type  Individual      │
│[name@example.com            ]  [Offer terms]                 │
│[Continue] [Without a code]                                   │
└──────────────────────────────────────────────────────────────┘

View all

Sign-up — Accept an invitation
Layout tags: centered,form,compact
Sign-up — Benefits panel beside form
Layout tags: split,form,icons
Sign-up — Centred card with providers
Layout tags: centered,form,compact

Sign-up — Referral entry with benefit summary

Pattern notes

More in Sign-up

Sign-up — Accept an invitation

Sign-up — Benefits panel beside form

Sign-up — Centred card with providers