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.

According to the needs of your app, you can combine four types of lockup: cards, caption buttons, monograms, and posters.

Best practices

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 guidance, see Layout.

A 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.

Use consistent lockup sizes within a row or group. A group of buttons or a 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.

A screenshot of an Apple TV screen with three cards in an About section across the top. Below the About section are three columns of textual information, titled Information, Languages, and Accessibility.

For developer guidance, see TVCardView.

Caption buttons

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

Make sure that when people focus on them, caption buttons tilt with the motion that they swipe. When aligned vertically, caption buttons tilt up and down. When aligned horizontally, caption buttons tilt left and right. When displayed in a grid, caption buttons tilt both vertically and horizontally.

A screenshot of an Apple TV screen highlighted to show a button with the caption Preview.

For developer guidance, seeTVCaptionButtonView.

Monograms

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.

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

A screenshot of an Apple TV screen highlighted to show a monogram in which the circle displays the initials A J, under which the text Anne Johnson Actor appears.

For developer guidance, seeTVMonogramContentView.

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 the size should be appropriate for their content. For related guidance, see Image views.

A screenshot of an Apple TV screen highlighted to show one of four posters in a poster lockup.

For developer guidance, see TVPosterView.

Platform considerations

Not supported in iOS, iPadOS, macOS, or watchOS.

Resources

Related

Developer documentation

Supported platforms