---
title: Text Only Hero
tags: Hero
---

# Hero: Text Only Hero
###### **Control Code:** `H.TO`
<!--
-->
## 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 Color

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

### 2. Title

- **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:** Default H1, changeable within H1 to H6

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

### 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. 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](/cU84_lreQY2OTQupfjeaTg) 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)** |
| -------- |
|  |

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

### Content Width

Content by default spans a wide area that fills most of the hero horizontally, however it can be set to be more narrow to tighten up the content to a smaller width.

- **Optional:** Default wide, can be narrow

Below is an example of the hero when the content is wide and narrow.

#### Extra Large Breakpoint (Desktop)

| Wide (Default) | Narrow |
| ---------- | --------- |
|  |  |

#### Medium Breakpoint (Tablet)

| Wide (Default) | Narrow |
| ---------- | --------- |
|  |  |

#### Extra Small Breakpoint (Mobile)

At the Extra Small Breakpoint this configuration has no effect, as the content will always go to the wide width to provide more visual room on mobile.

| Wide (Default) | Narrow |
| ---------- | --------- |
|  |  |

## Resources

### CMS Instructions

#### Hero Text Configuration

While creating or editing content, site administrators and content editors can add a **Hero text** 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 text 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 - text** from the list of available custom blocks.


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


The Primary Text Section is expandable:


Mandatory entries include:

- **Title** - The title of the block as shown to the user.
- **Display title** - checkbox
- **Primary Text Section**
- **Component size** - 8 columns (default) or 6 columns
- **Component Alignment** - Left (default) or Right

Optional entries include:

- **Primary Text Section**
- **Title** - text with formatting with text limit 200. Either Title or Body should not be empty.
- **HTML tag** – H1 to H6. This field only changes the wrapping HTML of this element. It does not change the style (appearance).
- **Under title** - checkbox
- **Body** - text with formatting with text limit 700. Either Title or Body should not be empty.
- **Background color**
- **CTA buttons** - refer to the [CTA buttons CMS instructions](/H3_6iYFmQ_-AbCD8m_APXQ#CMS-Instructions) for details. Up to two CTA buttons are allowed.
- **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 free form content block as follows:

-->

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

- **Title** - "Hero text".
- **Display title** - check
- **Primary Text Section**
- **Component size** - 8 columns
- **Component Alignment** - Left
- **Title** - "Sample hero text".
- **HTML tag** – H1
- **Under title** - check
- **Body** - "This is a sample hero text body".

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