Uilora Split
Image-reactive FAQ with crossfading visuals that change per question.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| faqs | Array<{q, a, image}> | 5 Uilora FAQs with images | FAQ items with corresponding images. |
| title | string | Got Questions? | Section heading. |
| subtitle | string | We've got answers. | Subtitle text. |
| accentColor | string | #5227FF | Active border and icon accent. |
When to Use
Ideal for product pages and feature-rich platforms where each FAQ deserves its own visual context. The image-reactive pattern keeps users engaged.
Best Practices
Use high-quality images that directly relate to each question. Keep to 4-6 items for smooth transitions.
Why This Component Matters
Pairing each question with a relevant image creates a richer learning experience. The crossfade transitions add polish and prevent the section from feeling static.
FAQ
QHow does the image transition work?
AnimatePresence with mode='wait' handles smooth crossfade transitions between images keyed on the active FAQ index.
QCan I use videos?
The image prop accepts any URL. For video, modify the visual element from img to video.
Related Components
Uilora Dynamic
Interactive tiered pricing calculator with seat slider, billing toggle, and real-time cost breakdown.
Uilora Cloud Slider
Dark navy 3-plan cloud pricing with per-card sliders, add-on checkboxes, and live price calculation.
Uilora Matrix
Feature comparison matrix with 3 plans, monthly/yearly toggle, Pro spotlight, check/cross icons.