Features — Alternating media rows

Three spacious feature rows alternate a media placeholder and a detailed text block. Use it for benefits that each need their own visual and supporting checklist.

ReactHTML

1440 × 900

Open in new tab

Component.tsx126 lines

export default function FeaturesAlternatingRows() {
  return (
    <section className="bg-white text-neutral-900">
      <div className="mx-auto max-w-6xl px-6 py-16 sm:py-24">
        <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-16 grid gap-16 lg:gap-24">
          <li className="grid items-center gap-8 lg:grid-cols-2 lg:gap-16">
            <div role="img" aria-label="Image placeholder: visual explaining the primary capability" 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>
              <p className="text-sm font-medium text-neutral-500">Primary capability</p>
              <h3 className="mt-3 text-2xl font-semibold tracking-tight text-balance">Title that explains the main benefit</h3>
              <p className="mt-4 text-base text-pretty text-neutral-600">Describe the main capability and the problem it addresses. Add one detail that helps readers picture how they would use it.</p>
              <ul role="list" className="mt-6 grid gap-3 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>Name the essential capability</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 supporting detail</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 practical result</span>
                </li>
              </ul>
              <div className="mt-6">
                <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 benefit</a>
              </div>
            </div>
          </li>
          <li className="grid items-center gap-8 lg:grid-cols-2 lg:gap-16">
            <div role="img" aria-label="Image placeholder: visual explaining the supporting workflow" className="flex aspect-[4/3] items-center justify-center rounded-lg bg-neutral-100 text-neutral-400 lg:order-last">
              <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>
              <p className="text-sm font-medium text-neutral-500">Supporting workflow</p>
              <h3 className="mt-3 text-2xl font-semibold tracking-tight text-balance">Title that clarifies the next step</h3>
              <p className="mt-4 text-base text-pretty text-neutral-600">Explain the workflow this capability supports. Show how it connects the first action to a useful next step.</p>
              <ul role="list" className="mt-6 grid gap-3 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>Name 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>Describe the choice they control</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 what happens next</span>
                </li>
              </ul>
              <div className="mt-6">
                <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 workflow</a>
              </div>
            </div>
          </li>
          <li className="grid items-center gap-8 lg:grid-cols-2 lg:gap-16">
            <div role="img" aria-label="Image placeholder: visual explaining the expected outcome" 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>
              <p className="text-sm font-medium text-neutral-500">Expected outcome</p>
              <h3 className="mt-3 text-2xl font-semibold tracking-tight text-balance">Title that names the lasting result</h3>
              <p className="mt-4 text-base text-pretty text-neutral-600">Describe the result readers can expect after using this capability. Add the detail that makes the outcome easy to assess.</p>
              <ul role="list" className="mt-6 grid gap-3 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>Name the measure of success</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 useful follow-up</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 assurance that matters</span>
                </li>
              </ul>
              <div className="mt-6">
                <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 outcome</a>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </section>
  )
}

Pattern notes

When to use: Use for three substantial benefits with distinct visuals. Choose features-icon-grid for short descriptions or features-media-list for one shared image. Variations: use two rows, shorten each checklist, or replace a text link with a secondary action.
Hierarchy: The section heading is 30px text-3xl semibold with tracking-tight and balanced wrapping, rising to 36px text-4xl at 640px. Read each image and then its benefit title, body and checklist. Titles are text-2xl semibold, body and checks text-base neutral-600, eyebrows text-sm neutral-500. Slots: intro 24 words, row eyebrow 4, title 7, body 30, check 8, link 3.
Responsive: Below 1024px every row stacks image first and text second with gap-8 32px. At 1024px rows have equal columns and gap-16 64px; only the second media uses lg:order-last. Rows separate by 64px below 1024px and 96px above.
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 max-w-2xl left intro precedes three rows by 64px. Rows use 64px gaps, increasing to 96px lg:gap-24. Each row is a centred two-column grid at 1024px with a 64px gap; media is 4:3. Each text block holds an eyebrow, 24px title, 16px body, three 20px check-icon list items and a text link.
States: Links turn from neutral-900 to neutral-600 on hover and show a 2px neutral-900 focus-visible outline offset 2px. Media and checklists are static. No selected, disabled or loading states.

Desktop wireframe

┌────────────────────────────────────────────────────────────┐
│ Eyebrow / Heading / Introduction                           │
│                                                            │
│ ┌───────────────────────┐  Feature eyebrow                 │
│ │         Image         │  Benefit title                   │
│ │                       │  Body / check list               │
│ └───────────────────────┘  [Explore benefit]               │
│                                                            │
│ Capability eyebrow        ┌───────────────────────┐        │
│ Capability title          │         Image         │        │
│ Body / check list         │                       │        │
│ [Explore capability]      └───────────────────────┘        │
│                                                            │
│ ┌───────────────────────┐  Outcome eyebrow                 │
│ │         Image         │  Outcome title                   │
│ │                       │  Body / check list               │
│ └───────────────────────┘  [Explore outcome]               │
└────────────────────────────────────────────────────────────┘

View all

Features — Accordion beside media
Layout tags: asymmetric,list,media
Features — Before and after panels
Layout tags: split,list,icons
Features — Bento grid
Layout tags: bento,media,icons

Features — Alternating media rows

Pattern notes

More in Features

Features — Accordion beside media

Features — Before and after panels

Features — Bento grid