Lockups

Lockups combine multiple separate views into a single, interactive unit. Each lockup consists of a content view, a header, and a footer. Headers appear above the main content for a lockup and footers appear below the main content. All three views expand and contract together as the lockup gets focus.

Diagram showing a row of five equally-spaced lockups, one of which is in focus and slightly larger than the others. Each lockup has a header area, a content area, and a footer area.

Allow adequate space between lockups. A focused lockup expands in size, so leave enough room between lockups to avoid overlapping or displacing other lockups. For spacing guidance, see Layout.

Use consistent lockup sizes within a row or group. A group of buttons or row of content images is more visually appealing when the widths and heights of all elements match.

For developer guidance, see TVLockupView and TVLockupHeaderFooterView.

Cards

A card combines a header, footer, and content view to present ratings and reviews for media items.

Apple TV screen showing a card lockup

For developer guidance, see TVCardView.

Caption Buttons

A caption button can include a title and a subtile beneath the button. A caption button can contain either an image or text.

Apple TV screen showing a caption button lockup

Make sure that caption buttons in focus tilt in the direction the user can swipe. When aligned vertically, caption buttons should tilt up and down. When aligned horizontally, caption buttons should tilt left and right. When displayed in a grid, caption buttons should tilt in all four directions (up, down, left, and right).

For developer guidance, see TVCaptionButtonView.

Monogram

Monograms identify people, usually the cast and crew for a media item. Each monogram consists of a circular picture of the person and their name. If an image isn't available, the person's initials appear in place of an image.

Apple TV screen showing a monogram lockup

Prefer images over initials. An image of a person creates a more intimate connection than text.

For developer guidance, see TVMonogramView.

Posters

Posters consist of an image and an optional title and subtitle, which are hidden until the poster comes into focus. Posters can be any size, but should be applicable for their content. For more information on images, see Icons and Images.

Apple TV screen showing a poster lockup

For developer guidance, see TVPosterView.