Uilora Insights
Scroll-driven accordion feature section with smooth image panel transitions.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| features | Array<{icon, title, description, visual}> | 6 Uilora features | Array of feature items with icon, title, description, and visual panel. |
| title | string | Track What Matters | Section heading text. |
| subtitle | string | BUILT-IN-INSIGHTS | Uppercase tag above the heading. |
| accentColor | string | #1a1a1a | Accent color for active indicator. |
When to Use
Perfect for product pages that need to showcase multiple features with rich visual context. The accordion + image panel pattern is ideal for health apps, analytics dashboards, and feature-rich platforms.
Best Practices
Use 4-6 features for the best balance. Each feature should have a unique visual that reinforces its purpose. Keep descriptions under 2 sentences for scannability.
Why This Component Matters
The accordion-image pattern lets users explore features at their own pace while maintaining visual engagement. The smooth transitions create a premium, app-like browsing experience.
FAQ
QHow do the image transitions work?
AnimatePresence from Framer Motion handles smooth fade and scale transitions between visual panels when the active feature changes.
QDoes hover or click activate features?
Both — hovering or clicking a feature item activates it and swaps the visual panel.
QCan I use real images instead of mockups?
Yes, each feature accepts a visual prop that can be any React node — including img tags or Next.js Image components.
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.