TVCard

TVCard — Prism component.

Signature

Density

Viewport

Theme follows the navbar ☀/☾ toggle

Live demo

Open ↗

When to use

TVCard — Prism component.

Accessibility

Designed for the ten-foot / remote experience: large focus targets, a single bright focus highlight, D-pad navigation, and high-contrast type. Honours data-scale="cinema".

Import

const { TVCard } = window.PrismDesignSystem_39d121;

Props

Prop	Type	Required	Description
shape	"wide" | "poster" | "square"	—	Tile aspect. Default "wide".
image	string | React.CSSProperties	—	CSS background for the art (a string, may include a gradient fallback) or a style object.
art	string	—	Hi-res URL the cinematic backdrop crossfades to on focus.
badge	React.ReactNode	—	Corner badge, e.g. "4K" / "HDR".
progress	number	—	Watch progress 0–100; renders a progress bar.
icon	string	—	lucide icon name, overlaid bottom-left (for utility tiles).
name	React.ReactNode	—	Title caption (revealed on focus for posters).
sub	React.ReactNode	—	Secondary caption line.
initial	boolean	—	Make this the scene's initial focus.
onSelect	(e: React.MouseEvent) => void	—	Convenience alias for onClick.
onLongPress	(e: Event) => void	—	Fired on remote long-press (hold OK).