--- title: "Hero rows" slug: "hero-rows" updated: 2026-01-13T13:23:21Z published: 2026-01-13T13:23:21Z --- > ## Documentation Index > Fetch the complete documentation index at: https://documentation.deltatre.com/llms.txt > Use this file to discover all available pages before exploring further. # Hero rows This article provides examples of Hero rows. Each accordion represents a row type with examples of how the row displays, alongside row information. > [!NOTE] > **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](/v1/docs/pages-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** > [!WARNING] > **Compatibility note:** 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](/v1/docs/release-notes-axis-98-q2-23) 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](/v1/docs/home-page) and [Category](/v1/docs/category-page) 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](/v1/docs/live-content-display) article. ![HX1](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/9263994743452.png) | 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: Responsive webTV AppsiPad/TabletMobile ![HX1](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/9322401629468.png) ![HX1](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/9322401634972.png) ![HX1](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/9322424553116.png) ![HX1](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/9322424555292.png) ### **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](/v1/docs/badges) across all applicable device types. ![H1 Hero row.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/360023039160.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 | Responsive WebTV AppsiPad/TabletMobile ![H1_Hero_3.1.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/360008979700.png) ![H1_Hero_3.1_TV.jpg](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/360010648260.jpg) ![H1_Hero_3.1_Tablet.jpg](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/360010658479.jpg) ![Hero_3.1_Mobile.jpg](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/360010658499.jpg) ### **H2 — Hero peeking** > [!WARNING] > **Compatibility note:** The H2 Hero row is supported in Reference Apps but not in Deltatre 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](/v1/docs/badges) across all applicable device types. ![H2 Hero row.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/360023087159.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 | Responsive webTV AppiPad/TabletMobile ![H2_Hero_Peeking_Responsive_Web.jpg](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/360010648740.jpg) ![H2_Hero_Peeking_TV.jpg](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/360010648620.jpg) ![H2_Hero_Peeking_Tablet.jpg](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/360010658699.jpg) ![H2_Hero_Peeking_Mobile.jpg](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/360010658759.jpg) ### **H5 — Hero (16:9)** > [!WARNING] > **Compatibility note:** 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](/v1/docs/badges) across all applicable device types. ![H5 Hero row.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/360023087199.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 | Responsive webTV AppsiPad/TabletMobile ![H5_Hero_16.9_Responsive_Web.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/360010649060.png) ![H5 row - TV apps.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/4409844761490.png) ![H5_Hero_16.9_Tablet.jpg](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/360010659039.jpg) ![H5_Hero_16.9_Mobile.jpg](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/360010649180.jpg) ### **H6 — Hero peeking (16:9)** > [!WARNING] > **Compatibility note:** 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](/v1/docs/badges) across all applicable device types*. *Web TV/Xbox One supported from [Reference Apps version 5.0.1](/v1/docs/release-notes-webtv-501-q3-19) onwards. ![H6 Hero row.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/360023087219.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 | Responsive WebTv AppsiPad/TabletMobile ![H6_Hero_Peeking_16.9_Responsive_web.jpg](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/360010659199.jpg) ![H6_Hero_Peeking_16.9_TV.jpg](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/360010649260.jpg) ![H6_Hero_Peeking_16.9_Tablet.jpg](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/360010659219.jpg) ![H6_Hero_Peeking_16.9_Mobile.jpg](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/360010649280.jpg) ### **H7 — Hero mosaic** > [!WARNING] > **Compatibility note:** 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](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/360023087299.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 | Responsive webTV AppsiPad/TabletMobile ![H7_Hero_Mosaic.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/360008979980.png) ![H7_Hero_Mosaic_TV.jpg](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/360010659279.jpg) ![H7_Hero_Mosaic_Tablet.jpg](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/360010649300.jpg) ![H7_Hero_Mosaic_Mobile.jpg](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/360010649340.jpg) ### **H9 — Hero image** > [!WARNING] > **Compatibility 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](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/360023087359.png) | Platform support | **iOS/iPadOS** **✅** | **tvOS** **✅** | **Android** **✅** | **Android TV** **✅** | **Responsive web** **✅** | **Web TV** **✅** | **Xbox One** **✅** | **Roku** **❌** | | --- | --- | --- | --- | --- | --- | --- | --- | --- | | Required image type | Custom | Custom | Custom | Custom | Custom | Custom | Custom | Custom | Responsive webTV AppsiPad/TabletMobile ![H9_Hero_Image.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/360008980000.png) ![H9_Hero_Image_TV.jpg](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/360010649400.jpg) ![H9_Hero_Image_Tablet.jpg](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/360010649420.jpg) ![H9_Hero_Image_Mobile.jpg](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/360010659319.jpg) ### **H10 — Hero text** The H10 Hero text row displays a heading with optional text and background colors. ![H10 Hero row.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/360023087419.png) | Platform support | **iOS/iPaOS** **✅** | **tvOS** **✅** | **Android** **✅** | **Android TV** **✅** | **Responsive web** **✅** | **Web TV** **✅** | **Xbox One** **✅** | **Roku** **✅** | | --- | --- | --- | --- | --- | --- | --- | --- | --- | Responsive webTV AppsiPad/TabletMobile ![](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/image(10).png) ![H10_Hero_Text.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/360008981739.png) ![H10_Hero_Text_Tablet.jpg](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/360010659379.jpg) ![H10_Hero_Text_Mobile.jpg](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/360010649480.jpg) ### **H11 — Hero text (automatic)** The H11 Hero text (automatic) row displays automatic text heading based on the page title. ![H11 Hero row.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/360023087579.png) | Platform support | **iOS/iPadOS** **✅** | **tvOS** **✅** | **Android** **✅** | **Android TV** **✅** | **Responsive web** **✅** | **Web TV** **✅** | **Xbox One** **✅** | **Roku** **✅** | | --- | --- | --- | --- | --- | --- | --- | --- | --- | Responsive webTV AppsiPad/TabletMobile ![](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/image(10).png) ![H10_Hero_Text.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/360008981739.png) ![H10_Hero_Text_Tablet.jpg](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/360010659379.jpg) ![H10_Hero_Text_Mobile.jpg](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/360010649480.jpg)