Features — List beside media

An icon-led feature list and introduction sit beside one large image. Use it when one screenshot supports several related capabilities.

ReactHTML

1440 × 900

Open in new tab

Component.tsx60 lines

export default function FeaturesMediaList() {
  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-2 lg:gap-16">
        <div className="max-w-lg">
          <div className="max-w-2xl">
            <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 names the key benefits</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>
          <ul role="list" className="mt-8 grid gap-6">
            <li className="flex items-start gap-4">
              <span aria-hidden="true" className="flex size-10 items-center justify-center rounded-md bg-neutral-100 text-neutral-900 shrink-0">
                <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="M12 3v18M3 12h18" />
                </svg>
              </span>
              <div>
                <h3 className="text-base font-semibold">Title for the main benefit</h3>
                <p className="mt-1 text-base text-pretty text-neutral-600">Explain the core benefit in one sentence.</p>
              </div>
            </li>
            <li className="flex items-start gap-4">
              <span aria-hidden="true" className="flex size-10 items-center justify-center rounded-md bg-neutral-100 text-neutral-900 shrink-0">
                <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="M4 5h16v14H4zM8 9h8M8 13h5" />
                </svg>
              </span>
              <div>
                <h3 className="text-base font-semibold">Title for a useful capability</h3>
                <p className="mt-1 text-base text-pretty text-neutral-600">Describe the capability that supports the main outcome.</p>
              </div>
            </li>
            <li className="flex items-start gap-4">
              <span aria-hidden="true" className="flex size-10 items-center justify-center rounded-md bg-neutral-100 text-neutral-900 shrink-0">
                <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="M4 7h7v10H4zM15 7h5v10h-5M11 12h4" />
                </svg>
              </span>
              <div>
                <h3 className="text-base font-semibold">Title for a clearer workflow</h3>
                <p className="mt-1 text-base text-pretty text-neutral-600">Name the step this feature makes easier.</p>
              </div>
            </li>
          </ul>
          <div className="mt-8">
            <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 capabilities</a>
          </div>
        </div>
        <div role="img" aria-label="Image placeholder: product screenshot showing the listed capabilities" className="flex aspect-[4/3] items-center justify-center rounded-lg bg-neutral-100 text-neutral-400">
          <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>
      </div>
    </section>
  )
}

Pattern notes

When to use: Use when a single image can explain several related features. Choose features-accordion-media for longer expandable descriptions or features-alternating-rows for separate visuals. Variations: put media on the left, add a fourth list item, or use a secondary action below the list.
Hierarchy: The section heading is 30px text-3xl semibold with tracking-tight and balanced wrapping, rising to 36px text-4xl at 640px. Read the eyebrow, heading and 18px lede, then three 16px semibold feature titles and 16px neutral-600 bodies. The image is supporting context. Slots: eyebrow 4 words, heading 8, lede 24, title 6, body 20, link 3.
Responsive: Below 1024px the text precedes the image with a 48px gap. From 1024px two equal columns align vertically with a 64px gap. The list keeps icon/text rows at every width; type and 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. At 1024px the container is an equal two-column grid with 64px gap-16 and centred alignment. A max-w-lg 512px text column holds the intro, a three-item ul 32px below, and a link 32px later. List rows have 24px gap-6; each is a 40px icon tile beside a text block with a 16px gap and 4px title-to-body space. Media is 4:3 and rounded-lg.
States: Links turn from neutral-900 to neutral-600 on hover and show a 2px neutral-900 focus-visible outline offset 2px. The list, icons and media are static. No selected, disabled or loading states.

Desktop wireframe

┌────────────────────────────────────────────────────────────┐
│ Eyebrow                    ┌─────────────────────────┐     │
│ Heading for capabilities   │                         │     │
│ Short introduction         │                         │     │
│                            │                         │     │
│ Icon   Benefit / Body      │          Image          │     │
│ Icon   Workflow / Body     │                         │     │
│ Icon   Detail / Body       │                         │     │
│                            │                         │     │
│ [Explore capabilities]     └─────────────────────────┘     │
└────────────────────────────────────────────────────────────┘

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 — List beside media

Pattern notes

More in Features

Features — Accordion beside media

Features — Alternating media rows

Features — Before and after panels