FAQ Bold
Dark bold FAQ with a giant editorial heading, full-width divider lines, and circular toggle icons that fill on active.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| accentColor | string | "#ffffff" | Color used to fill the toggle icon when active — white creates the classic dark/light inversion. |
| items | FAQItem[] | DEFAULT_ITEMS | Array of FAQ items — each needs a question and an answer string. |
| heading | string | "FAQ" | The large display heading above the list — 2–4 characters render at maximum size. |
When to Use
Deploy on agency homepages, product launch pages, and any brand context where editorial weight signals authority. The large heading makes the FAQ section feel like a statement, not an afterthought.
Best Practices
Keep heading short (FAQ, Ask, Help). Use 4–6 questions — more than 7 dilutes the bold typographic impact. The hover color shift on labels adds subtle life without distraction.
Why This Component Matters
Most FAQ sections are buried in tiny type at the bottom of a page. A 6rem heading announces that questions deserve answers. Typographic scale is the cheapest form of visual authority.
FAQ
QHow does the heading size scale?
It uses CSS clamp(4rem, 8vw, 6rem) — grows proportionally on large screens, caps at 6rem, minimum 4rem on mobile.
QWhy does the icon invert on active?
The circle fills with accentColor (#ffffff by default) and the + color becomes #000000. On dark backgrounds this reads as a bold on/off toggle — clear and decisive.
QCan I use this on a light background?
Yes — change the container background to white and set accentColor to your brand color. The divider lines and text colors will need updating to zinc equivalents.
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.