Top Shelf

ComponentsSystem

Source: Apple Inc. Canonical content at https://developer.apple.com/design/human-interface-guidelines/top-shelf. This file is a structured index of that content, snapshot 2025-02-02. Apple HIG text and imagery are © Apple Inc.; this repository provides organization and cross-referencing for AI agent consumption only.

Top Shelf

Best practices

Help people jump right into your content.

Feature new content.

Personalize people’s favorite content.

Avoid showing advertisements or prices.

Showcase compelling dynamic content that can help draw people in and encourage them to view more.

If you don’t provide the recommended full-screen content, supply at least one static image as a fallback.

Avoid implying interactivity in a static image.

Dynamic layouts

  • A carousel of full-screen video and images that includes two buttons and optional details

  • A row of focusable content

  • A set of scrolling banners

Provide a title.

Provide a title that identifies the currently playing content.

Sectioned content row

Provide enough content to constitute a complete row.

Poster (2:3)

Square (1:1)

16:9

Be aware of additional scaling when combining image sizes.

Scrolling inset banner

Provide three to eight images.

If you need text, add it to your image.

Platform considerations

Resources

Videos


For the complete guidance, including worked examples and illustrations, see the canonical page: https://developer.apple.com/design/human-interface-guidelines/top-shelf

Get HIG guidance in your AI

Install Apple HIG Skills and get expert design guidance directly in Claude Code.

npx skills add raintree-technology/apple-hig-skills
Email updates aren't configured on this deployment yet. Follow the GitHub repo (opens in new tab) for updates.