---
title: Footnote
tags: Free Form Content
---

# Free Form Content: Footnote
###### **Control Code:** `FFC.FN`
<!--
-->
## About This Component

For sites that require heavy attribution for scientific data, such as HCP sites, the design system contains a component specific to footnotes. This component also provides CTA buttons for easy linking to study content and other information.
<!--
### 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)** |
| -------- |
|  |

| **Medium Breakpoint (Tablet)** | **Extra Small Breakpoint (Mobile)** |
| -------- | -------- |
|  |  |

| **Key** |
| ------- |
|  |

### 1. Footnote 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

### 2. CTA Buttons

The CTA Buttons for this component utilize the smaller-sized version of the buttons. This does not change any of the button's configuration options, only the physical size of the button itself. See the [CTA Button](/H3_6iYFmQ_-AbCD8m_APXQ) page of this documentation for more information.

- **Optional:** Can be excluded, component collapses to hide unused space
- **Number of Buttons:** 0-2, if there is only 1 button it will be the left-most button

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.

### 3. 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.

## Additional Configurations

### Component Size

This component can be configured to different sizes, allowing it to be placed on the page side-by-side with other components if needed. Some [Primary Configurations](#Primary-Configurations) above may have different options depending on the size chosen. Please see the [Grid and Layout Guidelines](/wyWz2X5ETqqn8VQo3KLHdQ) page of this documentation for more information on sizing and laying out components in the system.

- **Component Size:** Default Full Width, can be 7 Columns

#### Extra Large Breakpoint (Desktop)

| Full Width | 7 Columns |
| ---------- | --------- |
|  |  |

#### Medium Breakpoint (Tablet)

| Full Width | 7 Columns |
| ---------- | --------- |
|  |  |

#### Extra Small Breakpoint (Mobile)

At the Extra Small Breakpoint, the 7 Columns size becomes Full Width, stacking with any other component that was to their side.

| Full Width | 7 Columns |
| ---------- | --------- |
|  |  |

## Resources

### CMS Instructions

#### Footnote Configuration

While creating or editing content, site administrators and content editors can add a **Footnote** 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:


On the **Layout** tab, click **Add block** at the section you want to add a footnote. You may need to add a section before adding a block.


In the side panel on the right-hand side of the window click **Create custom block**.


Select **Footnote** from the list of available custom blocks.


**Step 2:** Displayed is the window with the footnote properties:


Mandatory entries include:

- **Title** - The title of the block as shown to the user.
- **Display title** - checkbox
- **Component size** - Full width (default), Seven columns, Five columns

Optional entries include:

- **Body** - text with formatting. Body or CTA buttons should be filled.
- **CTA buttons** - refer to the [CTA buttons CMS instructions](/H3_6iYFmQ_-AbCD8m_APXQ#CMS-Instructions) for details. Body or CTA buttons should be filled. Up to two 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.
- **Reusable** - checkbox. Would you like to be able to reuse this block? This option can not be changed after saving. If this option is selected, the you will be able to select this block from the list (see **Step 1**).

**Step 3:** Fill in the fields as required. For example:

- **Title** - "Footnote".
- **Display title** - check
- **Component size** - Full width
- **Body** - "This is a footnote created for testing purposes".

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


**Step 5:** The layout tab displays the parameters of the added block. Click the edit icon the edit the block layout.


**Step 6:** Click the **Save layout** button


On the **Edit** tab for the content, make sure that the **Published** checkbox is selected and click **Save**.


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


View the updates: