---
# System prepended metadata

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

---

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

# Banner: Center Aligned Banner, With Icon
###### **Control Code:** `B.CAB.001`
<!--
![](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, With Icon](/sxpokqMNRxaDjiwA2xSUYg).

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

| **Medium Breakpoint (Tablet)** | **Extra Small Breakpoint (Mobile)** |
| -------- | -------- |
| ![](https://hackmd.io/_uploads/rkaFPXw45.png) | ![](https://hackmd.io/_uploads/rkGcwQwV5.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. 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. Icon

- **Required:** Must be included
- **Dimensions:**
    - Extra Large Breakpoint
        - Width: 72px - 120px
        - Height: 72px - 120px
    - Large Breakpoint
        - Width: 60px - 100px
        - Height: 60px - 100px
    - Medium Breakpoint
        - Width: 52px - 100px
        - Height: 52px - 100px
    - Extra Small Breakpoint
        - Width: 64px - 88px
        - Height: 64px - 88px

The icon for this component otherwise follows the standard requirements outlined in the [Images](/9XfBsCB3QPyxX5-9wfosjQ) page of this documentation. Please refer to that page for full details on its configurations and options.

### 8. 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/SJE6D7PEq.png) | ![](https://hackmd.io/_uploads/BJhaP7vVc.png) |

#### Medium Breakpoint (Tablet)

| 7 Columns | 5 Columns |
| --------- | --------- |
| ![](https://hackmd.io/_uploads/H1XCP7w4c.png) | ![](https://hackmd.io/_uploads/SJNMvUPEc.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/S12kO7wEc.png) | ![](https://hackmd.io/_uploads/S12kO7wEc.png) |

## Resources

### CMS Instructions

#### Banner with Icons Configuration

While creating or editing content, site administrators and content editors can add a **Banner with icon** 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:

![Content](https://hackmd.io/_uploads/Sk-bQliX9.png)

On the **Layout** tab, click **Add block** at the section you want to add a banner with icon. You may need to add a section before adding a block.

![Content Layout](https://hackmd.io/_uploads/SJhf7gimq.png)

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

![Custom Block](https://hackmd.io/_uploads/SkjNmxiX5.png)

Select **Banner - icons** from the list of available custom blocks.

![Create Banner with Icons](https://hackmd.io/_uploads/ByAAdzjQc.png)

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

![Banner Icons](https://hackmd.io/_uploads/BJOeKMo75.png)

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
- **Icons** - Up to 12 icon blocks. Items are distributed across a number of rows depending on the available space within the module and screen size. Items have the same spacing between each other. If there is not enough items to fill a row, they are center aligned together as a group within the row.
For each icon the following entries are mandatory:
    - **Block description** - text. A brief description of your block.
    - **Icon type** - icon (default) or data.
    - **Icon image** - media. Only one media item is allowed. This entry appears if **Icon type** is icon.
    - **Icon value** - text with character limit 6. This entry appears if **Icon type** is data.
    - **Icon subtitle position** - above the value (default) or below the value. This entry appears if **Icon type** is data.

Optional entries include:

- **Icons** - Up to 12 icon blocks. Items are distributed across a number of rows depending on the available space within the module and screen size. Items have the same spacing between each other. If there is not enough items to fill a row, they are center aligned together as a group within the row.
For each icon the following entries are optional:
    - **Icon title** - text with character limit 50. 
    - **Icon body** - text with character limit 75. No HTML tags allowed. Lines and paragraphs break automatically. Web page addresses and email addresses turn into links automatically.
    - **Icon subtitle** - text. This entry appears if **Icon type** is data.
- **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**).

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

- **Title** - "Banner with icon".
- **Display title** - check
- **Component size** - Full wigths
- **Icons** 
    - **Block Description** - "Icon"
    - **Icon type** - icon
    - **Icon image** - upload the image
    ![Icon](https://hackmd.io/_uploads/BJTWtGom9.png)
    - **Icon title** - "Icon title"
    - **Icon body** - "Icon body"
    - Click **Create custom block**
    ![Add Icon](https://hackmd.io/_uploads/rJ2ftfjQc.png)

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

![Add Block Button](https://hackmd.io/_uploads/SySoXeiX9.png)

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

![Edit Block](https://hackmd.io/_uploads/H1nIFziQc.png)

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

![Save Layout](https://hackmd.io/_uploads/r1A0mxo79.png)

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

![Publish Layout](https://hackmd.io/_uploads/Hy8e4loQ5.png)

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

![URL Alias](https://hackmd.io/_uploads/BkrrNlo7c.png)

View the updates:

![Updated Banner with Icon](https://hackmd.io/_uploads/rkvgMXim5.png)
