---
title: Datapoint Banner
tags: Banner
---

# Banner: Datapoint Banner
###### **Control Code:** `B.DB`
<!--
-->
## About This Component

The datapoint banner allows for a readable approach to display numerical data alongside supporting text content and optional CTAs. As with other card-based UI components, one can be used full width or several arranged in horizontal rows at five and seven column configurations.
<!--
### 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. Title Text

- **Optional:** Can be excluded, component collapses to hide unused space
- **Type Style:** The type style depends on the [Component Size](#Component-Size) configuration
- Full Width: Title 2
- 7 Columns: Title 3
- 5 Columns: Title 3
- **Color:** NEUTRAL_80 (Off Black), changeable within site color palette
- **SEO HTML Tag:** The default H tag depends on the [Component Size](#Component-Size) configuration, changeable within H1 to H6
- Full Width: Default H2
- 7 Columns: Default H2
- 5 Columns: Default H2

### 2. 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:** PRIMARY_01 (Brand Primary), changeable within site color palette

### 3. Body Text

- **Optional:** Can be excluded, component collapses to hide unused space
- **Type Style:** Paragraph 1
- **Color:** NEUTRAL_50 (Medium Gray), changeable within site color palette

### 4. 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 be centered in the available space

The CTA Buttons for this component follows the standard requirements outlined in the [CTA Button](/H3_6iYFmQ_-AbCD8m_APXQ) page of this documentation. Please refer to that page for full details on its configurations and options.

### 5. Background Color

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

### 6. Break Line

- **Optional:** Can be excluded, component collapses to hide unused space
- **Color:** PRIMARY_01 (Brand Primary), changeable within site color palette

### 7. Datapoint Label

- **Optional:** Can be excluded, component collapses to hide unused space
- **Type Style:** The type style depends on the [Datapoint Arrangement](#Datapoint-Arrangement) configuration
- Label Above: Heading 4
- Label Below: Heading 3
- **Color:** NEUTRAL_0 (Solid White), changeable within site color palette
- **SEO HTML Tag:** Default H6, changeable within H1 to H6

### 8. Datapoint Value

:::info
*Note for Novartis:*
The Type Style for both this and the symbol below may need to be uniquely defined within the type waterfall, since the font size is dynamically defined by javascript.
:::

- **Required:** Must be included
- **Type Style:** The type style for this text is unique and dynamic. Since there is limited space available to fit the value, the font size automatically scales based on the amount of text entered and the width of the screen. The more characters used or the narrower the screen becomes then the smaller the text becomes. The font size for this text cannot be defined as part of the normal type waterfall as outlined in the [Fonts and Typography](/AeZVwi4aTDCeevMI4zeDuQ) page of this documentation. The baseline type style depends on the [Datapoint Arrangement](#Datapoint-Arrangement) configuration:
- Label Above: Display Number 1
- Label Below: Display Number 2
- **Color:** NEUTRAL_0 (Solid White), changeable within site color palette
- **Character Limit:** 5

### 9. Datapoint Symbol

- **Optional:** Can be excluded, component collapses to hide unused space
- **Type Style:** The type style for this text is unique and dynamic. Since there is limited space available to fit the value, the font size automatically scales based on the amount of text entered and the width of the screen. The more characters used or the narrower the screen becomes then the smaller the text becomes. The font size for this text cannot be defined as part of the normal type waterfall as outlined in the [Fonts and Typography](/AeZVwi4aTDCeevMI4zeDuQ) page of this documentation. The baseline type style depends on the [Datapoint Arrangement](#Datapoint-Arrangement) configuration
- Label Above: Display Number 1
- Label Below: Display Number 2
- **Color:** NEUTRAL_0 (Solid White), changeable within site color palette
- **Character Limit:** 1

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

### Datapoint Arrangement

By default the label for the data appears above the value, however it can appear below the value instead. See the [Datapoint Label](#7-Datapoint-Label) configuration above for more details on its settings when the arrangement is changed.

- **Datapoint Arrangement:** Default label is above, can be below

Below is an example of this configuration when the label is set to be above and below for each size of the component.

#### Full Width

| Label Above (Default) | Label Below |
| --------- | --------- |
|  |  |

#### 7 Columns

| Label Above (Default) | Label Below |
| --------- | --------- |
|  |  |

#### 5 Columns

| Label Above (Default) | Label Below |
| --------- | --------- |
|  |  |

### Component Size

This component can be configured to different sizes, allowing it to be placed on the page side-by-side with other components if needed. Some [Primary Configurations](#Primary-Configurations) above may have different options depending on the size chosen. Please see the [Grid and Layout Guidelines](/wyWz2X5ETqqn8VQo3KLHdQ) page of this documentation for more information on sizing and laying out components in the system.

- **Component Size:** Default Full Width, can be 7 Columns or 5 Columns

#### Extra Large Breakpoint (Desktop)

| Full Width | 7 Columns | 5 Columns |
| ---------- | --------- | --------- |
|  |  |  |

#### Medium Breakpoint (Tablet)

| Full Width | 7 Columns | 5 Columns |
| ---------- | --------- | --------- |
|  |  |  |

#### Extra Small Breakpoint (Mobile)

At the Extra Small Breakpoint, the 7 Columns and 5 Columns sizes become Full Width, stacking with any other component that was to their side.

| Full Width | 7 Columns | 5 Columns |
| ---------- | --------- | --------- |
|  |  |  |

## Resources

### CMS Instructions

#### Banner Configuration

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


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


Mandatory entries include:

- **Title** - The title of the block as shown to the user.
- **Display title** - checkbox
- **Component size** - Full wigths (default), Seven columns, Five columns
- **Title** - text with formatting.
- **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** - toggle hide or show (default)
- **Line color**
- **Chevron color**
- **Chevron type** - icon (default) or data
- **Icon** - media. This entry appears if **Chevron type** is icon.
- **Value** - text with character limit 6. This entry appears if **Chevron type** is data.
- **Subtitle position** - above the value (default) or below the value. This entry appears if **Chevron type** is data.

Optional entries include:

- **Body** - text with formatting with character limit 420.
- **Subtitle** - text. This entry appears if **Chevron type** is data.
- **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 banner content block as follows:

-->

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

- **Title** - "Banner".
- **Display title** - check
- **Component size** - Full wigths
- **Title** - "Banner title".
- **Chevron type** - icon
- **Icon** - upload 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: