Components
FAQ Section
Editorial FAQ section with a sticky heading, custom plus or minus accordion toggles, and light or dark variants.
Preview
Section
FAQ Section
A two-column FAQ layout with a sticky editorial heading, custom plus or minus toggles, and light or dark presentation modes.
Editorial Light
Bright editorial treatment with subtle dividers and a warm accent on the custom toggle.
White editorial FAQ section with custom orange toggles
Frequently
asked
questions
Contrast Dark
High-contrast black presentation for darker landing pages while keeping the same spacious layout.
Dark FAQ section with cyan toggles and soft contrast copy
Frequently
asked
questions
Usage
import { FaqSection } from "@/components/ui/faq-section";Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | ReadonlyArray<{ question: string; answer: string }> | Required | FAQ entries rendered in the accordion. |
accentColor | string | Required | CSS color value applied to the custom plus or minus toggle. |
variant | "light" | "dark" | "light" | Switches the background, border, and text treatment. |
className | string | None | Optional classes applied to the outer section wrapper. |