Card
Light-mode card player with warm gradient background, engagement actions, and tag pills.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| video | string | https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260314_131748_f2ca2a28-fed7-44c8-b9a9-bd9acdd5ec31.mp4 | Video source URL. |
| backgroundColor | string | #ff6b35 | Background gradient start color (hex, rgb, or hsl). |
When to Use
Perfect for social video feeds, content discovery interfaces, and editorial platforms with light-mode aesthetics. The like/dislike row, colorful tag pills, and stream links make it feel at home in a YouTube-style or newsletter-embedded context.
Best Practices
Works best with short-form content (under 5 minutes). The card format shines in a grid layout where multiple PlayerCard instances display different videos side by side.
Why This Component Matters
The card format is the most recognizable video UI pattern in social media. Wrapping a player in a card with engagement actions immediately signals interactivity to users and increases click-through and engagement rates.
FAQ
QCan I embed this in a feed grid?
Yes. The component is a self-contained card — drop multiple instances in a CSS grid and they each maintain independent playback state.
QAre the like counts real?
The defaults are Uilora-branded placeholders. Wire up your own state management or API to make the thumbs-up/down counts persist and update.
QCan I change the background gradient?
The backgroundColor prop controls the gradient start color. The gradient transitions through lighter tones automatically — set any hex value to create your palette.
Related Components
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.