This article provides examples of Hero rows.
Each accordion represents a row type. Within each one are examples of how the row displays, alongside row information.
Note: The following rows are supported in Reference Apps but are unavailable in Deltatre Apps on Android, iOS, and Roku: H5, H6, H7, H9.
💡 Find out more about page templates and supported rows.
Hero rows — (H)
Hero rows boost engagement and content consumption by promoting the most prominent and high-value application content to users. Hero row types include:
Compatibility notes: The HX1 Advanced Hero row displays as 16:9 across all devices except App versions 1.0 onwards, where it switches to 2:3 on portrait mobile - more information below.
Introduced in Presentation Manager 9.8 and Reference Apps 6.10, the HX1 — Advanced Hero row provides granular control over the display of metadata in Apps in addition to an auto-cycling (plus the ability to swipe left/right) image carousel for content types, including events, movies, programs, shows, seasons, episodes, and links.
Helping to boost engagement and content consumption, promoting the highest-value application content, this row is available in the Home and Category page templates for Live and video-on-demand (VOD) content.
Row options include:
- Horizontal HX1 row component alignment options
- Show/hide custom badges
- Show/hide hero title
- Show/hide additional metadata (advisory categories, duration, number of seasons, etc)
- Show/hide tagline or short description
- Show/hide short description
- Show/hide logo
- Set carousel image background duration time (seconds) for auto-slideshow. Set between 0–20, with 0 disabling auto-cycle.
- CTAs (Watch now, Continue watching, or Subscribe)
Badge information:
- For events that have already started, a Live badge displays.
- For events that start in less than 7 days, an Upcoming badge displays (if the event starts in more than 7 days, no badge displays).
- Event status badges automatically update from Upcoming to Live (without page refresh).
- Event status badges change to Upcoming the badge and a countdown timer appears on page refresh.
- Date and time details display next to badges.
- Event badges display before custom badges and follow specified horizontal alignment settings.
- The event badge only displays for event assets.
- For HX1 row date and time formats, see our Live content display article.
Platform support |
iOS/iPadOS ✅ |
tvOS ✅ |
Android ✅ |
Android TV ✅ |
Responsive web ✅ |
Web TV ✅ |
Xbox One ✅ |
Roku ✅ |
---|---|---|---|---|---|---|---|---|
Required image type | 2:3 Poster Wallpaper (portrait mode) | 16:9 Wallpaper | 2:3 Poster Wallpaper (portrait mode) | 16:9 Wallpaper |
16:9 Wallpaper 2:3 Poster Wallpaper at mobile breakpoint |
16:9 Wallpaper |
16:9 Wallpaper | 16:9 Wallpaper |
Select an option below to see how this looks in the Apps:
The H1 Hero row is a full-width 3:1 carousel that switches to 4:3 on portrait mobile devices - more information below.
Supports the display of badges across all applicable device types.
Platform support |
iOS/iPadOS ✅ |
tvOS ✅ |
Android ✅ |
Android TV ✅ |
Responsive web ✅ |
Web TV ✅ |
Xbox One ✅ |
Roku ✅ |
---|---|---|---|---|---|---|---|---|
Required image type |
4:3 Hero Block (mobile portrait mode) 3:1 Hero (iPadOS) |
3:1 Hero |
4:3 Hero Block (mobile portrait mode) 3:1 Hero (tablet) |
3:1 Hero |
3:1 Hero 4:3 Hero Block at mobile breakpoint |
3:1 Hero | 3:1 Hero | 3:1 Hero |
Select an option below to see how this looks in the Apps:
The H2 Hero peeking row displays a 3:1 carousel with assets peeking on both sides, that switches to 4:3 on portrait mobile devices - more information below.
Supports the display of badges across all applicable device types.
Compatibility notes: The H2 Hero row is supported in Reference Apps but not in Deltatre Apps.
Platform support |
iOS/iPadOS ✅ |
tvOS ✅ |
Android ✅ |
Android TV ✅ |
Responsive web ✅ |
Web TV ✅ |
Xbox One ✅ |
Roku ✅ |
---|---|---|---|---|---|---|---|---|
Required image type |
4:3 Hero Block (mobile portrait mode) 3:1 Hero (iPadOS) |
3:1 Hero |
4:3 Hero Block (mobile portrait mode) 3:1 Hero (tablet) |
3:1 Hero |
3:1 Hero 4:3 Hero Block at mobile breakpoint |
3:1 Hero | 3:1 Hero | 3:1 Hero |
Select an option below to see how this looks in the Apps:
Compatibility notes: The H5 Hero row (16:9) is supported in Reference Apps but not in Deltatre Apps.
The H5 Hero (16:9) displays a full-width 16:9 carousel with 16:9 thumbnails and supports the display of badges across all applicable device types.
Platform support |
iOS/iPadOS ✅ |
tvOS ✅ |
Android ✅ |
Android TV ✅ |
Responsive web ✅ |
Web TV ✅ |
Xbox One ✅ |
Roku ✅ |
---|---|---|---|---|---|---|---|---|
Required image type | 16:9 Wallpaper | 16:9 Wallpaper | 16:9 Wallpaper | 16:9 Wallpaper |
16:9 Wallpaper |
16:9 Wallpaper | 16:9 Wallpaper | 16:9 Wallpaper |
Select an option below to see how this looks in the Apps:
Compatibility notes: The H6 Hero peeking (16:9) row is supported in Reference Apps but not in Deltatre Apps.
The H6 Hero peeking (16:9) displays a 16:9 wide carousel with assets peeking on both sides and supports the display of badges across all applicable device types*.
*Web TV/Xbox One supported from Reference Apps version 5.0.1 onwards.
Platform support |
iOS/iPadOS ✅ |
tvOS ❌ |
Android ❌ |
Android TV ❌ |
Responsive web ✅ |
Web TV ✅ |
Xbox One ✅ |
Roku ✅ |
---|---|---|---|---|---|---|---|---|
Required image type | 16:9 Wallpaper | N/A | N/A | N/A | 16:9 Wallpaper | 16:9 Wallpaper | 16:9 Wallpaper | 16:9 Wallpaper |
Select an option below to see how this looks in the Apps:
Please note, the H6 - Hero Peeking (16:9) row is not supported on tvOS and Android TV.
Compatibility notes: The H7 Hero mosaic row is not supported in Deltatre Apps version 1.0 onwards.
The H7 Hero mosaic displays a grid of 16:9 assets.
Platform support |
iOS/iPadOS ✅ |
tvOS ❌ |
Android ✅ |
Android TV ❌ |
Responsive web ✅ |
Web TV ❌ |
Xbox One ❌ |
Roku ❌ |
---|---|---|---|---|---|---|---|---|
Required image type | 16:9 Wallpaper | N/A | 16:9 Wallpaper | N/A | 16:9 Wallpaper | N/A | N/A | N/A |
Select an option below to see how this looks in the Apps:
Note: Please note that this row is supported in Reference Apps but not in Deltatre Apps.
The H9 Hero image row displays a custom image heading with optional text.
Platform support |
iOS ✅ |
tvOS ✅ |
Android ✅ |
Android TV ✅ |
Responsive web ✅ |
Web TV ✅ |
Xbox One ✅ |
Roku ❌ |
---|---|---|---|---|---|---|---|---|
Required image type | Custom | Custom | Custom | Custom |
Custom |
Custom | Custom | Custom |
Select an option below to see how this looks in the Apps:
The H10 Hero text row displays a heading with optional text and background colors.
Platform support |
iOS ✅ |
tvOS ✅ |
Android ✅ |
Android TV ✅ |
Responsive web ✅ |
Web TV ✅ |
Xbox One ✅ |
Roku ✅ |
---|
Select an option below to see how this looks in the Apps:
The H11 Hero text (automatic) row displays automatic text heading based on the page title.
Platform support |
iOS ✅ |
tvOS ✅ |
Android ✅ |
Android TV ✅ |
Responsive web ✅ |
Web TV ✅ |
Xbox One ✅ |
Roku ✅ |
---|
Select an option below to see how this looks in the Apps: