Expandable Card
A versatile and engaging UI component that allows users to explore content in a more immersive way. Click the card to expand and view detailed content with smooth layout animations.
Preview
Click a card to expand and view details. Press Escape or click outside to close.
2h • 2024 • 13+
Breaking Bad
2h • 2024 • 13+
Stranger Things
2h • 2024 • 13+
Squid Game
Installation
Requires framer-motion for animations. Install it if not already present.
pnpm dlx shadcn@latest add https://zezo-ui.vercel.app/r/zezo-expandable-card.json
Usage
Works with IContentData (OTT). Map name, poster, description, and children for the expanded view.
import { ExpandableCard } from "@/components/ui/zezo-ui/Common/expandable-card"
import type { IContentData } from "@zezosoft/zezo-ott-api-client"
{contentData.map((item: IContentData) => (
<ExpandableCard
key={item._id}
title={item.name}
src={item.poster || item.thumbnail}
description={`${item.content_duration} • ${item.release_year}`}
>
<h4>About</h4>
<p>{item.description}</p>
</ExpandableCard>
))}Props
| Prop | Type | Required | Description |
|---|---|---|---|
| title | string | Yes | Card title displayed in collapsed and expanded states |
| src | string | Yes | Image URL for the card |
| description | string | Yes | Subtitle or tagline shown below the image |
| children | ReactNode | No | Content revealed when the card is expanded |
| className | string | No | Additional CSS classes for the collapsed card |
| classNameExpanded | string | No | Additional CSS classes for the expanded card content |