---
title: Footnote Accordion
tags: Accordion
---

# Accordion: Footnote Accordion
###### **Control Code:** `A.FNA`
<!--
-->
## About This Component

Two types of accordions are available in the design system. A larger "feature" accordion for prominent content such as FAQs and a smaller "footnote" accordion for content that is required on the page (such as attributions and scientific footnotes) but can remain hidden. Accordions can feature a broad range of content, including images and video, similar to the free-form content block.
<!--
### 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. 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.

## Accordion Tray Configurations

Each configuration here is repeated for each of the trays included in the component, up to a maximum of 8 trays.

- **Number of Accordion Trays:** 1-8

### 2. Tray Title

- **Required:** Must be included
- **Type Style:** Heading 4
- **Color:** NEUTRAL_80 (Off Black), changeable within site color palette
- **SEO HTML Tag:** Default H6, changeable within H1 to H6

## Accordion Tray Content Configurations

When creating the content to go inside each accordion tray, you have a range of options to select from. All the content options for the tray can be used as many times as you'd like in a mix-and-match format. Outlined here are the different options you have available when laying out your content.

The numbered annotations in this case do not show the strict placement for each option, but rather show an example of each option available to you. These can all be used in whatever order best suits your content.

All text options for this component follow the standard requirements outlined in the [Fonts and Typography](/AeZVwi4aTDCeevMI4zeDuQ) page of this documentation. Please refer to that page for full details on working with type in the system.

### 3. Text Option: Heading 4

- **Optional:** Can be included as many times as needed
- **Type Style:** Heading 4
- **Color:** NEUTRAL_100 (Solid Black), changeable within site color palette
- **SEO HTML Tag:** Default H6, changeable within H1 to H6
- **Alignment:** Default left aligned, can be center or right aligned

### 4. Text Option: Paragraph 3

- **Optional:** Can be included as many times as needed
- **Type Style:** Paragraph 3
- **Color:** NEUTRAL_100 (Solid Black), changeable within site color palette
- **Alignment:** Default left aligned, can be center or right aligned

### 5. Text Option: Disclaimers and Notes

- **Optional:** Can be included as many times as needed
- **Type Style:** Disclaimers and Notes
- **Color:** NEUTRAL_100 (Solid Black), changeable within site color palette
- **Alignment:** Default left aligned, can be center or right aligned

### 6. CTA Buttons Option

- **Optional:** Can be included as many times as needed
- **Number of Buttons:** 1 to 2 total buttons per inclusion of this option
- **Alignment:** Default left aligned, can be center or right aligned

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.

### 7. Asset Option

- **Optional:** Can be included as many times as needed
- **Video:** Instead of an image you can place an embedded video here. It will fill the full available width that the image would have taken and then scale vertically to fit the video's aspect ratio. For more information on working with videos in the design system, see the [Videos](/YeudBQ6aQnSV-4NbJyvf-A) page of this documentation.
- **Dimensions:** Size requirements for the asset depend on the layout size chosen for the component. See the [Component Size](#Component-Size) section of this documentation further below for more information.

| Breakpoint | Full Width | 7 Columns |
|-------------|------------|-----------|
| Extra Large | Width: 744px<br/>Height: 419px - 992px | Width: 480px<br/>Height: 270px - 853px |
| Large | Width: 608px<br/>Height: 342px - 811px | Width: 392px<br/>Height: 221px - 697px |
| Medium | Width: 552px<br/>Height: 311px - 736px | Width: 360px<br/>Height: 203px - 640px |
| Extra Small | Width: 400px<br/>Height: 225px - 711px | Width: 400px<br/>Height: 225px - 711px |

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.

### 7a. Video Transcript Link

This icon can be paired with an Asset Option when set to a video asset. It can only be included in this component when you are including an Asset Option when set to a video asset.

When a video is embedded in this component, this link is available if you need to point the user to an external resource -- such as a transcript -- when it cannot be embedded in the video player itself.

- **Optional:** Can be excluded, component collapses to hide unused space
- **Type Style:** Default Text Link 1, can be Text Link 2
- **Color:** PRIMARY_02 (Brand Secondary), changeable within site color palette

For more information on working with videos in the design system, see the [Videos](/YeudBQ6aQnSV-4NbJyvf-A) page of this documentation.

## Additional Configurations

### Starting State

By default, all the trays in the component start loaded on the page in a closed state. Optionally it can be configured so the first tray at the top loads on the page already opened.

- **Starting State:** Default all trays will be closed, can be set so first tray starts open

### 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 Accordion Configuration

While creating or editing content, site administrators and content editors can add a **Footnote accordion** 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 an accordion content block. 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 **Accordion** from the list of available custom blocks.


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


Mandatory entries include:

- **Title** - The title of the block as shown to the user.
- **Display title** - checkbox
- **Accordion type** - feature or footnote
- **Component size** - full widths (default), seven columns or five columns
- **Title** - text with formatting.
- **HTML tag** – H1 to H6. This field only changes the wrapping HTML of this element. It does not change the style (appearance).
- **Trays option** - all closed (default) or first open
- **Accordion** - Up to 8 blocks. For each accordion the following entries are mandatory:
- **Block Description** - A brief description of your block
- **Free form** - clicking the button opens a window with free form. Refer to the [free form CMS instructions](/KwlkT8WFQMaH5rBkfhipPQ#CMS-Instructions) for details.
The following entries are mandatory for a free form:
- **Component size** - Full wigths (default), Seven columns, Five columns
- **Title** - text with formatting.
- **HTML tag** – H1 to H6. This field only changes the wrapping HTML of this element. It does not change the style (appearance).
- **Under title** - toggle hide or show (default)
- **Body** - text with formatting.
- **Align** - right, center or left (default)

Optional entries include:

- **Subtitle** - text with formatting.
- **HTML tag** – H1 to H6. This field only changes the wrapping HTML of this element. It does not change the style (appearance).
- **Accordion** - Up to 8 blocks. For each accordion the following entries are optional:
- **Title** - text with formatting.
- **HTML tag** – H1 to H6. This field only changes the wrapping HTML of this element. It does not change the style (appearance).
- **Free form** - clicking the button opens a window with free form. Refer to the [free form CMS instructions](/KwlkT8WFQMaH5rBkfhipPQ#CMS-Instructions) for details.
The following entries are optional for a free form:
- **Summary** - text with formatting.
- **HTML tag** – H1 to H6. This field only changes the wrapping HTML of this element. It does not change the style (appearance).
- **Icon** - up to one media item
- **Show icon** - checkbox
- **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.
- **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** - Accordion footnote.
- **Display title** - checkbox
- **Accordion type** - feature
- **Component size** - full widths
- **Title** - Accordion footnote sample.
- **Trays option** - first open
- **Accordion** - Add three identical blocks. Do not forget to click the **Create Accordion** button.
- **Block Description** - Footnote
- **Title** - "Accordion footnote sample"
- **Free form** - clicking the button opens a window with free form. Refer to the [free form CMS instructions](/KwlkT8WFQMaH5rBkfhipPQ#CMS-Instructions) for details. Fill in the fields and click **Create free form**
- **Component size** - Full wigths
- **Title** - "Footnote sample".
- **Body** - "This is a footnote sample for accordion"

After you add footnotes, click **Show row weights** to rearrange the items.


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