Pricing — Annual price with a payment schedule

A large annual amount sits beside a three-step timeline of payment, reminder and renewal.

ReactHTML

1440 × 900

Component.tsx75 lines

export default function PricingAnnualPaymentSchedule() {
  return (
    <section className="bg-white text-neutral-900">
      <div className="mx-auto max-w-6xl px-6 py-16 sm:py-24">
        <header>
          <p className="text-sm font-medium text-neutral-500">Eyebrow</p>
          <h2 className="text-3xl font-semibold tracking-tight text-balance sm:text-4xl mt-3">
            One annual price with a clear schedule
          </h2>
          <p className="text-lg text-pretty text-neutral-600 mt-4 max-w-2xl">
            A short introduction that names the audience and the benefit.
          </p>
        </header>
        <div className="mt-10 grid gap-10 border-t border-neutral-200 pt-8 md:grid-cols-2">
          <div>
            <p className="text-sm font-medium text-neutral-500">
              Annual access
            </p>
            <p className="mt-4 text-5xl font-semibold tracking-tight">$228</p>
            <p className="text-base text-neutral-600 mt-3">
              Equivalent to $19 per month.
            </p>
            <a
              href="#"
              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 mt-6"
            >
              Choose annual access
            </a>
            <p className="text-sm text-neutral-600 mt-4">
              Access continues for twelve months.
            </p>
          </div>
          <div>
            <h3 className="text-lg font-semibold">Payment schedule</h3>
            <ol role="list" className="mt-6 space-y-6">
              <li className="flex items-start gap-4">
                <span className="flex size-8 shrink-0 items-center justify-center rounded-full border border-neutral-300 text-sm font-medium">
                  1
                </span>
                <div>
                  <h3 className="text-lg font-semibold">Today: $228</h3>
                  <p className="text-sm text-neutral-600 mt-1">
                    Your first twelve months begin.
                  </p>
                </div>
              </li>
              <li className="flex items-start gap-4">
                <span className="flex size-8 shrink-0 items-center justify-center rounded-full border border-neutral-300 text-sm font-medium">
                  2
                </span>
                <div>
                  <h3 className="text-lg font-semibold">Month 12: reminder</h3>
                  <p className="text-sm text-neutral-600 mt-1">
                    A short renewal notice arrives.
                  </p>
                </div>
              </li>
              <li className="flex items-start gap-4">
                <span className="flex size-8 shrink-0 items-center justify-center rounded-full border border-neutral-300 text-sm font-medium">
                  3
                </span>
                <div>
                  <h3 className="text-lg font-semibold">Year 2: $228</h3>
                  <p className="text-sm text-neutral-600 mt-1">
                    The same annual period renews.
                  </p>
                </div>
              </li>
            </ol>
          </div>
        </div>
      </div>
    </section>
  )
}

Pattern notes

When to use: Use when an annual commitment needs a clear renewal explanation. Pick a simple plan card for monthly billing. Variations: show a split-payment schedule, include a grace period, or replace the reminder step with a cancellation deadline.
Hierarchy: Read the annual price and monthly equivalent before the action and renewal sequence. Keep schedule titles under 5 words and explanations under 10. State both initial and renewal amounts explicitly.
Responsive: The payment schedule follows the annual price below 768px. Timeline rows remain horizontal internally with flexible text; the primary action wraps its label if needed.
Layout: A max-w-6xl section contains a bordered two-column region from 768px with a 40px gap and 32px top padding. The annual amount uses 48px semibold type. Schedule rows use 32px numbered circles and 16px horizontal gaps.
States: Links and buttons use neutral hover states and a 2px keyboard focus outline offset by 2px. Filled actions lighten from neutral-900 to neutral-700; outlined actions fill neutral-50. Informational regions remain static.

Desktop wireframe

┌──────────────────────────────────────────────────────────┐
│Eyebrow / Heading / Introduction                          │
│                                                          │
│Annual access                  Payment schedule           │
│$228                           (1) Today: $228            │
│Equivalent to $19 /month           Access starts          │
│[Choose annual access]         (2) Month 12: reminder     │
│Access note                        Renewal notice         │
│                               (3) Year 2: $228           │
│                                   Access renews          │
└──────────────────────────────────────────────────────────┘

View all

Pricing — Base plan with optional additions
Layout tags: stacked,grid,numbers
Pricing — Comparison table
Layout tags: table,numbers,compact
Pricing — Free access and a custom pricing form
Layout tags: asymmetric,form,numbers

Pricing — Annual price with a payment schedule

Pattern notes

More in Pricing

Pricing — Base plan with optional additions

Pricing — Comparison table

Pricing — Free access and a custom pricing form