Overview
The spotlight section is a high visibility, visual layout block within the sectioned item template, designed to showcase featured content collections or editorial recommendations. By pairing a prominent hero image with adjacent condensed items, the section creates dynamic browsing structures that enhance brand expression.
Composition
The spotlight section consists of 2 primary layout components:
- Hero image: Single, prominent visual graphic displayed on one side.
- Condensed items: Companion column of condensed items rendered directly adjacent to the hero image.
1. Hero image
2. Condensed items
UX requirements
To ensure a safe and consistent experience across all apps, follow these design requirements:
Requirement level |
Content |
|---|---|
MUST |
Include a hero image and at least 1 condensed item. |
MUST |
Ensure the hero image functions as supporting visual context, such as album art, and doesn’t contain embedded text that drivers must read. |
SHOULD |
Display at least 3 condensed items alongside the hero image to establish a balanced, visually complete layout. |