FAQ — Accordion beside image

A tall image and caption sit beside an introduction and four expandable questions. Use it when a contextual visual supports the answers.

ReactHTML

1440 × 900

Open in new tab

Component.tsx62 lines

export default function FaqMediaAccordion() {
  return (
    <section className="bg-white text-neutral-900">
      <div className="mx-auto grid max-w-6xl gap-12 px-6 py-16 sm:py-24 lg:grid-cols-[5fr_7fr] lg:gap-16">
        <figure>
          <div role="img" aria-label="Image placeholder: contextual photo supporting the questions" className="flex aspect-[4/3] items-center justify-center rounded-lg bg-neutral-100 text-neutral-400 lg:aspect-[3/4]">
            <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-3 text-sm text-neutral-500">A short caption that explains the image context.</figcaption>
        </figure>
        <div>
          <div className="max-w-2xl">
            <h2 className="text-3xl font-semibold tracking-tight text-balance sm:text-4xl">Heading for common questions</h2>
            <p className="mt-4 text-lg text-pretty text-neutral-600">A short introduction that helps readers find the answer they need.</p>
          </div>
          <div className="mt-8 border-t border-neutral-200">
            <details name="faq-media-accordion" 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">
                Question about choosing an option
                <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>
              <p className="pb-5 text-base text-pretty text-neutral-600">Explain the difference between the available options. Give readers a useful criterion for making their choice.</p>
            </details>
            <details name="faq-media-accordion" 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">
                Question about getting started
                <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>
              <p className="pb-5 text-base text-pretty text-neutral-600">Describe the first step and what readers need to prepare. Explain how they know they are ready to begin.</p>
            </details>
            <details name="faq-media-accordion" 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">
                Question about what is included
                <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>
              <p className="pb-5 text-base text-pretty text-neutral-600">Name the main inclusions and the limits that affect the decision. Keep the explanation focused on what readers receive.</p>
            </details>
            <details name="faq-media-accordion" 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">
                Question about finding more help
                <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>
              <p className="pb-5 text-base text-pretty text-neutral-600">Point readers to the next source of help. Say which questions belong there and what information to include.</p>
            </details>
          </div>
        </div>
      </div>
    </section>
  )
}

Pattern notes

When to use: Use when one visual provides useful context for common questions. Choose faq-sidebar-accordion when contact details are more useful than an image. Variations: use a video placeholder, move the image to the right, or remove the caption.
Hierarchy: The section heading is 30px text-3xl semibold with tracking-tight and balanced wrapping, rising to 36px text-4xl at 640px. The image and caption introduce context; read the 18px lede and four 16px semibold questions next. The first 16px neutral-600 answer is visible. Slots: caption 12 words, heading 8, lede 24, question 10, answer 40.
Responsive: Below 1024px the figure appears first with a 4:3 placeholder, then the intro and accordion after 48px. At 1024px the 5:7 columns and 64px gap apply, and the image becomes 3:4. Heading size and section 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 a grid-cols-[5fr_7fr] layout uses gap-16 64px and top alignment. A figure holds a 3:4 rounded-lg media placeholder and 14px caption 12px below. The other column holds the heading, lede 16px below and a four-item top-bordered accordion after 32px. Summaries have 20px vertical padding, 20px chevrons and 24px gaps; answers have 20px bottom padding.
States: Native details controls hide the default marker. Every summary shows a 2px neutral-900 focus-visible outline offset 2px. Questions share one name, with the first open initially. Chevrons rotate 180 degrees with a 150ms transition. The image and caption are static. There are no selected, disabled or loading states.

Desktop wireframe

┌────────────────────────────────────────────────────────────┐
│ ┌───────────────────────┐    Heading for questions         │
│ │                       │    Short introduction            │
│ │                       │                                  │
│ │                       │    ┌────────────────────────┐    │
│ │         Image         │    │ Main question       ^  │    │
│ │                       │    │ Answer                 │    │
│ │                       │    ├────────────────────────┤    │
│ │                       │    │ Starting question   v  │    │
│ │                       │    ├────────────────────────┤    │
│ └───────────────────────┘    │ Included details    v  │    │
│ Image caption                ├────────────────────────┤    │
│                              │ More help           v  │    │
│                              └────────────────────────┘    │
└────────────────────────────────────────────────────────────┘

View all

FAQ — Accordion
Layout tags: centered,list,spacious
FAQ — Accordion beside intro
Layout tags: asymmetric,list
FAQ — Answer spotlight with contents
Layout tags: sidebar,spacious

FAQ — Accordion beside image

Pattern notes

More in FAQ

FAQ — Accordion

FAQ — Accordion beside intro

FAQ — Answer spotlight with contents