--- title: Full Width Asset Hero, No Video tags: Hero --- # Hero: Full Width Asset Hero, No Video ###### **Control Code:** `H.FWA.001.002` <!-- ![](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. :::info *Placeholder content below.* ::: As with all hero components, it should be used only once at the top of a page to provide an interesting introduction to the content of the page below. No text should be placed in the image file itself and should instead be part of the dynamic text over the image. Logos can be placed in the image if it does not overlap with any dynamic content. While the content over the image is all individually optional, at least one piece of content must be included. If no content is desired at all over the image, see the related [Full Width Asset Hero, Image Only](/hero/full-width-asset-image-only) version of this 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. :::info *Placeholder content below.* ::: - **[Full Width Asset Hero, With Video](/hero/full-width-asset-with-video):** Includes a video CTA button, which opens a video player in a modal when clicked. - **[Full Width Asset Hero, Image Only](/hero/full-width-asset-image-only):** Has no content over the image, putting the focus on the large hero image only. ### Accessibility :::info *TODO: Novartis to write.* ::: Specific accessibility considerations and recommendations for this component. --> ## Primary Configurations | **Extra Large Breakpoint (Desktop)** | | -------- | | ![](https://hackmd.io/_uploads/r1ZWKh275.png) | | **Medium Breakpoint (Tablet)** | **Extra Small Breakpoint (Mobile)** | | -------- | -------- | | ![](https://hackmd.io/_uploads/rkEWF3hX9.png) | ![](https://hackmd.io/_uploads/HJFZKh2Xc.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. 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 ### 3. 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 ### 4. 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 ### 5. 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. ### 6. 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 ### Content Alignment Content within the hero 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/SJ7Rt3nQc.png) | | **Medium Breakpoint (Tablet)** | **Extra Small Breakpoint (Mobile)** | | -------- | -------- | | ![](https://hackmd.io/_uploads/ryt0F2nm5.png) | ![](https://hackmd.io/_uploads/HJACFhnQq.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/Sy1x5hnQc.png) | ![](https://hackmd.io/_uploads/BJrgc3n75.png) | ## Resources ### CMS Instructions CMS instructions detailing the steps for configuring this component within the CMS environment are [available here](/8rIRzkzPTPeSPmYpL7u4-w#CMS-Instructions).