--- title: FUSE Code tags: Atom --- # Atom: FUSE Code ###### **Control Code:** `AT.FC` <!-- ![](https://via.placeholder.com/1600x900/D3D3D3/000000/?text=Splash%20Placeholder%20Image) --> ## About This Component The design system allows for a FUSE code (signifying MLR approval of website content and assets) to be placed beneath almost every discrete component in the system. FUSE codes are not required for every component and will be tied to MAP submission processes documented elsewhere. Website owners and designers should work with their MAP leads to establish where FUSE codes will be required within site content during MAP submission planning. <!-- ### 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.* ::: The FUSE Code is optional everywhere it is used. By default it is available for each primary modular component, appearing beneath the component after all the other content within the component. Some components, like the [Footer](/OjNTbTMgR8GY7Scpuh0tcQ), integrated the code to be within the component itself. ### Related Components :::info *TODO: Novartis to write. May not be needed for this component.* ::: 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. May not be needed for this component.* ::: Specific accessibility considerations and recommendations for this component. --> ## Primary Configurations | **Extra Large Breakpoint (Desktop)** | | -------- | | ![](https://hackmd.io/_uploads/Hy1ODGwE5.png) | | **Medium Breakpoint (Tablet)** | **Extra Small Breakpoint (Mobile)** | | -------- | -------- | | ![](https://hackmd.io/_uploads/rJPuvGD4q.png) | ![](https://hackmd.io/_uploads/HkouPzP49.png) | | **Key** | | ------- | | ![](https://hackmd.io/_uploads/S1-x39hQc.png) | ### 1. Code Text - **Optional:** Can be excluded, component collapses to hide unused space - **Type Style:** Disclaimers and Notes - **Color:** NEUTRAL_100 (Solid Black), changeable within site color palette ## Additional Configurations ### Code Alignment When the FUSE Code appears below a component it by default is aligned to the right edge of the component, however it can be set to be aligned to the left edge instead. For components that span across the width of the entire screen, such as heroes, then the FUSE Code will align to the edge of the content area rather than the edge of the screen. This setting only applies when the FUSE Code appears below the component. This setting has no effect if the FUSE Code is integrated to be within the component itself. For example, the [Footer](/OjNTbTMgR8GY7Scpuh0tcQ) has a fixed location for its FUSE Code and it cannot be moved. See individual component pages for details on how they integrate the FUSE Code. - **Code Alignment:** Default right aligned, can be left aligned Below is an example of the FUSE Code both right and left aligned below a component. | Right Aligned (Default) | Left Aligned | | ---------- | --------- | | ![](https://hackmd.io/_uploads/rkcFwfDVq.png) | ![](https://hackmd.io/_uploads/Hk0FDGDEq.png) | ## Resources ### CMS Instructions #### FUSE Code Configuration While adding or editing content blocks, site administrators and content editors can configure FUSE code for a context block. While administering the footer, site administrators can configure FUSE code for the footer. **Step 1:** Scroll to the **FUSE code** section of the edit block window and expand the section. ![FUSE Code](https://hackmd.io/_uploads/BJSmlY9Ic.png) Fill in the fields: - **FUSE code align** - right side or left side. - **FUSE code text** - text. - **FUSE code display** - select if FUSE code should be displayed for this content block or footer. **Step 2:** After you save the content block or a footer, it will contain the FUSE code. ![FUSE Code](https://hackmd.io/_uploads/rJPpWYqU9.png)