Elastic Expansion
Hover-to-expand accordion feature grid with image backgrounds, vertical labels on inactive panels, and Uilora-branded content on a light gray background.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| title | string | Everything your design system needs | Section heading displayed above the accordion. |
| description | string | Uilora brings structure, speed, and craft to every product you ship. | Subtitle shown below the heading. |
| accentColor | string | #6366f1 | Hex accent used for label badges on expanded panels and the eyebrow text. |
When to Use
Ideal for feature comparison sections, capability showcases, and any use case where you want users to actively explore content rather than passively read a list. Works especially well on desktop-first landing pages.
Best Practices
Keep panel labels short (1–2 words) so they read cleanly in the vertical rotated state. Use images with strong visual contrast since they display at 60% opacity over black.
Why This Component Matters
Accordion-style feature grids encourage active engagement — users are drawn to hover and explore, increasing time on page and feature comprehension compared to static lists.
FAQ
QHow do I change the feature content?
Edit the features array at the top of the component. Each item has label, heading, sub (description), and img (Unsplash URL).
QCan I make it click-to-expand instead of hover?
Yes — the component uses both onClick and onHoverStart. Remove onHoverStart to make it click-only.
QIs it responsive?
On mobile the panels stack vertically (flex-col) and each shows in the expanded state by default. The horizontal expansion layout activates at md breakpoint.
Related Components
Editorial Layout
Asymmetric fashion-inspired bento grid with sharp edges and editorial styling, branded for Uilora.
Swiss Layout
Clean Swiss design bento grid with precise typography and minimal aesthetics, branded for Uilora.
Wabi Sabi Layout
Japanese-inspired bento grid with wabi-sabi aesthetics, imperfections, and Uilora branding.