FAQ Editorial
White editorial FAQ with a large display heading, expandable dark-card items, and a decorative accent dot row.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| accentColor | string | "#f59e0b" | Accent color for the toggle icon fill, category eyebrow tint, and decorative dots. |
| items | FAQItem[] | DEFAULT_ITEMS | Array of items — each needs a category label, question heading, and answer string. |
| heading | string | "FAQ" | Large editorial heading displayed at top-left of the component. |
| lead | string | "The component library..." | Supporting lead text beside the heading. |
When to Use
Ideal for brand homepages, SaaS pricing pages, and premium product sites where the FAQ needs to feel like an editorial section — not a support widget.
Best Practices
Use 3–5 items. The category eyebrow (e.g. 'Inspiration', 'Usage') gives each item editorial taxonomy — use it to organize by theme, not by question type.
Why This Component Matters
The inversion on active (white card → black card) is a strong visual affordance that most accordions skip. The user never wonders which item is open — the contrast tells them instantly.
FAQ
QWhy does the card flip dark on expand?
The motion.div transitions background from #f4f4f5 to #09090b. Combined with the white-to-dark text transition, it creates a complete color inversion — visually unambiguous.
QWhat's the category eyebrow for?
It's a 9px mono uppercase label above the question — it groups items by theme without adding visual weight. Users can skim categories before reading questions.
QCan I add an image inside the expanded content?
Yes — replace or augment the answer paragraph with any JSX including img, video, or a component. The height animation handles any content height automatically.
Related Components
Liquid Stretch
Smooth liquid motion accordion with natural spring animations.
Split Screen
Split screen accordion with expanding image partitions — click a panel to reveal its content.
Audio Reactive
Audio-reactive accordion with animated waveform bars and a progress track.