Features — Paired media and shared capabilities

Two equal visual panels share one compact capability strip beneath their individual captions.

ReactHTML

1440 × 900

Component.tsx125 lines

export default function FeaturesPairedMediaSharedList() {
  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">
            Compare two parts of the experience
          </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-8 md:grid-cols-2">
          <figure>
            <div
              role="img"
              aria-label="Image placeholder: overview screen"
              className="flex aspect-[4/3] items-center justify-center rounded-lg bg-neutral-100 text-neutral-400 aspect-video"
            >
              <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>
            <figcaption className="mt-4">
              <h3 className="text-lg font-semibold">First view</h3>
              <p className="text-sm text-neutral-600 mt-2">
                Short explanation describing this part of the experience.
              </p>
            </figcaption>
          </figure>
          <figure>
            <div
              role="img"
              aria-label="Image placeholder: detail screen"
              className="flex aspect-[4/3] items-center justify-center rounded-lg bg-neutral-100 text-neutral-400 aspect-video"
            >
              <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>
            <figcaption className="mt-4">
              <h3 className="text-lg font-semibold">Second view</h3>
              <p className="text-sm text-neutral-600 mt-2">
                Short explanation describing this part of the experience.
              </p>
            </figcaption>
          </figure>
        </div>
        <ul
          role="list"
          className="mt-8 grid gap-4 border-t border-neutral-200 pt-6 sm:grid-cols-3"
        >
          <li className="flex items-center gap-3 text-sm text-neutral-600">
            <svg
              aria-hidden="true"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="1.5"
              strokeLinecap="round"
              strokeLinejoin="round"
              className="size-4"
            >
              <path d="m5 12 4 4L19 6" />
            </svg>
            Shared capability
          </li>
          <li className="flex items-center gap-3 text-sm text-neutral-600">
            <svg
              aria-hidden="true"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="1.5"
              strokeLinecap="round"
              strokeLinejoin="round"
              className="size-4"
            >
              <path d="m5 12 4 4L19 6" />
            </svg>
            Supporting detail
          </li>
          <li className="flex items-center gap-3 text-sm text-neutral-600">
            <svg
              aria-hidden="true"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="1.5"
              strokeLinecap="round"
              strokeLinejoin="round"
              className="size-4"
            >
              <path d="m5 12 4 4L19 6" />
            </svg>
            Useful assurance
          </li>
        </ul>
      </div>
    </section>
  )
}

Pattern notes

When to use: Use when two related screens or views share a common capability set. Pick alternating rows for a longer sequence. Variations: show overview and detail views, use two videos, or replace the capability strip with three measurable outcomes.
Hierarchy: The section heading frames the comparison; each visual then has a short title and explanation. Three shared capabilities close the section. Keep titles under 4 words, descriptions under 15 and shared labels under 4.
Responsive: Visual figures stack below 768px. The capability strip becomes three columns at 640px and stacks below it. Both media regions retain 16:9.
Layout: A max-w-6xl container places two visual figures in equal columns from 768px with a 32px gap. Each uses a 16:9 media region, 16px caption spacing and an 18px title. A shared list follows after 32px with a top border and 24px padding.
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                          │
│                                                          │
│┌──────────────────────────┐   ┌────────────────────────┐ │
││Image                     │   │Image                   │ │
│└──────────────────────────┘   └────────────────────────┘ │
│First view                        Second view             │
│Description                       Description             │
│                                                          │
│Check Capability   Check Detail   Check Assurance         │
└──────────────────────────────────────────────────────────┘

View all

Features — Accordion beside media
Layout tags: asymmetric,list,media
Features — Alternating media rows
Layout tags: split,media,spacious
Features — Before and after panels
Layout tags: split,list,icons

Features — Paired media and shared capabilities

Pattern notes

More in Features

Features — Accordion beside media

Features — Alternating media rows

Features — Before and after panels