Vertical Accordion
Vertical accordion testimonial section with expandable cards.
Main Features of Vertical Accordion
How to Use Vertical Accordion in Next.js
Installation Guide for Vertical Accordion
Props
Customize the component with these 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. |
Related Components
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 in Modern UI Development
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.
Frequently Asked Questions
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.