FAQ — Two-column accordion

Eight independent questions form two separate accordion columns beneath an introduction and help note. Use it for a broad list with several answers open at once.

ReactHTML

1440 × 900

Open in new tab

Component.tsx99 lines

export default function FaqTwoColumnAccordion() {
  return (
    <section className="bg-white text-neutral-900">
      <div className="mx-auto max-w-6xl px-6 py-16 sm:py-24">
        <div className="grid gap-8 lg:grid-cols-[2fr_1fr] lg:gap-12">
          <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>
          <aside className="rounded-lg border border-neutral-200 bg-neutral-50 p-6" aria-label="Additional support">
            <h3 className="text-base font-semibold">Label for additional support</h3>
            <p className="mt-2 text-sm text-pretty text-neutral-600">A short note that tells readers where to ask a question not covered here.</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">Contact support</a>
            </div>
          </aside>
        </div>
        <div className="mt-12 grid gap-8 md:grid-cols-2 md:gap-16">
          <div>
            <details 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 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 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 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 expected timing
                <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 how long the process usually takes. Name the point at which readers can expect the next update.</p>
            </details>
          </div>
          <div>
            <details 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 managing access
                <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 who can access the result and where permissions are managed. Include the detail readers need before inviting someone.</p>
            </details>
            <details 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 settings
                <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 where readers can review their current settings. Explain when a change takes effect and how to confirm it.</p>
            </details>
            <details 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 past records
                <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 where readers can find earlier records. Name the details that help them identify the item they need.</p>
            </details>
            <details 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 for eight questions readers may expand in any combination. Choose faq-sidebar-accordion for one open answer or faq-grouped-topics for labelled topic cards. Variations: add topic headings above columns, start one answer open, or reduce to six questions.
Hierarchy: The section heading is 30px text-3xl semibold with tracking-tight and balanced wrapping, rising to 36px text-4xl at 640px. Read the 18px intro and the note label, 14px sentence and support link, then eight 16px semibold questions. Answers are 16px neutral-600. Slots: heading 8 words, lede 24, note label 5, note 20, question 10, answer 35, link 3.
Responsive: Below 768px the four-item lists stack with a 32px gap. At 768px they sit side by side with 64px gap without coupling row heights. At 1024px the note moves beside the intro. Heading size and vertical 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 header grid uses a 2:1 split and 48px gap at 1024px; the intro is max-w-2xl and the neutral-50 rounded-lg note card has a 1px border and p-6. Two independent four-item column lists follow by 48px with gap-16 64px from 768px. Each details row has a 1px bottom border, 20px summary and answer-bottom padding, a 20px chevron and 24px gap.
States: Native details controls hide the default marker. Every summary shows a 2px neutral-900 focus-visible outline offset 2px. Every question is independent, has no shared name, and starts closed. The chevron rotates 180 degrees with a 150ms transition. Links turn from neutral-900 to neutral-600 on hover and show a 2px neutral-900 focus-visible outline offset 2px. There are no selected, disabled or loading states.

Desktop wireframe

┌────────────────────────────────────────────────────────────┐
│ Heading / Introduction        ┌───────────────────────┐    │
│                               │ Help note / [Support] │    │
│                               └───────────────────────┘    │
│                                                            │
│ ┌─────────────────────────┐   ┌────────────────────────┐   │
│ │ Getting started      v  │   │ Managing access     v  │   │
│ ├─────────────────────────┤   ├────────────────────────┤   │
│ │ Included details     v  │   │ Changing settings   v  │   │
│ ├─────────────────────────┤   ├────────────────────────┤   │
│ │ Choosing an option   v  │   │ Finding records     v  │   │
│ ├─────────────────────────┤   ├────────────────────────┤   │
│ │ Timing question      v  │   │ Getting help        v  │   │
│ └─────────────────────────┘   └────────────────────────┘   │
└────────────────────────────────────────────────────────────┘

View all

FAQ — Accordion
Layout tags: centered,list,spacious
FAQ — Accordion beside image
Layout tags: asymmetric,media,list
FAQ — Accordion beside intro
Layout tags: asymmetric,list

FAQ — Two-column accordion

Pattern notes

More in FAQ

FAQ — Accordion

FAQ — Accordion beside image

FAQ — Accordion beside intro