Molecules

VideoCard

16:9 video thumbnail with a duration badge and a hover play affordance.

Preview

components/content/VideoCard.jsx

New14:22

Designing an AI annotation tool in 12 weeks

Mehmet Ergul24K views · 2 weeks ago

06:48

Younison — recording sessions that run themselves

Mehmet Ergul8.1K views · 3 months ago

Hover to see the play affordance — glass circle, signature curve. Lay several out in a responsive grid for a content index.

Usage

src/components/ui/VideoCard.tsx

tsx

import { VideoCard } from "@/components/ui/VideoCard";

<VideoCard
  title="Designing an AI annotation tool in 12 weeks"
  channel="Mehmet Ergul"
  meta="24K views · 2 weeks ago"
  duration="14:22"
  thumb="/thumbs/annotation-builder.jpg"
  badge="New"
  onClick={() => window.open(video.url)}
/>

API

props

Prop	Type	Default	Description
title	string	—	Video title — clamps to two lines.
channel	string	—	Channel or series name under the title.
meta	string	—	Quiet stats line, e.g. "24K views · 2 weeks ago".
duration	string	—	Mono, tabular overlay in the bottom-right of the thumb.
thumb	string	—	Image URL or any CSS background — gradients are the designed fallback.
badge	string	—	Top-left ribbon ("New"), filled with the content amber signal.
onClick	(e) => void	—	Makes the whole card interactive.

Tokens consumed

semantic only

--signal-content--color-bg-elevated--color-border--color-fg--color-fg-muted--color-fg-subtle--font-mono--radius-md--radius-xs--radius-pill--duration-fast--duration-medium--ease-out-expo