Hero rows

Prev Next

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:

HX1 — Advanced Hero

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.

HX1

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:

HX1

HX1

HX1

HX1

H1 — Hero

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.

H1 Hero row.png

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

H1_Hero_3.1.png

H1_Hero_3.1_TV.jpg

H1_Hero_3.1_Tablet.jpg

Hero_3.1_Mobile.jpg

H2 — Hero peeking

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.

H2 Hero row.png

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

H2_Hero_Peeking_Responsive_Web.jpg

H2_Hero_Peeking_TV.jpg

H2_Hero_Peeking_Tablet.jpg

H2_Hero_Peeking_Mobile.jpg

H5 — Hero (16:9)

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.

H5 Hero row.png

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

H5_Hero_16.9_Responsive_Web.png

H5 row - TV apps.png

H5_Hero_16.9_Tablet.jpg

H5_Hero_16.9_Mobile.jpg

H6 — Hero peeking (16:9)

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.

H6 Hero row.png

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

H6_Hero_Peeking_16.9_Responsive_web.jpg

H6_Hero_Peeking_16.9_TV.jpg

H6_Hero_Peeking_16.9_Tablet.jpg

H6_Hero_Peeking_16.9_Mobile.jpg

H7 — Hero mosaic

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.

H7 Hero row.png

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

H7_Hero_Mosaic.png

H7_Hero_Mosaic_TV.jpg

H7_Hero_Mosaic_Tablet.jpg

H7_Hero_Mosaic_Mobile.jpg

H9 — Hero image

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.

H9 Hero row.png

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

H9_Hero_Image.png

H9_Hero_Image_TV.jpg

H9_Hero_Image_Tablet.jpg

H9_Hero_Image_Mobile.jpg

H10 — Hero text

The H10 Hero text row displays a heading with optional text and background colors.

H10 Hero row.png

Platform support

iOS

tvOS

Android

Android TV

Responsive web

Web TV

Xbox One

Roku

H10_Hero_Text.png  

H10_Hero_Text_Tablet.jpg

H10_Hero_Text_Mobile.jpg

H11 — Hero text (automatic)

The H11 Hero text (automatic) row displays automatic text heading based on the page title.

H11 Hero row.png

Platform support

iOS

tvOS

Android

Android TV

Responsive web

Web TV

Xbox One

Roku

H10_Hero_Text.png  

H10_Hero_Text_Tablet.jpg

H10_Hero_Text_Mobile.jpg