---
# System prepended metadata

title: 'Center Aligned Banner, No Icon'
tags: [Banner]

---

---
title: Center Aligned Banner, No Icon
tags: Banner
---

# Banner: Center Aligned Banner, No Icon
###### **Control Code:** `B.CAB.002`
<!--
![](https://via.placeholder.com/1600x900/D3D3D3/000000/?text=Splash%20Placeholder%20Image)
-->
## About This Component

The design system features several banner configurations that include left and center aligned content with and without icons. The design system features a default icon set, but custom icons can also be uploaded. 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.

:::info
*Placeholder content below.*
:::

Only the 7 Column and 5 Column sizes of this component are available. For a comparable Full Width sized component, see the [Left Aligned Banner, No Icon](/Z1JngswVSKGgyt9zq2cIyA).

### 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/S1TRBmDV9.png) |

| **Medium Breakpoint (Tablet)** | **Extra Small Breakpoint (Mobile)** |
| -------- | -------- |
| ![](https://hackmd.io/_uploads/BySkIQDNc.png) | ![](https://hackmd.io/_uploads/SkayLXw4c.png) |

| **Key** |
| ------- |
| ![](https://hackmd.io/_uploads/S1-x39hQc.png) |

### 1. Title Text

- **Optional:** Can be excluded, component collapses to hide unused space
- **Type Style:** Title 3
- **Color:** NEUTRAL_80 (Off Black), changeable within site color palette
- **SEO HTML Tag:** Default H3, changeable within H1 to H6

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

### 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 7 Columns, can be 5 Columns

#### Extra Large Breakpoint (Desktop)

| 7 Columns | 5 Columns |
| --------- | --------- |
| ![](https://hackmd.io/_uploads/H1xpL7DV5.png) | ![](https://hackmd.io/_uploads/B1w68mvEq.png) |

#### Medium Breakpoint (Tablet)

| 7 Columns | 5 Columns |
| --------- | --------- |
| ![](https://hackmd.io/_uploads/HyyCLQPE5.png) | ![](https://hackmd.io/_uploads/S1L1w7PN5.png) |

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

| 7 Columns | 5 Columns |
| --------- | --------- |
| ![](https://hackmd.io/_uploads/B1BePQD4c.png) | ![](https://hackmd.io/_uploads/ryjlwmDNq.png) |

## Resources

### CMS Instructions

:::info
*TODO: Novartis to provide if available.*
:::

CMS instructions detailing the steps for configuring this component within the CMS environment are [available here](https://novartis.com).

