TVHero

TVHero — Prism component.

Signature

Density

Viewport

Theme follows the navbar ☀/☾ toggle

Live demo

Open ↗

When to use

TVHero — 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 { TVHero } = window.PrismDesignSystem_39d121;

Props

Prop	Type	Required	Description
kicker	React.ReactNode	—	Small uppercase eyebrow above the title.
title	React.ReactNode	—	Oversized feature title.
meta	React.ReactNode[]	—	Metadata chips; the first renders as a bordered tag (e.g. "4K HDR").
rating	React.ReactNode	—	Rating shown with a star.
synopsis	React.ReactNode	—	One- or two-line description.
actions	React.ReactNode	—	Action row, typically <TVButton>s.
art	string	—	Backdrop image URL the cinematic background shows for the hero.