Top10

A horizontal card row for ranked content with large numbered badges (1–10) in the bottom-left corner. Perfect for "Top 10 Movies", "Best of the Week", or any ranked list.

Preview

Each card shows a numbered badge (1, 2, 3…) in the bottom-left corner. Cards use poster images and link to the content detail page.

Installation

Top10 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 Top10, pass your ranked content array, and a section title.

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

<Top10
  title="Top 10 This Week"
  data={contentArray}   // IContentData[] - ideally 10 items for ranking
  isLoading={false}    // Optional: show loading state
/>

Props

Prop	Type	Required	Description
title	string	Yes	Section title (e.g. "Top 10 Movies")
data	IContentData[]	Yes	Array of content items; index + 1 is used as rank badge
isLoading	boolean	No	Show loading state

Features

Large bold numbered badge (1–10) in bottom-left with black/70 background
Horizontal Swiper with responsive breakpoints: 3 → 4 → 6 → 9 cards
Poster images with 9:14 aspect ratio
Links to /details/[type]/[slug]
Clean, minimal design focused on the rank number