FAQ — Accordion

A centred heading and introduction above five expandable question rows. Use it to answer common questions while keeping the section easy to scan.

ReactHTML

1440 × 900

Open in new tab

Component.tsx49 lines

export default function FaqAccordion() {
  return (
    <section className="bg-white text-neutral-900">
      <div className="mx-auto max-w-3xl px-6 py-16 sm:py-24">
        <div className="text-center">
          <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-12 border-t border-neutral-200">
          <details name="faq-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 the main benefit
              <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 main benefit in two or three sentences. Give readers enough detail to decide whether it fits their needs.</p>
          </details>
          <details name="faq-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 before they begin. Link to a longer guide if the process needs more explanation.</p>
          </details>
          <details name="faq-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 any limits that affect the decision. Keep the answer focused on the question.</p>
          </details>
          <details name="faq-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 changing a choice
              <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 when a choice can change and what happens afterward. Include any timing or restrictions readers should know.</p>
          </details>
          <details name="faq-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 they can expect from it.</p>
          </details>
        </div>
      </div>
    </section>
  )
}

Pattern notes

When to use: Use for short answers to common questions with one answer visible at a time. Choose faq-question-rows or faq-qa-grid when all answers need comparing. Variations: open a different first question, group rows under topic headings, or add a help link below the list.
Hierarchy: Read the 30px semibold heading, 18px introduction, then the five 16px semibold questions. The first answer is visible at entry; the others reveal 16px neutral-600 supporting text. Slots: heading up to 8 words, introduction up to 20, questions up to 10, answers up to 45.
Responsive: The rows remain a single column at every width. At 640px vertical padding increases from 64px to 96px and the heading from 30px to 36px. Questions wrap while the chevron keeps its 20px width and 24px gap.
Layout: One section with a centred 768px (max-w-3xl) container, 24px side padding and 64px vertical padding, increasing to 96px at 640px. A centred heading and introduction precede five full-width details rows by 48px. Each row has 20px vertical summary padding, a 20px chevron and a 1px neutral-200 divider. Answers have 20px bottom padding.
States: Native details and summary controls share one name, so opening a question closes the previous one. The first is open by default. The chevron rotates 180 degrees while open with a 150ms transition. Keyboard focus shows a 2px neutral-900 outline offset 2px.

Desktop wireframe

┌──────────────────────────────────────────────────────────┐
│             Heading for common questions                 │
│                Short introduction                        │
│                                                          │
├──────────────────────────────────────────────────────────┤
│ Question about the main benefit                      ^   │
│ Explain the main benefit in two or three sentences.      │
├──────────────────────────────────────────────────────────┤
│ Question about getting started                       v   │
├──────────────────────────────────────────────────────────┤
│ Question about what is included                      v   │
├──────────────────────────────────────────────────────────┤
│ Question about changing a choice                     v   │
├──────────────────────────────────────────────────────────┤
│ Question about finding more help                     v   │
└──────────────────────────────────────────────────────────┘

View all

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

FAQ — Accordion

Pattern notes

More in FAQ

FAQ — Accordion beside image

FAQ — Accordion beside intro

FAQ — Answer spotlight with contents