BasicCard

A standard horizontal scrolling card layout for displaying content grids. Features hover effects, scale animations, Play and Favorite buttons, Rent/Buy/Premium badges, mousewheel scrolling, and responsive breakpoints.

Preview

Hover over cards to see the scale animation, gradient overlay, Watch button, and Favorite button. Scroll horizontally with mousewheel or touch.

Installation

BasicCard is part of the Content Page bundle. Install it with:

pnpm dlx shadcn@latest add https://zezo-ui.vercel.app/r/zezo-content-page.json

Usage

Import BasicCard and pass your content data array plus a section title.

import BasicCard from "@/components/zezo/Content/Styles/Cards/BasicCard/BasicCard";
import type { IContentData, IWhoami } from "@zezosoft/zezo-ott-api-client";

<BasicCard
  title="Trending Now"
  data={contentArray}        // IContentData[]
  href="/details"            // Optional: base URL for detail links (default: "/")
  userSession={userSession}  // Optional: IWhoami | null - enables FavoriteButton
  cardMinWidth={140}         // Optional: minimum card width (px) for consistent sizing
/>

Props

Prop	Type	Required	Description
title	string	Yes	Section title displayed above the card row
data	IContentData[]	Yes	Array of content items to display
href	string	No	Base URL for detail links (default: "/")
userSession	IWhoami \| null	No	Logged-in user session; enables Favorite button on cards
isLoading	boolean	No	Show loading state (use BasicCardSkeleton if needed)
cardMinWidth	number	No	Minimum width (px) for each card. Use for consistent sizing in wide containers.

Features

Horizontal Swiper carousel with FreeMode and Mousewheel
Responsive breakpoints: 2.5 → 3.5 → 4.5 → 5.5 → 8.5 cards visible
Hover: scale up, gradient overlay, Watch + Favorite buttons
Rent/Buy/Premium badge (top-right, hidden on hover)
9:14 poster aspect ratio with lazy loading
Smart transform-origin so edge cards don't overflow
Optional cardMinWidth prop for fixed card sizing