--- title: Multiple Callouts Banner tags: Banner --- # Banner: Multiple Callouts Banner ###### **Control Code:** `B.MCB` <!-- ![](https://via.placeholder.com/1600x900/D3D3D3/000000/?text=Splash%20Placeholder%20Image) --> ## About This Component This banner type allows for visual display of content that might ordinarily be presented as bullet points or lists that feature visuals. These callouts can be presented with either iconography or text elements to show important data points. <!-- ### 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)** | | -------- | | ![](https://hackmd.io/_uploads/S1Ja5ysEc.png) | | **Medium Breakpoint (Tablet)** | **Extra Small Breakpoint (Mobile)** | | -------- | -------- | | ![](https://hackmd.io/_uploads/rkspqksNc.png) | ![](https://hackmd.io/_uploads/rJER9ko45.png) | | **Key** | | ------- | | ![](https://hackmd.io/_uploads/S1-x39hQc.png) | ### 1. 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. ## Callout Configurations Each configuration here is repeated for each of the callouts included in the component, up to a maximum of 12 callouts. Note that you have two options for the type of callouts to use. See the [Callouts Type](#Callouts-Type) configuration below for more information. - **Number of Callouts:** 1-12 ### 2. Callout Title - **Optional:** Can be excluded, component collapses to hide unused space - **Type Style:** Heading 3 - **Color:** GRADIENT_PRIMARY_01 (Primary Gradient), changeable within site color palette - **SEO HTML Tag:** Default H6, changeable within H1 to H6 ### 3. Callout 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. Callout Background Color - **Optional:** Can be excluded - **Color:** GRADIENT_PRIMARY_01 (Primary Gradient), changeable within site color palette ## Callout Type: Icon When using the Icons [Callouts Type](#Callouts-Type), these are the configuration options for each callout. ### 5. Icon - **Required:** Must be included - **Dimensions:** - Extra Large Breakpoint - Width: 72px - 136px - Height: 72px - 136px - Large Breakpoint - Width: 60px - 112px - Height: 60px - 112px - Medium Breakpoint - Width: 56px - 104px - Height: 56px - 104px - Extra Small Breakpoint - Width: 68px - 128px - Height: 68px - 128px 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. ## Callout Type: Datapoint When using the Datapoints [Callouts Type](#Callouts-Type), these are the configuration options for each callout. ### 6. 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 ### 7. 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 ### 8. 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 ## Additional Configurations ### Callouts Type When using this component, you have two options for the type of callouts you can use. The callouts can either all be icons or all be datapoints. The configuration options for each are detailed above in their respective sections. - **Callout Type:** Default icons, can be datapoints ### Datapoint Arrangement When using the datapoint version of the callouts, by default the label for the data appears above the value, however it can appear below the value instead. See the [Datapoint Label](#6-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. | Label Above (Default) | Label Below | | --------- | --------- | | ![](https://hackmd.io/_uploads/BJnJikiE9.png) | ![](https://hackmd.io/_uploads/Skbej1s4q.png) | ### 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 | | ---------- | --------- | --------- | | ![](https://hackmd.io/_uploads/B180sJiN5.png) | ![](https://hackmd.io/_uploads/BkA-gxsNc.png) | ![](https://hackmd.io/_uploads/HyHMgesV5.png) | #### Medium Breakpoint (Tablet) | Full Width | 7 Columns | 5 Columns | | ---------- | --------- | --------- | | ![](https://hackmd.io/_uploads/B1iknyiEq.png) | ![](https://hackmd.io/_uploads/SJfx2JiEq.png) | ![](https://hackmd.io/_uploads/S1vlnys4c.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. | Full Width | 7 Columns | 5 Columns | | ---------- | --------- | --------- | | ![](https://hackmd.io/_uploads/H1XMn1oNc.png) | ![](https://hackmd.io/_uploads/H1XMn1oNc.png) | ![](https://hackmd.io/_uploads/H1XMn1oNc.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).