---
title: Tabbed Content
tags: Page Structure
---

# Page Structure: Tabbed Content
###### **Control Code:** `PS.TC`
<!--
-->
## About This Component

The tabbed content page structure component should be used to reduce page content volume by allowing for an easy to navigate tab structure. This allows deeper content within the tabs to be scannable prior to click and reduces scrolling and length of pages.
<!--
### 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.

Note that in additional to this FUSE code, the if the components that are selected to go inside the tabs also support a FUSE code then there could be two FUSE codes one after the other if they are included in both places.

## Tab Configurations

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

- **Number of Tabs:** 2-5

### 2. Tab Label

- **Required:** Must be included
- **Type Style:**
- Tab is active: Jumplink 1
- Tab is inactive: Jumplink 2
- **Color:**
- Tab is active: PRIMARY_01 (Brand Primary), changeable within site color palette
- Tab is inactive: NEUTRAL_70 (Dark Gray), changeable within site color palette

### 3. Tab Content Component

When creating a tab you must choose another component to be contained inside the tab. The size of the component must match the [Component Size](#Component-Size) configuration chosen for this Tabbed Content component, for example if this Tabbed Content component is set to Full Width, then only other Full Width components can be placed inside the tabs. If a component does not support the currently selected size then it cannot be placed inside the tab. Otherwise, the contained component follows all the standard configuration options available to it.

- **Required:** Must be included
- **Component Options:**
- [Free Form Text](/KwlkT8WFQMaH5rBkfhipPQ)
- [Single Featured Content Card, Asset Only](/nAgvDpldTZOp57R4XyWGZw)
- [Single Featured Content Card, With Content](/v1bCT_A-QZuiYAFJbJciLw)
- [Multiple Callouts Banner](/RYs_KK6nSdqeLSrsnNSgkQ)

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

#### Tabbed Content Configuration

While creating or editing content, site administrators and content editors can add **Tabbed content** 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 tabbed content. 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 **Tabbed content** from the list of available custom blocks.


**Step 2:** Displayed is the window with the tabbed content properties:

![Configure
Tabbed Content Window](https://hackmd.io/_uploads/S1ZILMVNq.png)

Mandatory entries include:

- **Title** - The title of the block as shown to the user.
- **Display title** - checkbox.
- **Component size** - Full wigths (default), Seven columns, Five columns.
- **Tabs** - Minimum of 2 and maximum of 5 tabs can be created.
- **Title** - Unique title for each tab. Content limited to 30 characters.
- **Tabs** - Banner-Icons, Free From, Single Featured Content Card.

Optional entries include:

- **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** - "Tabbed content".
- **Display title** - check.
- **Component size** - Full wigths.

**Step 4:** In the **Tabs** pane fill in the **Title** field with "Free form". Select "Free Form" as a block type. Click **Add new Component**. Please see Steps 2 and 3 in the [Free Form instructions](https://hackmd.io/KwlkT8WFQMaH5rBkfhipPQ#CMS-Instructions) for the details of how to create this component. Click **Create component** => **Create tab**.


**Step 5:** In the **Tabs** pane select **Add new Tab**.


Fill in the **Title** field with "Banner Icons". Select "Banner - Icons" as a block type. Click **Add new Component**. Please see Steps 2 and 3 in the [Banner Icons instructions](https://hackmd.io/AT3doJ6PQGOytINkwiRWcA#CMS-Instructions) for the details of how to create this component. Then click **Create custom block** => **Create component** => **Create tab**.

**Step 6:** In the **Tabs** pane select **Add new Tab**. Fill in the **Title** field with "SFCC". Select "Single Featured Content Card" as a block type. Click **Add new Component**. Please see Steps 2 and 3 in the [Single Featured Content Card instructions](https://hackmd.io/nAgvDpldTZOp57R4XyWGZw#CMS-Instructions) for the details of how to create this component. Then click **Create component** => **Create tab**.

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


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


**Step 9:** Click the **Save layout** button.


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


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