--- title: Full Width Asset Hero, With Video tags: Hero --- # Hero: Full Width Asset Hero, With Video ###### **Control Code:** `H.FWA.001.001` <!-- ![](https://via.placeholder.com/1600x900/D3D3D3/000000/?text=Splash%20Placeholder%20Image) --> ## About This Component The design system allows for a variety of hero component configurations. These configurations allow images at varying widths across the page with optional text content and CTAs. Other configurations allow content editors to include videos or text-only approaches with customizable background colors. <!-- ### Usage Guidelines :::info *TODO: Novartis to write.* ::: General guidelines for using this component. Include any information the user will need to know but that may not fit into the below annotated breakdown of the individual requirements for the component. ### Related Components :::info *TODO: Novartis to write.* ::: A list of other components that are related. Consider what other components may be useful based on the structure or format of information and if there are any specific limitations that can be overcome by using a different component. - **[Component Name](/url-of-component):** Why it is related, or why we would recommend it instead of this one. - **[Component Name](/url-of-component):** Why it is related, or why we would recommend it instead of this one. ### Accessibility :::info *TODO: Novartis to write.* ::: Specific accessibility considerations and recommendations for this component. --> ## Primary Configurations | **Extra Large Breakpoint (Desktop)** | | -------- | | ![](https://hackmd.io/_uploads/SyAIq2hmc.png) | | **Medium Breakpoint (Tablet)** | **Extra Small Breakpoint (Mobile)** | | -------- | -------- | | ![](https://hackmd.io/_uploads/rkvDcnnXq.png) | ![](https://hackmd.io/_uploads/rJ6vc2hmq.png) | | **Key** | | ------- | | ![](https://hackmd.io/_uploads/S1-x39hQc.png) | ### 1. Background Image The background image scales dynamically, expanding to the full width of the page and scaling in height to contain the content overtop it. When considering the height of the image, ensure it has enough space to contain all content (text and buttons) and their respective padding at the top and bottom. If an image is too large for the content, the site will attempt to scale it down, but the edges of the image may be cut off to fit the content cleanly. Likewise, if an image is too small, it will scale up to fit the page and content but may experience visual degradation because of this. The site will always maintain the image’s aspect ratio, so there will be no stretching or squishing. Outlined here are the minimums and maximums for the image to ensure a clean visual appearance. For heroes, it is recommended to provide a unique image for each breakpoint to ensure quality. - **Required:** Must be included - **Dimensions:** - Extra Large Breakpoint - Width: 1200px - 2560px - Height: 200px - 1097px - Large Breakpoint - Width: 1200px - Height: 200px - 675px - Medium Breakpoint - Width: 1000px - Height: 160px - 576px - Extra Small Breakpoint - Width: 576px - Height: 120px - 576px The image for this component otherwise follows the standard requirements outlined in the [Images](/images) page of this documentation. Please refer to that page for full details on its configurations and options. ### 2. Video When the play button is pressed the hero opens a standard modal to appear over the other content of the page with the video player embedded inside it. - **Required:** Must be included - **Play Button Arrow Color:** GRADIENT_PRIMARY_01 (Gradient Brand Primary), changeable within site color palette - **Modal:** Must contain an embedded video player in the main content area The Modal for this component otherwise follows the standard requirements outlined in the [Modal](/modal) page of this documentation. Please refer to that page for full details on its configurations and options. ### 3. Title Text - **Optional:** Can be excluded, component collapses to hide unused space - **Type Style:** Title 1 - **Color:** NEUTRAL_0 (White), changeable within site color palette - **SEO HTML Tag:** H1, changeable within H1 to H6 ### 4. Body Text - **Optional:** Can be excluded, component collapses to hide unused space - **Type Style:** Paragraph 1 - **Color:** NEUTRAL_0 (White), changeable within site color palette ### 5. Under-Title Decoration Line This line provides a break between the primary title text and other body text. It can be optionally removed, however if either the title or the body is not included then the line should also not be included. - **Optional:** Can be excluded, component collapses to hide unused space - **Color:** NEUTRAL_0 (White), changeable within site color palette ### 6. CTA Buttons - **Optional:** Can be excluded, component collapses to hide unused space - **Number of Buttons:** 0-2, if there is only 1 button it will always be the left-most button The CTA Buttons for this component follows the standard requirements outlined in the [CTA Buttons](/cta-buttons) page of this documentation. Please refer to that page for full details on its configurations and options. ### 7. FUSE Code - **Optional:** Can be excluded, component collapses to hide unused space The FUSE code for this component follows the standard requirements outlined in the [FUSE Code](/fuse-code) page of this documentation. Please refer to that page for full details on its configurations and options. ## Additional Configurations ### Video Play Button Placement The play button can be placed either to the left or the right of the other column of content. - **Content Placement:** Default play button left, can be right Below is an example of this configuration when the play button is set to left and right. At the Extra Small Breakpoint, this setting has no effect as the play button becomes inline with the content and will always be floated to the left of the body text. | **Play Button Left (Default)** | **Play Button Right** | | --- | --- | | ![](https://hackmd.io/_uploads/ryofw2p75.png) | ![](https://hackmd.io/_uploads/H1-mvhaXc.png) | ### Content Alignment The column of content separate from the video play button by default is all left aligned, but can be set to all be center aligned. - **Content Alignment:** Default left, can be center Below is an example of the hero when set to center aligned. | **Extra Large Breakpoint (Desktop)** | | -------- | | ![](https://hackmd.io/_uploads/H1Ms933X5.png) | | **Medium Breakpoint (Tablet)** | **Extra Small Breakpoint (Mobile)** | | -------- | -------- | | ![](https://hackmd.io/_uploads/BkYs93nQq.png) | ![](https://hackmd.io/_uploads/By135h3Q9.png) | ### Mobile Semi-Transparent Overlay Provides an additional layer of semi-transparent dark color over the image but under the text, which can enhance contrast and readability on mobile devices. - **Optional:** Default enabled, can be disabled Below is an example of the hero with and without the overlay. | **With Overlay (Default)** | **Without Overlay** | | -------- | -------- | | ![](https://hackmd.io/_uploads/B11Aqhh79.png) | ![](https://hackmd.io/_uploads/BJVAc2hm5.png) | ## Resources ### CMS Instructions CMS instructions detailing the steps for configuring this component within the CMS environment are [available here](/8rIRzkzPTPeSPmYpL7u4-w#CMS-Instructions).