--- title: Sticky CTA tags: Page Structure --- # Page Structure: Sticky CTA ###### **Control Code:** `PS.SCTA` <!-- ![](https://via.placeholder.com/1600x900/D3D3D3/000000/?text=Splash%20Placeholder%20Image) --> ## About This Component The design system provides an optional, collapsible alert CTA box aligned to the right side of a site's homepage. This can be used for special announcements and other alerts that might not be prominent enough as part of main site navigation. <!-- ### 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, the Sticky CTA instead becomes inline with the other page content for a better mobile experience. In this state, it appears at the top of the page below any hero that may be on the page. ### 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), Open** | **Extra Large Breakpoint (Desktop), Closed** | | -------- | -------- | | ![](https://hackmd.io/_uploads/HkkPb-Q85.png) | ![](https://hackmd.io/_uploads/r1OD-Z7Uc.png) | | **Medium Breakpoint (Tablet), Open** | **Medium Breakpoint (Tablet), Closed** | | -------- | -------- | | ![](https://hackmd.io/_uploads/BkV_Z-7Uc.png) | ![](https://hackmd.io/_uploads/HkiOWbXL5.png) | | **Extra Small Breakpoint (Mobile), Open** | **Extra Small Breakpoint (Mobile), Closed** | | -------- | -------- | | ![](https://hackmd.io/_uploads/rJmATbQLq.png) | ![](https://hackmd.io/_uploads/S1Y0aW78c.png) | | **Key** | | ------- | | ![](https://hackmd.io/_uploads/S1-x39hQc.png) | ### 1. Background Color - **Required:** Must be included - **Color:** PRIMARY_02 (Brand Secondary), changeable within site color palette ### 2. CTA Title This is the primary title for the Sticky CTA, it appears in the open/expanded state at all breakpoints, but is also used for the closed/collapsed state at the Extra Small Breakpoint. - **Required:** Must be included - **Type Style:** Violator 1 - **Color:** NEUTRAL_0 (Solid White), changeable within site color palette ### 3. Under-Title Decoration Line This line provides a break between the title text and the 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:** NEUTRAL_0 (Solid White), changeable within site color palette ### 4. Body Text - **Optional:** Can be excluded, component collapses to hide unused space - **Type Style:** Violator 2 - **Color:** NEUTRAL_0 (Solid White), changeable within site color palette ### 5. Link - **Optional:** Can be excluded, component collapses to hide unused space - **Type Style:** Violator Link - **Color:** NEUTRAL_0 (Solid White), changeable within site color palette ### 6. Toggle Button Color - **Required:** Must be included - **Color:** NEUTRAL_0 (Solid White), changeable within site color palette ### 7. Short Closed Title This title only appears when the Sticky CTA is closed/collapsed at the Extra Large, Large, and Medium Breakpoints. This configuration has no effect at the Extra Small Breakpoint, as the Sticky CTA becomes a bar across the screen that uses the main CTA Title for the closed/collapsed state. - **Optional:** Can be excluded, component collapses to hide unused space - **Type Style:** Violator 1 - **Color:** NEUTRAL_0 (Solid White), changeable within site color palette Below is an example of the Sticky CTA in the closed/collapsed state when this short closed title is not included. | Extra Large Breakpoint (Desktop) | Medium Breakpoint (Tablet) | | ---------- | --------- | | ![](https://hackmd.io/_uploads/HJNTbZ785.png) | ![](https://hackmd.io/_uploads/ryopbWm85.png) | ## Additional Configurations ### Sticky CTA Enabled By default this Sticky CTA component is not enabled, however when enabled it is automatically applied every page on the site. This component only needs to be configured once per site. - **Sticky CTA Enabled:** Default the Sticky CTA is disabled, can be enabled for the whole site ## Resources ### CMS Instructions #### Sticky CTA Administration Site administrators can make changes to the Sticky CTA settings leveraging the Drupal Admin interface as follows: **Step 1:** Navigate to the **Structure** menu and click **Config pages**: ![Configuration Menu Item](https://hackmd.io/_uploads/Skfy6S3Qq.png) On the Config Pages screen, click the **Edit** button under Operations for the **Sticky CTA** library: ![Configuration library](https://hackmd.io/_uploads/S1RMAaewq.png) **Step 2:** Review the available settings within the sticky CTA config page: ![Sticky CTA Configuration page](https://hackmd.io/_uploads/SJjgj0xPc.png) Mandatory entries include: - **Hidden** checkbox - Boolean. Default is hidden & Sticky CTA is disabled. If the Sticky CTA is set to be hidden throughout the site, then remaining settings will not be required. - **Background Color** - Select field. Default is "Alert Red" (Primary). - **Text Color** - Select field. Default is "White" (Standard White 1). - **Display Short Text title** - Select field. Options are “Button with text” or “Only button”. Default is “Button with text”. - **Title** - Character limit 60. Default is “A Message from Novartis on Covid-19”. - **Under Title** - Boolean. Options to “Show” or” Hide” the Indication information section. Default is "Show". - **Body** - Character limit 130. Default text for Default state: “For additional support, including samples, please contact your Novartis representative”. Color and Font can be set. - **Attributes** - Target: Open in New Window or Same Window. Optional entries include: - **Short Title** - Character limit 24. Default state is ”Covid-19 Information”. - **HTML tag** - H1 to H6. Value H2. - **Link** - Default is "http://novartishcp.com". - **Attributes** - Rel is the relationship between the document containing the hyperlink and the destination resource. - **Attributes** - Class. - **Link Title** - Character limit 30. Default is “Learn More”. Note for Content Editors: - If the Sticky CTA is set to be disabled through the site, then the content editor is unable to set the sticky CTA. - For Collapsed state for larger breakpoints (XL, L M), short title text Character size 24 is now mandatory. **Step 3:** Change the fields values as you need to. **Step 4:** Be sure to click the **Save** button to ensure that your changes are updated. ![Save Button](https://hackmd.io/_uploads/SJI5dH279.png) **Step 5:** View the updates: ![Sticky CTA after updates](https://hackmd.io/_uploads/rJb6dBnmc.png)