Features — Accordion beside media

Four expandable feature descriptions sit beside one shared media placeholder. Use it to keep detailed explanations compact while retaining visual context.

ReactHTML

1440 × 900

Open in new tab

Component.tsx80 lines

export default function FeaturesAccordionMedia() {
  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>
        <div className="mt-12 grid gap-12 lg:grid-cols-12 lg:gap-8">
          <div className="border-t border-neutral-200 lg:col-span-5">
            <details name="features-accordion-media" open className="group border-b border-neutral-200">
              <summary className="flex cursor-pointer list-none items-center justify-between gap-6 py-5 text-base font-semibold focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 [&::-webkit-details-marker]:hidden">
                Title for the main capability
                <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-5 shrink-0 transition-transform group-open:rotate-180">
                  <path d="m6 9 6 6 6-6" />
                </svg>
              </summary>
              <div className="pb-5">
                <p className="text-base text-pretty text-neutral-600">Explain the main capability in two sentences. Describe the detail readers should look for in the shared visual.</p>
                <div className="mt-4">
                  <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 capability</a>
                </div>
              </div>
            </details>
            <details name="features-accordion-media" className="group border-b border-neutral-200">
              <summary className="flex cursor-pointer list-none items-center justify-between gap-6 py-5 text-base font-semibold focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 [&::-webkit-details-marker]:hidden">
                Title for a simpler workflow
                <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-5 shrink-0 transition-transform group-open:rotate-180">
                  <path d="m6 9 6 6 6-6" />
                </svg>
              </summary>
              <div className="pb-5">
                <p className="text-base text-pretty text-neutral-600">Describe the workflow this feature supports. Explain where it removes an unnecessary step.</p>
                <div className="mt-4">
                  <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>
            </details>
            <details name="features-accordion-media" className="group border-b border-neutral-200">
              <summary className="flex cursor-pointer list-none items-center justify-between gap-6 py-5 text-base font-semibold focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 [&::-webkit-details-marker]:hidden">
                Title for a supporting tool
                <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-5 shrink-0 transition-transform group-open:rotate-180">
                  <path d="m6 9 6 6 6-6" />
                </svg>
              </summary>
              <div className="pb-5">
                <p className="text-base text-pretty text-neutral-600">Name the supporting tool and the task it helps complete. State what readers need to use it.</p>
                <div className="mt-4">
                  <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 tool</a>
                </div>
              </div>
            </details>
            <details name="features-accordion-media" className="group border-b border-neutral-200">
              <summary className="flex cursor-pointer list-none items-center justify-between gap-6 py-5 text-base font-semibold focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 [&::-webkit-details-marker]:hidden">
                Title for a clearer outcome
                <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-5 shrink-0 transition-transform group-open:rotate-180">
                  <path d="m6 9 6 6 6-6" />
                </svg>
              </summary>
              <div className="pb-5">
                <p className="text-base text-pretty text-neutral-600">Describe the outcome that ties these capabilities together. Add a detail that helps readers assess the result.</p>
                <div className="mt-4">
                  <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>
            </details>
          </div>
          <div role="img" aria-label="Image placeholder: shared overview of the capabilities" className="flex aspect-[4/3] items-center justify-center rounded-lg bg-neutral-100 text-neutral-400 lg:col-span-6 lg:col-start-7">
            <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>
      </div>
    </section>
  )
}

Pattern notes

When to use: Use for detailed capabilities with one stable shared image. Choose features-media-list when all descriptions should remain visible. Variations: start a different item open, remove panel links, or use a video placeholder. The media does not change when a detail opens.
Hierarchy: The section heading is 30px text-3xl semibold with tracking-tight and balanced wrapping, rising to 36px text-4xl at 640px. Read the heading and 18px introduction before four 16px semibold feature titles. The first 16px neutral-600 answer and its link are visible on entry. Slots: eyebrow 4 words, heading 8, intro 24, title 6, answer 35, link 3.
Responsive: Below 1024px the accordion precedes the image with a 48px gap. At 1024px it changes to the 5/12 and 6/12 columns with one empty grid column between them. The media remains 4:3. 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. A left max-w-2xl introduction precedes the body by 48px. At 1024px a 12-column grid with gap-8 32px places the list in columns 1-5 and the top-aligned 4:3 media in columns 7-12. Four details items have 1px dividers, 20px summary padding, a 20px chevron and 24px text/icon gap. Panels have 20px bottom padding and a link 16px under the body.
States: Native details controls hide the default marker. Every summary shows a 2px neutral-900 focus-visible outline offset 2px. Items share the pattern name, so one stays open where supported, with the first open initially. The chevron rotates 180 degrees with a 150ms transform transition. Links turn from neutral-900 to neutral-600 on hover and show a 2px neutral-900 focus-visible outline offset 2px. The media is static; no disabled or loading states.

Desktop wireframe

┌────────────────────────────────────────────────────────────┐
│ Eyebrow / Heading / Introduction                           │
│                                                            │
│ ┌───────────────────────┐     ┌────────────────────────┐   │
│ │ Main capability    ^  │     │                        │   │
│ │ Body                  │     │                        │   │
│ │ [Explore capability]  │     │         Image          │   │
│ ├───────────────────────┤     │                        │   │
│ │ Workflow detail    v  │     │                        │   │
│ ├───────────────────────┤     └────────────────────────┘   │
│ │ Supporting tool    v  │                                  │
│ ├───────────────────────┤                                  │
│ │ Outcome detail     v  │                                  │
│ └───────────────────────┘                                  │
└────────────────────────────────────────────────────────────┘

View all

Features — Alternating media rows
Layout tags: split,media,spacious
Features — Before and after panels
Layout tags: split,list,icons
Features — Bento grid
Layout tags: bento,media,icons

Features — Accordion beside media

Pattern notes

More in Features

Features — Alternating media rows

Features — Before and after panels

Features — Bento grid