---
# System prepended metadata

title: Footer
tags: [Navigation]

---

---
title: Footer
tags: Navigation
---

# Navigation: Footer
###### **Control Code:** `N.F`
<!--
![](https://via.placeholder.com/1600x900/D3D3D3/000000/?text=Splash%20Placeholder%20Image)
-->
## About This Component

The design system features a common, site-wide footer element. Links, logos, and other standardized Novartis information is housed here.
<!--
### 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/HyZOhc3N9.png) |

| **Medium Breakpoint (Tablet)** | **Extra Small Breakpoint (Mobile)** |
| -------- | -------- |
| ![](https://hackmd.io/_uploads/By2dh92Vq.png) | ![](https://hackmd.io/_uploads/B1UY3qn4q.png) |

| **Key** |
| ------- |
| ![](https://hackmd.io/_uploads/S1-x39hQc.png) |

### 1. HCP Notice Text

- **Optional:** Can be excluded, component collapses to hide unused space
- **Default Text:** "This site is for US Healthcare Professionals Only."
- **Type Style:** Footer
- **Color:** NEUTRAL_100 (Solid Black), changeable within site color palette

### 2. Logo Image

- **Optional:** Can be excluded, component collapses to hide unused space
- **Default Image:** By default this uses a standard Novartis logo, but a new image can be used
- **Dimensions:**
    - Extra Large Breakpoint
        - Width: 100px - 312px
        - Height: 16px - 64px
    - Large Breakpoint
        - Width: 100px - 288px
        - Height: 16px - 64px
    - Medium Breakpoint
        - Width: 100px - 296px
        - Height: 16px - 64px
    - Extra Small Breakpoint
        - Width: 100px - 268px
        - Height: 16px - 64px

The image 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.

### 3. Trademark Text

- **Optional:** Can be excluded, component collapses to hide unused space
- **Default Text:** "BRAND is a registered trademark of Novartis AG"
    - When using the default text, "BRAND" should be replaced with the name of the brand for the site
- **Type Style:** Footer
- **Color:** NEUTRAL_100 (Solid Black), changeable within site color palette

### 4. Terms and Policy Text

- **Optional:** Can be excluded, component collapses to hide unused space
- **Default Text:** "Use of website is governed by the Terms of Use and Privacy Policy."
    - "Terms of Use" in this default text links to the Novartis Terms of Use page which opens in a new tab: https://www.novartis.us/terms-use
    - "Privacy Policy" in this default text links to the Novartis HCP Privacy Policy page which opens in a new tab: https://www.novartis.us/hcp-privacy-policy
- **Type Style:** Footer
- **Color:** NEUTRAL_100 (Solid Black), changeable within site color palette

### 5. Copyright Text

- **Optional:** Can be excluded, component collapses to hide unused space
- **Default Text:** "Copyright © 2021 Novartis Pharmaceuticals Corporation. All rights reserved."
    - "Novartis Pharmaceuticals Corporation" in this default text links to the Novartis About Us page which opens in a new tab: https://www.novartis.us/about-us
- **Type Style:** Footer
- **Color:** NEUTRAL_100 (Solid Black), changeable within site color palette

### 6. Text Link 1

- **Optional:** Can be excluded, component collapses to hide unused space
- **Default Text:** "Medical Information"
    - This default text links to the following URL which opens in a new tab: https://medinfo.novartispharmaceuticals.com/
- **Type Style:** Footer
- **Color:** NEUTRAL_100 (Solid Black), changeable within site color palette

### 7. Text Link 2

- **Optional:** Can be excluded, component collapses to hide unused space
- **Default Text:** "Contact Us"
    - This default text links to the following URL which opens in a new tab: https://www.novartis.us/about-us/contact-us
- **Type Style:** Footer
- **Color:** NEUTRAL_100 (Solid Black), changeable within site color palette

### 8. Text Link 3

- **Optional:** Can be excluded, component collapses to hide unused space
- **Default Text:** "Non-US Residents"
    - This default text has no default link and should be updated to be the proper link for the site.
- **Type Style:** Footer
- **Color:** NEUTRAL_100 (Solid Black), changeable within site color palette

### 9. Text Link 4

- **Optional:** Can be excluded, component collapses to hide unused space
- **Default Text:** "Interest-Based Ads"
    - This default text links to the following URL which opens in a new tab: https://www.novartis.us/hcp-privacy-policy#interest-based-advertising
- **Type Style:** Footer
- **Color:** NEUTRAL_100 (Solid Black), changeable within site color palette

### 10. Footer FUSE Code

- **Optional:** Can be excluded, component collapses to hide unused space
- **Type Style:** Footer
- **Color:** NEUTRAL_100 (Solid Black), changeable within site color palette

Note that this FUSE code is functionally unique from the standard FUSE code that appears elsewhere in the system. Configuration options on the [FUSE Code](/cU84_lreQY2OTQupfjeaTg) page do not apply to this FUSE code in the footer.

## Resources

### CMS Instructions

#### Footer Administration

Site administrators can make changes to the Footer 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 **Footer** library:

![Configuration Library](https://hackmd.io/_uploads/r1tT06gDc.png)

**Step 2:** Review the available settings within the Footer configuration page: 

![Footer Configuration Page](https://hackmd.io/_uploads/H1s4Wxs7c.png)

Mandatory entries include:
- **Logo** - Novartis 164px x 26px logo is the default.
- **Logo alternative text** – default:  **BRAND** is a registered trademark of Novartis AG

Optional entries include:
- **HCP Notice** - text with character limit 100
- **Trademark** - text with formatting and character limit 100 
- **HTML tag** – H1 to H6 
- **Copyright** - text with formatting and character limit 100
- **Text format** - Free form, Global w/o P, Title, Plain text. Follow the *About text formats link* near the entry for details
- **Terms of Use and Privacy policy** - text with formatting and character limit 100
- **FUSE Code** - see [FUSE code CMS instructions](/cU84_lreQY2OTQupfjeaTg#CMS-Instructions) for details

<!--The entries are represented in the footer as follows:

![Footer Details details](https://hackmd.io/_uploads/SyLUbxo7q.png)-->

**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

![Updated Footer](https://hackmd.io/_uploads/rJjYWejm5.png)

#### Footer Links Administration

Site administrators can make changes to the Footer Links section leveraging the Drupal Admin interface as follows:

**Step 1** : Navigate to the **Structure** menu and click **Menus**:

![Structure Menu](https://hackmd.io/_uploads/SkPeRr3Xc.png)

:::info
*TODO: menu screenshot may need update*
:::

On the Menus screen, click the **Edit menu** button under Operations for the **Footer** item:

![Menus List](https://hackmd.io/_uploads/rJb6ZgsQc.png)

**Step 2:** Click the **Edit menu** button under Operations to change the first Menu Link: **Medical Information**.

![Edit Medical Information Footer Menu](https://hackmd.io/_uploads/rJXJfxjXc.png)

**Step 3:** Change the **Medical Information** Menu Link button settings as you need to. 

![Edit Medical Information Footer](https://hackmd.io/_uploads/BJ0-Glo7c.png)

**Step 4:** Be sure to click the **Save** button to ensure that your changes are updated.

![Save Button](https://hackmd.io/_uploads/ryjMkI2X9.png)

**Step 5:** View the updates. Clicking on the updated footer menu will open on the same page & display as follows:

![Updated_Footer_Menu](https://hackmd.io/_uploads/ryk8zgsX5.png)
