---
title: ISI
tags: Page Structure
---

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

The design system features a floating, collapsible ISI. It will hover anchored to the bottom of the browser window until the user reaches the full ISI at the bottom of each page. It can be collapsed by the user to a slimline form to allow for increased view area. The collapsed state will persist until the user browses away from the website or chooses to open it again.
<!--
### 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)

| **Open (Default State)** |
| -------- |
|  |

| **Closed (Collapsed State)** |
| -------- |
|  |

| **Expanded (Full State)** |
| -------- |
|  |

#### Medium Breakpoint (Tablet)

| **Open (Default State)** |
| -------- |
|  |

| **Closed (Collapsed State)** |
| -------- |
|  |

| **Expanded (Full State)** |
| -------- |
|  |

#### Extra Small Breakpoint (Mobile)

| **Open (Default State)** |
| -------- |
|  |

| **Closed (Collapsed State)** |
| -------- |
|  |

| **Expanded (Full State)** |
| -------- |
|  |

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

The ISI has three distinct visual states it can appear in.

- The **Open State** is the default state for the ISI when the user lands on the page, floating above other content on the site. It contains a short summary/preview of the content in the **Expanded State** and includes prompts to link the user to the **Expanded State** further down the page.
- The **Closed State** is the collapsed state when the user closes the ISI and it reduces to a small bar. It continues to float above other content on the site.
- The **Expanded State** is the full ISI that is present at the bottom of the page. When viewing the full ISI in this state the floating **Open** or **Closed** states are automatically hidden, they then reappear when the user scrolls away from the **Expanded** view.

Additionally, content for the ISI is divided into two sections.

- The **Important Safety Information** section is required and contains the primary information in the ISI. When content appears in two columns this is the left column, otherwise it appears before the other section.
- The **Indication Information** section is optional and provides supplimentary information in the ISI. When content appears in two columns this is the right column, otherwise it appears after the other section.

Finally, the content structure for the ISI differs depending on the current breakpoint.

- For **Larger Screens** when the **Indication Information** section is included, content is displayed in two columns. This includes the Extra Large, Large, and Medium breakpoints.
- For **Smaller Screens** content is displayed in a single column. This includes the Extra Small breakpoint.

To further support the content requirements needed in the ISI, the text content can be set twice: once for the **Larger Screens** and once for the **Smaller Screens**, allowing different text to appear in the ISI for mobile devices.

### 1. Overall Prompt Text

This is the label text for the **Open** and **Closed** states that prompts the user to click or scroll to be shown the full **Expanded State**.

This text is only used for **Larger Screens**. **Smaller Screens** use the [Important Safety Information Section Title](#3-Important-Safety-Information-Section-Title) for the prompt text instead.

- **Required:** Must be included
- **Default Text**
- **Larger Screens:** "Click or scroll for full Important Safety Information"
- **Smaller Screens:** n/a
- **Type Style:** ISI Bold
- **Color:** PRIMARY_01 (Brand Primary), changeable within site color palette

### 2. Expanded State Full-Width Text

The ISI in the **Expanded State** can have two columns of content, however if one column is significantly longer than the other then it may be preferable to have the additional lengthy text become full-width below the two columns. This full-width text can also be used if there is additional information to include that does not relate to the content of either column.

If the **Indication Information** section is not included, then this additional full-width text is also not needed as the **Important Safety Information** section will automatically expand to become full-width.

For **Smaller Screens**, this additional text is not needed as the two columns instead stack into a single column of text. Any additional text that is needed can be included in one of those sections.

- **Optional:** Can be excluded, component collapses to hide unused space
- **Default Text**
- **Larger Screens:** No default text
- **Smaller Screens:** n/a
- **Type Style:** ISI Body
- **Color:** NEUTRAL_70 (Dark Gray), changeable within site color palette

## Important Safety Information Section

The **Important Safety Information** section is required and contains the primary information in the ISI. When content appears in two columns this is the left column, otherwise it appears before the other section.

### 3. Important Safety Information Section Title

This is the title for the **Important Safety Information** section of content for both the **Open** and **Expanded** states.

For **Smaller Screens**, this is also the [Overall Prompt Text](#1-Overall-Prompt-Text) for the **Closed** state as the section title animates to move with the closing of the ISI, remaining visible as the new prompt text when closed.

- **Required:** Must be included
- **Default Text**
- **Larger Screens:** "Important Safety Information"
- **Smaller Screens:** "Important Safety Information"
- **Type Style:** ISI Bold
- **Color:** PRIMARY_01 (Brand Primary), changeable within site color palette

### 4. Important Safety Information Section Summary Text

This is the short summary text for the **Important Safety Information** section of content for the **Open** state.

- **Required:** Must be included
- **Default Text**
- **Larger Screens:** No default text
- **Smaller Screens:** No default text
- **Type Style:** ISI Body
- **Color:** NEUTRAL_70 (Dark Gray), changeable within site color palette

### 5. Important Safety Information Section Prompt Text

This is the short prompt to read more about the **Important Safety Information** content for the **Open** state. Clicking it takes the user to the **Expanded** state.

- **Required:** Must be included
- **Default Text**
- **Larger Screens:** "scroll down to read more"
- **Smaller Screens:** "scroll down to read more"
- **Type Style:** ISI Bold
- **Color:** PRIMARY_01 (Brand Primary), changeable within site color palette

### 6. Important Safety Information Section Full Text

This is the full text for the **Important Safety Information** section of content for the **Expanded** state.

- **Required:** Must be included
- **Default Text**
- **Larger Screens:** No default text
- **Smaller Screens:** No default text
- **Type Style:** ISI Body
- **Color:** NEUTRAL_70 (Dark Gray), changeable within site color palette

## Indication Information Section

The **Indication Information** section is optional and provides supplimentary information in the ISI. When content appears in two columns this is the right column, otherwise it appears after the other section.

### 7. Indication Information Section Title

This is the title for the **Indication Information** section of content for both the **Open** and **Expanded** states.

For **Smaller Screens**, this does not appear in the **Open** state as the **Important Safety Information** section takes over the space.

- **Required:** Must be included when the **Important Safety Information** section is included, otherwise is excluded
- **Default Text**
- **Larger Screens:** "Indication Information"
- **Smaller Screens:** "Indication Information"
- **Type Style:** ISI Bold
- **Color:** PRIMARY_01 (Brand Primary), changeable within site color palette

### 8. Indication Information Section Summary Text

This is the short summary text for the **Indication Information** section of content for the **Open** state.

For **Smaller Screens**, this does not appear in the **Open** state as the **Important Safety Information** section takes over the space.

- **Required:** Must be included when the **Important Safety Information** section is included, otherwise is excluded
- **Default Text**
- **Larger Screens:** No default text
- **Smaller Screens:** n/a
- **Type Style:** ISI Body
- **Color:** NEUTRAL_70 (Dark Gray), changeable within site color palette

### 9. Indication Information Section Prompt Text

This is the short prompt to read more about the **Indication Information** content for the **Open** state. Clicking it takes the user to the **Expanded** state.

For **Smaller Screens**, this does not appear in the **Open** state as the **Important Safety Information** section takes over the space.

- **Required:** Must be included
- **Default Text**
- **Larger Screens:** "scroll down to read more"
- **Smaller Screens:** n/a
- **Type Style:** ISI Bold
- **Color:** PRIMARY_01 (Brand Primary), changeable within site color palette

### 10. Indication Information Section Full Text

This is the full text for the **Indication Information** section of content for the **Expanded** state.

- **Required:** Must be included
- **Default Text**
- **Larger Screens:** No default text
- **Smaller Screens:** No default text
- **Type Style:** ISI Body
- **Color:** NEUTRAL_70 (Dark Gray), changeable within site color palette

## Additional Configurations

### Indication Information Section Included

by default the **Indication Information** is not included, but it can be included as shown above. When it is not included, the **Important Safety Information** section takes over the space

- **Indication Information Section Included:** By default the **Indication Information** section is not included, but can be included

Below is an example of the ISI at when there is no **Indication Information** section.

#### Extra Large Breakpoint (Desktop)

| **Open (Default State)** |
| -------- |
|  |

| **Closed (Collapsed State)** |
| -------- |
|  |

| **Expanded (Full State)** |
| -------- |
|  |

#### Medium Breakpoint (Tablet)

| **Open (Default State)** |
| -------- |
|  |

| **Closed (Collapsed State)** |
| -------- |
|  |

| **Expanded (Full State)** |
| -------- |
|  |

#### Extra Small Breakpoint (Mobile)

| **Open (Default State)** |
| -------- |
|  |

| **Closed (Collapsed State)** |
| -------- |
|  |

| **Expanded (Full State)** |
| -------- |
|  |

## Resources

### CMS Instructions

#### ISI Fixed Footer Administration

Site administrators can make changes to the ISI Fixed Footer settings leveraging the Drupal Admin interface as follows:

**Step 1** : Navigate to the **Structure** menu and click **Config pages**:


On the Config Pages screen, click the **Edit** button under Operations for the **ISI Fixed Footer** library:


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


Mandatory entries include:

- **ISI Title** - character limit 200. Default text: “Important Safety Information”. Color and Font can be set.
- **ISI Body** - character size limit 600. Color and Font can be set.
- **ISI Prompt** - character limit 100. Default text for Default state: “scroll down to read more”. Color and Font can be set.
- **Enable indication** - Boolean. Options to “Show” or” Hide” the Indication information section.
- **Generic Prompt Full** - character limit 100. Default text for Default state: “Click or scroll for full Important Safety Information”.
Color and Font can be set.
- **Full Text** - no character size limit. Color and Font can be set. Fixed before the footer on the page.

Optional entries include:

- **HTML tag** - H1 to H6
- **Indication Title** - character limit 200. Default value: “Indication Information”. Color and Font can be set.
- **Indication Body** - character size limit 600. Color and Font can be set.
- **Indication Prompt** - character limit 100. Default text: “scroll down to read more”. Color and Font can be set.
- **Generic Prompt Small** - character limit 60. Default text for smaller screen sizes: “Important Safety Information”. Color and Font can be set.

The entries are represented in the ISI fixed footer as follows:


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


**Step 5:** View the updates