Expanding Flex Card
A stunning, fully responsive flex-based card system. On desktop and tablet, cards expand on hover/click to reveal content. On mobile, it automatically transforms into a smooth, draggable carousel with pagination indicators.
Live Interactive Preview
Source
npx futureuikit add expanding-card Details
Dynamic flex-grow animations for desktop/tablet layouts.Automatic transformation to a draggable carousel on mobile devices.Glassmorphism content overlays with blur effects.Customizable icons, background images, and text content.Built-in pagination indicators for the mobile carousel view.Smooth spring physics using Framer Motion.
How to Use?
- Import ExpandingFlexCard and provide an array of card options.
- The component automatically handles the responsive transition between flex and carousel layouts.
- On mobile, users can drag the carousel to browse cards.
- On larger screens, clicking a card expands it while others collapse.
- Customize the 'className' to adjust the overall container spacing.