--- title: Content Modal tags: Page Structure --- # Page Structure: Content Modal ###### **Control Code:** `PS.CM` <!-- ![](https://via.placeholder.com/1600x900/D3D3D3/000000/?text=Splash%20Placeholder%20Image) --> ## About This Component The design system content modal can be triggered atop a site page wherever a CTA button is available to be added to a component. The modal features a variety of content configurations, including the ability to feature images and video. <!-- ### 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/BkHB4jWIc.png) | | **Medium Breakpoint (Tablet)** | **Extra Small Breakpoint (Mobile)** | | -------- | -------- | | ![](https://hackmd.io/_uploads/HyTSEoWI9.png) | ![](https://hackmd.io/_uploads/HymI4obIq.png) | | **Key** | | ------- | | ![](https://hackmd.io/_uploads/S1-x39hQc.png) | ### 1. Eyebrow Title - **Optional:** Can be excluded, component collapses to hide unused space - **Type Style:** Heading 3 - **Color:** NEUTRAL_100 (Solid Black), changeable within site color palette - **SEO HTML Tag:** Default H6, changeable within H1 to H6 ### 2. Main Title - **Optional:** Can be excluded, component collapses to hide unused space - **Type Style:** Title 2 - **Color:** NEUTRAL_100 (Solid Black), changeable within site color palette - **SEO HTML Tag:** Default H2, changeable within H1 to H6 ### 3. Under-Title Decoration Line This line provides a break between the main title text and other text below it. It can be optionally removed, however if either the title or the text below 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 ### 4. Subtitle - **Optional:** Can be excluded, component collapses to hide unused space - **Type Style:** Heading 2 - **Color:** NEUTRAL_100 (Solid Black), changeable within site color palette - **SEO HTML Tag:** Default H5, changeable within H1 to H6 ### 5. Body Text - **Optional:** Can be excluded, component collapses to hide unused space - **Type Style:** Paragraph 1 - **Color:** NEUTRAL_100 (Solid Black), changeable within site color palette ### 6. Additional Component When creating a modal, you have the option to include another component inside the modal to better customize the modal's content. The gray box in the example images on this page denote this customizable area. The actual modal when created will not have this gray box, and instead this additional component, if included, will appear there instead. - **Optional:** Can be excluded, component collapses to hide unused space - **Additional Component Options:** - [Free Form Text](/KwlkT8WFQMaH5rBkfhipPQ) - [Single Featured Content Card, Asset Only](/nAgvDpldTZOp57R4XyWGZw) - [Single Featured Content Card, With Content](/v1bCT_A-QZuiYAFJbJciLw) If an additional component supports multiple layout sizes, to fit within the modal it must be set to use the 7 Column size only. Otherwise, the additional component follows all the standard configuration options available to it. ### 7. 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. <!-- Note that in additional to this FUSE code, if an [Additional Component](#6-Additional-Component) is included inside the modal and that component supports a FUSE code then a separate code will also be included inside the modal as part of that component. --> ## Additional Configurations <!-- ### Opening Configuration When creating a modal you must define when and how it will appear. - **Opening Configuration:** Can be either on click or on page load #### On Click When configured to open on click, the modal will appear when the user clicks a button on the site. To support this, you must also configure a [CTA Button](/H3_6iYFmQ_-AbCD8m_APXQ) as part of another component to be set to open the modal. #### On Page Load When configured to open on page load, the modal will appear when the user arrives at the site with a specific URL parameter. The URL parameter will use the internal CMS ID for the modal. For example, it may look like `mywebsite.com/mypage?modal=1234` This option is best used to support other material that links to the site. For example, the URL could be used to link to the site from an email campaign so that anyone who uses the link in the email sees the modal when they arrive at the site, but no one else does. --> ### Closing Configuration <!-- When creating a modal you can control how it can be closed. - **Closing Configuration:** Default has a standard close button, but can be given a custom close state --> Currently there is only one option for how the user closes the modal, but in the future other options may be added. #### Standard Close Button (Default) By default the modal has a close button in the top right of the modal. When this button is present, the modal can also be closed when the user clicks outside of the modal area or presses the escape button on their keyboard. <!-- #### Custom Close State Alternatively the standard close button can be removed, disabling the other methods for closing the modal as well. When set to this state, you must define a new means for the modal to be closed. For example, the modal could be set to be closed when a [CTA Button](/H3_6iYFmQ_-AbCD8m_APXQ) inside the modal's [Additional Component](#6-Additional-Component) is clicked as a confirmation. --> ## Resources ### CMS Instructions #### Content Modal Configuration While creating or editing content, site administrators and content editors can add a **Modal** 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 hero text content block. 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 **Modal** from the list of available custom blocks. ![Create Modal Custom Block](https://hackmd.io/_uploads/B1JeNkmNc.png) **Step 2:** Displayed is the window with the Configure block properties for Modal. ![Configure Modal Custom Block](https://hackmd.io/_uploads/B1n741X45.png) Mandatory Content Modal configuration entries include: - **Title** - Character limit 170. - **Modal ID** - Plaintext. - **Body** - WYSIWIG: Freeform. User can set the text by WYSIWYG with predefined values in base theme. Text is left-aligned by default. Optional Content Modal configuration entries include: - **Short Title** - Character limit 24. Short title text can be set by WYSIWYG with predefined values in base theme. - **Title** - Character limit 30. Title text can be set by WYSIWYG with predefined values in base theme. Set to US Pharma title. - **Under_Title Decoration** - Boolean. Default = True. - **Subtitle** - Character limit 170. Default H tag: H3. - User can optionally set an icon, image, paragraph or list. - **CTA buttons** - refer to the [CTA buttons CMS instructions](/H3_6iYFmQ_-AbCD8m_APXQ#CMS-Instructions). Up to 2 CTA buttons are allowed. - **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. Video support will be offered post-MVP. **Step 3:** Fill in the fields as required. For example: - **Title** - “Test Modal Title". - **Modal ID** - “Modal1_ID". - **Body** - “body”. **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 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. **Note:** To access a Content Modal you will need to add a [CTA Modal](https://hackmd.io/H3_6iYFmQ_-AbCD8m_APXQ#CMS-Instructions) to your page.