FAQ Gallery
Dark FAQ where each expanded item reveals a side-by-side image and answer panel — a visual question explorer.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| accentColor | string | "#22d3ee" | Accent color for tag badges, the View more link, and the active toggle icon. |
| items | FAQItem[] | DEFAULT_ITEMS | Array of items — each needs a question, answer, image URL, and optional tag string. |
| title | string | "Discover Uilora" | Section heading above the FAQ list. |
| subtitle | string | "Click a question..." | Small subtitle below the heading. |
When to Use
Use when the FAQ answers benefit from visual context — product features, workflow steps, portfolio work, or any content where a supporting image clarifies more than text alone.
Best Practices
Choose images that reinforce the answer, not just decorate it. The image crops to 144×112px, so use images with a clear subject centered. Cyan, teal, and green accents read best on the dark background.
Why This Component Matters
Standard FAQs are text-only. Adding an image per answer turns the FAQ into a micro product tour — users explore by curiosity, not obligation. The reveal animation makes each expand feel like a discovery.
FAQ
QHow does the image reveal animate?
The image div uses `initial={{ opacity: 0, scale: 1.05 }}` and animates to `{ opacity: 1, scale: 1 }` with a 0.08s delay — a subtle zoom-in that feels cinematic.
QCan I use different images per item?
Yes — each FAQItem has an image prop. Pass any URL. Unsplash works well; add w=400 to the URL for optimized sizing.
QCan I remove the tag badge?
Yes — the tag is optional. Omit it from any item and the badge won't render. The question text fills the space 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.