Features — Before and after panels

Two parallel panels compare a starting state and an improved state. Use it to make the change in a workflow easy to scan.

ReactHTML

1440 × 900

Open in new tab

Component.tsx78 lines

export default function FeaturesComparisonPanels() {
  return (
    <section className="bg-white text-neutral-900">
      <div className="mx-auto max-w-6xl px-6 py-16 sm:py-24">
        <div className="mx-auto max-w-2xl text-center">
          <p className="text-sm font-medium text-neutral-500">Eyebrow for the capabilities</p>
          <h2 className="mt-4 text-3xl font-semibold tracking-tight text-balance sm:text-4xl">Heading that explains the change</h2>
          <p className="mt-4 text-lg text-pretty text-neutral-600">A short introduction that connects these capabilities to the outcome readers need.</p>
        </div>
        <div className="mt-12 grid gap-6 md:grid-cols-2">
          <div className="rounded-lg border border-neutral-200 bg-neutral-50 p-6">
            <p className="text-sm font-medium text-neutral-500">Before</p>
            <h3 className="mt-3 text-lg font-semibold">Title for the starting state</h3>
            <ul role="list" className="mt-6 grid gap-4 text-base text-neutral-600">
              <li className="flex items-start gap-3">
                <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="mt-0.5 size-5 shrink-0 text-neutral-900">
                  <path d="m6 6 12 12M6 18 18 6" />
                </svg>
                <span>Describe a repeated manual step</span>
              </li>
              <li className="flex items-start gap-3">
                <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="mt-0.5 size-5 shrink-0 text-neutral-900">
                  <path d="m6 6 12 12M6 18 18 6" />
                </svg>
                <span>Name the information that is hard to find</span>
              </li>
              <li className="flex items-start gap-3">
                <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="mt-0.5 size-5 shrink-0 text-neutral-900">
                  <path d="m6 6 12 12M6 18 18 6" />
                </svg>
                <span>State the choice that adds friction</span>
              </li>
              <li className="flex items-start gap-3">
                <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="mt-0.5 size-5 shrink-0 text-neutral-900">
                  <path d="m6 6 12 12M6 18 18 6" />
                </svg>
                <span>Describe the limit on the result</span>
              </li>
            </ul>
          </div>
          <div className="rounded-lg border border-neutral-900 bg-white p-6">
            <p className="text-sm font-medium text-neutral-500">After</p>
            <h3 className="mt-3 text-lg font-semibold">Title for the improved state</h3>
            <ul role="list" className="mt-6 grid gap-4 text-base text-neutral-600">
              <li className="flex items-start gap-3">
                <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="mt-0.5 size-5 shrink-0 text-neutral-900">
                  <path d="M5 12l4 4L19 6" />
                </svg>
                <span>Describe the step readers can simplify</span>
              </li>
              <li className="flex items-start gap-3">
                <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="mt-0.5 size-5 shrink-0 text-neutral-900">
                  <path d="M5 12l4 4L19 6" />
                </svg>
                <span>Name the information they can see clearly</span>
              </li>
              <li className="flex items-start gap-3">
                <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="mt-0.5 size-5 shrink-0 text-neutral-900">
                  <path d="M5 12l4 4L19 6" />
                </svg>
                <span>State the choice that becomes easier</span>
              </li>
              <li className="flex items-start gap-3">
                <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="mt-0.5 size-5 shrink-0 text-neutral-900">
                  <path d="M5 12l4 4L19 6" />
                </svg>
                <span>Describe the result they can assess</span>
              </li>
            </ul>
          </div>
        </div>
        <div className="mt-8 text-center">
          <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">Explore the change</a>
        </div>
      </div>
    </section>
  )
}

Pattern notes

When to use: Use for a clear before/after comparison of a workflow. Choose features-icon-grid for unrelated benefits. Variations: compare two approaches, add a brief summary under each panel, or reduce to three rows.
Hierarchy: The section heading is 30px text-3xl semibold with tracking-tight and balanced wrapping, rising to 36px text-4xl at 640px. Read the header then the Before and After labels, 18px semibold titles and paired 16px neutral-600 list rows. Cross and check icons reinforce the named states. Slots: eyebrow 4 words, heading 8, lede 24, panel title 7, row 10, link 3.
Responsive: Panels stack below 768px and use equal md:grid-cols-2 columns from 768px. Lists keep their 20px icons and 12px gaps. The heading and vertical padding step at 640px.
Layout: A white section uses a 1152px max-w-6xl container, 24px px-6 side padding, and 64px py-16 vertical padding, rising to 96px sm:py-24 at 640px. A centred max-w-2xl intro precedes two equal panels by 48px with gap-6 24px. Both use rounded-lg, 1px borders and p-6 24px. Before uses neutral-50 and neutral-200 border; After uses white and neutral-900 border. Each holds a 14px label, an 18px title 12px later, and a four-item ul after 24px. Rows have 16px gaps and 20px icons beside text with 12px gaps. A centred link follows by 32px.
States: Links turn from neutral-900 to neutral-600 on hover and show a 2px neutral-900 focus-visible outline offset 2px. Both panels are static. State labels and different stroke icons remain legible in forced colors. There are no selectable, disabled or loading controls.

Desktop wireframe

┌────────────────────────────────────────────────────────────┐
│                 Eyebrow / Heading                          │
│                 Short introduction                         │
│                                                            │
│ ┌─────────────────────────┐ ┌─────────────────────────┐    │
│ │ Before                  │ │ After                   │    │
│ │ Starting state title    │ │ Improved state title    │    │
│ │ x  Limitation row       │ │ Check  Benefit row      │    │
│ │ x  Friction row         │ │ Check  Workflow row     │    │
│ │ x  Constraint row       │ │ Check  Outcome row      │    │
│ │ x  Missing detail       │ │ Check  Assurance row    │    │
│ └─────────────────────────┘ └─────────────────────────┘    │
│                  [Explore the change]                      │
└────────────────────────────────────────────────────────────┘

View all

Features — Accordion beside media
Layout tags: asymmetric,list,media
Features — Alternating media rows
Layout tags: split,media,spacious
Features — Bento grid
Layout tags: bento,media,icons

Features — Before and after panels

Pattern notes

More in Features

Features — Accordion beside media

Features — Alternating media rows

Features — Bento grid