FAQ — Grouped topic cards

Two topic cards each hold three independent expandable questions. Use it when a small FAQ naturally falls into two named groups.

ReactHTML

1440 × 900

Open in new tab

Component.tsx81 lines

export default function FaqGroupedTopics() {
  return (
    <section className="bg-white text-neutral-900">
      <div className="mx-auto max-w-6xl px-6 py-16 sm:py-24">
        <div className="mx-auto max-w-2xl text-center">
          <p className="text-sm font-medium text-neutral-500">Eyebrow for common questions</p>
          <h2 className="mt-4 text-3xl font-semibold tracking-tight text-balance sm:text-4xl">Heading for common questions</h2>
        </div>
        <div className="mt-12 grid gap-6 md:grid-cols-2">
          <div className="rounded-lg border border-neutral-200 bg-white p-6">
            <p className="text-sm font-medium text-neutral-500">Basics</p>
            <h3 className="mt-2 text-lg font-semibold">Getting started</h3>
            <div className="mt-6 border-t border-neutral-200">
              <details className="group border-b border-neutral-200">
                <summary className="flex cursor-pointer list-none items-center justify-between gap-4 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-sm 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-4 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-sm 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-4 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-sm text-pretty text-neutral-600">Explain the difference between the available options. Give readers a useful criterion for making their choice.</p>
              </details>
            </div>
          </div>
          <div className="rounded-lg border border-neutral-200 bg-white p-6">
            <p className="text-sm font-medium text-neutral-500">Choices</p>
            <h3 className="mt-2 text-lg font-semibold">Managing your choices</h3>
            <div className="mt-6 border-t border-neutral-200">
              <details className="group border-b border-neutral-200">
                <summary className="flex cursor-pointer list-none items-center justify-between gap-4 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-sm 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-4 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-sm 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-4 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-sm 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>
        <p className="mt-8 text-center text-sm text-neutral-600">A short contact note for questions beyond these topics. <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></p>
      </div>
    </section>
  )
}

Pattern notes

When to use: Use for two clear topic groups with three questions each. Choose faq-category-sidebar for more topics or faq-two-column-accordion for an ungrouped list. Variations: start one answer open, rename groups by audience, or add a help link inside each card.
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, two group titles and six 16px semibold questions grouped beneath them. Revealed answers are 14px neutral-600. Slots: eyebrow 4 words, heading 8, topic label 4, group title 6, question 9, answer 30, contact note 16, link 3.
Responsive: Cards stack below 768px and form equal md:grid-cols-2 columns from 768px. Card padding remains 24px; questions wrap while their 20px chevrons stay fixed. Heading size and vertical 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. A centred max-w-2xl eyebrow and heading precede two topic cards by 48px. Cards use rounded-lg, 1px neutral-200 borders and p-6 24px with gap-6 24px. Each has a 14px topic label, 18px title 8px later and a top-bordered list 24px later. Three independent details rows per card use 20px summary/answer-bottom padding, 20px chevrons and 16px gaps. A centred contact line follows by 32px.
States: Native details controls hide the default marker. Every summary shows a 2px neutral-900 focus-visible outline offset 2px. All six questions are independent, unnamed and initially closed. Chevrons rotate 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. Cards have no selected, disabled or loading states.

Desktop wireframe

┌────────────────────────────────────────────────────────────┐
│                    Eyebrow                                 │
│               Heading for questions                        │
│                                                            │
│ ┌─────────────────────────┐ ┌─────────────────────────┐    │
│ │ Topic label             │ │ Topic label             │    │
│ │ Getting started         │ │ Managing your choices   │    │
│ ├─────────────────────────┤ ├─────────────────────────┤    │
│ │ Starting question    v  │ │ Changing question    v  │    │
│ ├─────────────────────────┤ ├─────────────────────────┤    │
│ │ Included details     v  │ │ Access question      v  │    │
│ ├─────────────────────────┤ ├─────────────────────────┤    │
│ │ Choosing an option   v  │ │ Support question     v  │    │
│ └─────────────────────────┘ └─────────────────────────┘    │
│             Contact note / [Contact support]               │
└────────────────────────────────────────────────────────────┘

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 — Grouped topic cards

Pattern notes

More in FAQ

FAQ — Accordion

FAQ — Accordion beside image

FAQ — Accordion beside intro