Travel Cards
Tall portrait card carousel with metadata overlay — title, duration, and star rating per card.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| items | TravelItem[] | DEFAULT_ITEMS (6 items) | Array of items with id, image URL, title, days, and rating. |
| defaultActive | number | 1 | Index of the initially active card. |
| accentColor | string | #14b8a6 | Accent color for the active card border and dot indicator. |
When to Use
Perfect for travel apps, booking platforms, product showcases, and any interface with tall portrait images and per-item metadata.
Best Practices
Use portrait images (3:4 ratio) for best results. Keep titles concise. The accentColor creates a subtle border on the active card — choose it to match your brand.
Why This Component Matters
The portrait card format maximizes visual impact for each item while the metadata overlay provides all key information without additional UI elements.
FAQ
QHow does the center card scale work?
The active card scales to 1.05x, side cards to 0.86x. All use spring physics for natural-feeling transitions.
QCan I click side cards to navigate?
Yes — clicking either side card navigates in that direction.
QCan I add more metadata fields?
Yes — extend the TravelItem interface and add more spans inside the metadata overlay div.
Related Components
Liquid Stretch
Smooth liquid motion accordion with natural spring animations.
Split Screen
Split screen accordion with expanding image partitions — click a panel to reveal its content.
Audio Reactive
Audio-reactive accordion with animated waveform bars and a progress track.