FAQ Section os-007

Also known as: FAQ tabs, Categorised accordion, Q&A section

Present frequently asked questions grouped by category: animated category pills switch between accordion lists.

Example

default

What is web development?

Web development is the process of building and maintaining websites — client-side and server-side programming, database management, and related technologies.

What is responsive web design?

An approach that makes web pages render well on a variety of devices and screen sizes.

Variants

Single variant (default). The category pill row and the accordion list are the two halves of the pattern; a future variant could drop the category row for short single-list FAQs.

How it works

A content section, not a bare tab bar: category pills (role="tablist") switch which accordion list is visible; each list item expands/collapses independently. The pill's signature move is an accent gradient that slides up from below on selection (a ::before layer translating from 100% to 0 with a backIn ease), turning the text inverse. Accordion answers collapse via the grid-template-rows 0fr→1fr technique — no JS height measurement. The plus icon rotates 45° to become a close icon. A soft radial accent glow sits behind the header. Accordion buttons carry aria-expanded (added during assimilation; the source lacked it — no visual change). Respects prefers-reduced-motion. Known gap: arrow-key navigation between category pills is not implemented (click/Tab only).

Relationships

Uses the same tablist pattern as os-002 Tabs for its category row. Compare os-002's panel variants when only a tab bar is needed.

Parameters

Name	Type	Default	Description
`title`	string	`"FAQs"`	Section heading
`subtitle`	string	—	Gradient eyebrow above the heading
`categories`	object	—	Category key → pill label
`faqData`	object	—	Category key → array of `{question, answer}`

Tokens

--color-bg --color-bg-card --color-bg-muted --color-text --color-text-secondary --color-text-muted --color-text-inverse --color-accent --color-border --color-border-focus --text-sm --text-lg --text-4xl --weight-medium --weight-bold --leading-relaxed --radius-md --radius-lg --spacing-2 --spacing-3 --spacing-4 --spacing-8 --spacing-12 --transition-base --transition-slow

Provenance

Variant	Proven in	Live at	Date
`default`	21st.dev — @vaib215 "FAQ tabs" (external assimilation)	21st.dev	2026-08-08

Assimilated from the ODS-Components bookmark collection. Translated from React + framer-motion to tokenized vanilla CSS + small JS; no license declared on the source listing — re-check before redistributable use.

Code

os-007 · Source: packages/og-faq-section.css ▾

<link rel="stylesheet" href="og-faq-section.css">

<section class="og-faq">
  <header class="og-faq__header">
    <span class="og-faq__eyebrow">Let's answer some questions</span>
    <h2 class="og-faq__title">Frequently Asked Questions</h2>
  </header>
  <div class="og-faq__tabs" role="tablist">
    <button class="og-faq__tab" role="tab" aria-selected="true"
            aria-controls="faq-cat-1"><span>Category</span></button>
  </div>
  <div class="og-faq__panel" id="faq-cat-1" role="tabpanel">
    <div class="og-faq__item">
      <button class="og-faq__q" aria-expanded="false">Question…</button>
      <div class="og-faq__a"><div><p>Answer…</p></div></div>
    </div>
  </div>
</section>
<!-- behavior script: see packages/og-faq-section.html -->