Lockups

Lockups combine multiple separate views into a single, interactive unit. Each lockup is made up 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 below 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 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 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 no image is available, the first initials of the person’s name are used.

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

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

Apple TV screen showing a poster lockup

For developer guidance, see TVPosterView.