---
title: List
tags: Free Form Content
---

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

The list component should be used to provide more scannable groups of related content. The content editor can choose a more traditional text-only list format or an iconic approach. The design system features a default icon library, but custom icons can also be uploaded for use in this component.
<!--
### 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. List 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

### 2. List 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

### 3. Under-Title Decoration Line

This line provides a break between the header of the overall list and the individual list items below the header. It can be optionally removed, however if the header content (List Title and List Body Text) 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. CTA Buttons

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

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.

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

## List Item Configurations

Each configuration here is repeated for each of the list items included in the component, up to a maximum of 8 items. While both text fields inside each list item is individually optional, at least one text field must be included for each list item.

- **Number of List Items:** 1-8

### 6. List Item Icon

- **Optional:** Can be excluded, component collapses to hide unused space
- **Dimensions:**
- Extra Large Breakpoint
- Width: 24px - 48px
- Height: 24px - 48px
- Large Breakpoint
- Width: 20px - 40px
- Height: 20px - 40px
- Medium Breakpoint
- Width: 20px - 40px
- Height: 20px - 40px
- Extra Small Breakpoint
- Width: 16px - 32px
- Height: 16px - 32px

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

### 7. List Item Icon Background Color

This background color should not be included if the icon appearing over it is also not included.

- **Optional:** Can be excluded, component collapses to hide unused space
- **Color:** PRIMARY_01 (Brand Primary), changeable within site color palette

### 8. List Item 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

### 9. List Item Body Text

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

## 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 or 5 Columns

#### Extra Large Breakpoint (Desktop)

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

#### Medium Breakpoint (Tablet)

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

#### Extra Small Breakpoint (Mobile)

At the Extra Small Breakpoint, the 7 Columns and 5 Columns sizes become Full Width, stacking with any other component that was to their side.

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

## Resources

### CMS Instructions

<!---->

#### Full List Single Column Configuration

While creating or editing content, you can add a **Full List Single Column** asset 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 (e.g., Home):


On the **Layout** tab, click **Add block** at the section you want to add a Full List single column 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 **Full List – Single column** from the list of available custom blocks.


**Step 2:** Displayed is the window with the full list single column properties:


Mandatory entries include:

- **Title** – The title of the **block** as shown to the user.
- **Display title** – Boolean checkbox. Default = "Checked".
- **Component Size** - Drop-down Select field to set the module size. Options include:
- Full Widths (Default)
- Seven Columns
- Five Columns
- **Title** - Component Title WYSIWIG. H2.
- **List items** – List Element Reference. Select the number of List elements: 1 to 8.
- Background color - select field. Default is Alert Red ("Primary").

Optional entries include:

- **Primary Text Section**
- **Primary title** - text with formatting with text limit 160.
- **HTML tag** – H1 to H6. This field only changes the wrapping HTML of this element. It does not change the style (appearance).
- **Under title decoration** – checkbox. Boolean. Default = True.
- **Body** - text with formatting with text limit 400. WYSIWIG. Default = “In clinical trials, the majority of people taking COSENTYX 300 mg were clear or almost cleat at 12 weeks”.
- **CTA buttons** - refer to the [CTA buttons instructions](https://hackmd.io/H3_6iYFmQ_-AbCD8m_APXQ#CMS-Instructions) for details about adding CTA buttons. Up to two CTA buttons are allowed.
- **FUSE code** - see [FUSE code CMS instructions](/cU84_lreQY2OTQupfjeaTg#CMS-Instructions) for details.
- **Vertical spacing**
- **Reusable** - checkbox. Would you like to be able to reuse this block? This option cannot be changed after saving. If this option is selected, then you will be able to select this block from the list (see Step 1).
- **List items** – List Element Reference. (1 to 8 allowed List items) Optional Entries.
- **Background color** - select field. Default is Alert Red ("Primary").
- **Block Description** - brief description of your block.
- **Title** - WYSIWYG.
- **Body** - WYSIWYG

**Step 3:** Configure the block as required. For example:

- **Block Title** = “Block Admin Title - Full List Single Column”
- **Display title** = box is checked
- **Component Size** = Full Width
- **Component Title** = “Full Width – Single Column”
- **HTML Tag** = H2
- **Under_Title decoration** = Show
- **Component Body** = “In clinical trials, the majority of people taking COSENTYX 300 mg were clear or almost cleat at 12 weeks.”

**Step 4:** Input one list Item as follows:


- **Block description** = “Efficacy block”
- **Title** = "Lorem ipsum Title"
- **HTML Tag** = H6
- **Body** = "Lorem ipsum body"


- **Background color** = Primary(default)
- **Media**, **Fuse code** & **Vertical spacing** options are optional.

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


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

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


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


**Step 8:** 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.