--- title: Left Aligned Banner, No Icon tags: Banner --- # Banner: Left Aligned Banner, No Icon ###### **Control Code:** `B.LAB.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.* ::: At the Extra Small Breakpoint, content within the banner stacks to enhance readability on mobile. At this breakpoint, this component becomes identical to the [Center Aligned Banner, No Icon](/A9m17gVFTgG2vGlWkrT0ZA) 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/ryLDH7vE5.png) | | **Medium Breakpoint (Tablet)** | **Extra Small Breakpoint (Mobile)** | | -------- | -------- | | ![](https://hackmd.io/_uploads/Bk2wHQDEc.png) | ![](https://hackmd.io/_uploads/B14_H7PE9.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 2 - **Color:** NEUTRAL_80 (Off Black), changeable within site color palette - **SEO HTML Tag:** Default H2, 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. ## 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).