Vertical Accordion
Vertical accordion testimonial section with expandable cards.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| testimonials | TestimonialItem[] | [] | Array of testimonial items with id, name, role, company, content/text, media, avatar/image, video. |
| backgroundColor | string | #f5f5f5 | Background color of the component (hex, rgb, or hsl). |
| textColor | string | #000000 | Default text color (hex, rgb, or hsl). |
| imageOverlayFrom | string | transparent | Start color of the image overlay gradient (hex, rgb, or hsl). |
| imageOverlayVia | string | rgba(0,0,0,0.2) | Middle color of the image overlay gradient (hex, rgb, or hsl). |
| imageOverlayTo | string | rgba(0,0,0,0.9) | End color of the image overlay gradient (hex, rgb, or hsl). |
| companyBadgeBgColor | string | #ffffff | Background color of company badges (hex, rgb, or hsl). |
| companyBadgeTextColor | string | #000000 | Text color of company badges (hex, rgb, or hsl). |
| playButtonBgColor | string | #ffffff | Background color of play buttons (hex, rgb, or hsl). |
| playButtonIconColor | string | #000000 | Icon color of play buttons (hex, rgb, or hsl). |
| quoteColor | string | #ffffff | Color of the quote text (hex, rgb, or hsl). |
| quoteTruncateLength | number | 60 | Maximum length of quote text before truncation. |
| authorNameColor | string | #ffffff | Color of the author name text (hex, rgb, or hsl). |
| authorRoleColor | string | rgba(255,255,255,0.7) | Color of the author role text (hex, rgb, or hsl). |
| authorAvatarBorderColor | string | #ffffff | Border color of the author avatar images (hex, rgb, or hsl). |
| inactiveLabelColor | string | rgba(255,255,255,0.7) | Color of inactive labels (hex, rgb, or hsl). |
| inactiveLabelRotate | number | -90 | Rotation angle of inactive labels in degrees. |
When to Use
Ideal for storytelling, long-form testimonials, and Next.js sites that want a space-efficient yet dramatic layout. Use this React component for a vertical accordion where cards expand into full-bleed sections with video backgrounds.
Best Practices
Follow React best practices by using high-impact portrait orientation media for the accordion panels. Maintain consistent spacing within your design system by aligning the accordion header. Optimize for performance by lazy-loading the video backgrounds.
Why This Component Matters
Vertical accordions allow users to focus intensely on one story at a time. This production-ready UI component helpsคุณ build an interface that feels narrative-driven and expansive, making each testimonial feel like a dedicated feature.
FAQ
QHow do the cards expand?
Each card occupies a thin vertical sliver until hovered or clicked, at which point it smoothly expands to reveal the full content and media.
QCan I use it for video testimonials?
Absolutely, each panel supports an optional video background that brings the client story to life when the card is expanded.
QIs the text truncated?
The `quoteTruncateLength` prop allows you to control how much text is shown in the collapsed state to maintain the visual balance of the accordion.
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.
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.