---
title: Four Column Asset Hero
tags: Hero
---

# Hero: Four Column Asset Hero
###### **Control Code:** `H.4CA`
<!--
-->
## 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)** |
| -------- |
|  |

| **Medium Breakpoint (Tablet)** | **Extra Small Breakpoint (Mobile)** |
| -------- | -------- |
|  |  |

| **Key** |
| ------- |
|  |

### 1. Background Image

Listed here are the dimensions to reference when creating the background image, however you have two layout options when considering the size and height of the background image. See the [Hero Height](#hero-height) section of this documentation further down the page for more information on choosing how your image fits within the hero.

- **Required:** Must be included
- **Dimensions:**
- Extra Large Breakpoint
- Width: 392px
- Height: 221px - 697px
- Large Breakpoint
- Width: 392px
- Height: 221px - 697px
- Medium Breakpoint
- Width: 268px
- Height: 251px - 476px
- 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.

- **Optional:** Can be excluded, component collapses to hide unused space
- **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. Break Line Color

- **Required:** Must be included
- **Color:** PRIMARY_01 (Brand Primary), changeable within site color palette

### 4. Background Color

- **Required:** Must be included
- **Color:** GRADIENT_PRIMARY_01 (Gradient Brand Primary), changeable within site color palette

### 5. Title

- **Optional:** Can be excluded, component collapses to hide unused space
- **Type Style:** Title 2
- **Color:** NEUTRAL_0 (White), changeable within site color palette
- **SEO HTML Tag:** Default H2, changeable within H1 to H6

### 6. 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

### 7. 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

### 8. 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.

### 9. 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](/cU84_lreQY2OTQupfjeaTg) page of this documentation. Please refer to that page for full details on its configurations and options.

## Additional Configurations

### Break Line Style

Three styles are available for the line break. Note that while these different styles can visually adjust the widths of the image and content areas, it does not actually alter image sizes or any other settings.

- **Break Line Style:** Default arrow line, can be angled line or straight line

At the Extra Small Breakpoint, this setting has no effect as there is no break line.

| Arrow Line (Default) | Angled Line | Straight Line |
| ---------- | --------- | --------- |
|  |  |  |

### Content Alignment

The column of content separate from the image 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)** |
| -------- |
|  |

| **Medium Breakpoint (Tablet)** | **Extra Small Breakpoint (Mobile)** |
| -------- | -------- |
|  |  |

### Hero Height

When considering the size and height of your background image for the hero, you have two sizing options available to you.

**Height is based on the content (default):** By default the height of the hero is based on the total height of the content within the hero, ignoring the height of the background image.

This means that the height of the background image will be dynamic based on the combined height of all the content to the right of the hero and their padding. The background image in this case will scale to maintain its aspect ratio while filling the needed area defined by the height of the content. 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 height cleanly. Likewise, if an image is too small, it will scale up to fit the height but may experience visual degradation because of this.

This is the recommended setting as it ensures everything will fit as clean as possible based on the accompanying content.

**Height is based on the background image:** This alternate option forces the height of the hero to be based on the height of the background image rather than the accompanying content.

In this case the background image will fit to the width of the available area and then scale in height to maintain its aspect ratio, regardless of the amount of supporting content you have in the other column of the hero. The height of the hero itself will then scale to match the height of the background image.

This option is best used when you have only a small amount of content and a taller image that you want to ensure is fully shown. If you have more than a minimal amount of content you should not choose this option, as the content could become cutoff if it is taller than the background image, especially as the screen becomes more narrow.

- **Hero Height:** Default based on content height, can be based on image height

Below is an example of the hero when the height is set to content height versus image height.

At the Extra Small Breakpoint, this setting has no effect as the content appears over the image instead of next to it, in which case the image height will always be dynamic based on the total height of the content.

| **Content Height (Default)** | **Image Height** |
| --- | --- |
|  |  |

### 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** |
| -------- | -------- |
|  |  |

## Resources

### CMS Instructions

#### Hero 4 Column Asset Configuration

While creating or editing content, site administrators and content editors can add a **Hero 4 column assets** content block as follows:

**Step 1:** Navigate to the **Content** menu and either click **Add content** to create a new content or click the **Edit** button under Operations for the content you wish to edit:


On the **Layout** tab, click **Add block** at the section you want to add a hero 4 column assets content block. You may need to add a section before adding a block.


In the side panel on the right-hand side of the window click **Create custom block**.


Select **Hero - 4 Column assets** from the list of available custom blocks.


**Step 2:** Displayed is the window with the hero properties:


The Primary Text Section is expandable:


The Supporting Content Section is expandable:


Mandatory entries include:

- **Title** - The title of the block as shown to the user.
- **Display title** - checkbox
- **Overlay** - checkbox
- **Primary Text Section**
- **Background color**
- **Content Alignment** - Left (default) or Right
- **Supporting Content Section**
- **Break line style** - none, arrow line (default), angle line or straight line
- **Break line color**
- **Height based by** - content (default) or image
- **Image** - up to one media item

Optional entries include:

- **Primary Text Section**
- **Primary title** - text with formatting with text limit 160.
- **HTML tag** – H1 to H6. This field only changes the wrapping HTML of this element. It does not change the style (appearance).
- **Under title decoration** - checkbox
- **Primary body** - text with formatting with text limit 400.
- **CTA buttons** - refer to the [CTA buttons CMS instructions](/H3_6iYFmQ_-AbCD8m_APXQ#CMS-Instructions) for details. Up to two CTA buttons are allowed.
- **Supporting Content Section**
- **Video** - up to one media item
- **FUSE Code** - see [FUSE code CMS instructions](/cU84_lreQY2OTQupfjeaTg#CMS-Instructions) for details
- **Vertical spacing** - see [dynamic vertical spacing CMS instructions](/azdwOTghR8uWkILRsGkvwA?both#CMS-Instructions) for details.
- **Reusable** - checkbox. Would you like to be able to reuse this block? This option can not be changed after saving. If this option is selected, the you will be able to select this block from the list (see **Step 1**).

<!--The entries are represented in the hero 4 column assets content block as follows:

-->

**Step 3:** Fill in the fields as required. For example:

- **Title** - "Hero 4 column assets".
- **Display title** - check
- **Primary Text Section**
- **Content Alignment** - Left
- **Primary Title** - "Sample hero 4 column assets".
- **HTML tag** – H1
- **Under title decoration** - check
- **Primary Body** - "This is a sample hero 4 column assets body".
- **Supporting Content Section**
- **Break line style** - arrow line
- **Height based by** - content
- **Image** - load the image

**Step 4:** Be sure to click the **Add block** button to ensure that your changes are updated.


**Step 5:** The layout tab displays the parameters of the added block. Click the edit icon the edit the block layout.


**Step 6:** Click the **Save layout** button


On the **Edit** tab for the content, make sure that the **Published** checkbox is selected and click **Save**.


**Step 7:** Open the content page using the **URL alias** for the page. URL alias is displayed on the **Edit** tab for the content, refer to the [flexible template CMS instructions](/k-R9oJNzSJG_F4x3P7gIug#CMS-Instructions) for details.


View the updates: