What is ISI Component?

The ISI Component, located at the bottom of the page, Inside Footer Component

Authoring Guide >

Additional Information

DTC Important Safety Information (ISI) is present on all consumer US Commercial Branded websites. The ISI will appear just above the global footer, immediately following the body on all product websites & is fixed. The collapsed tray includes 20% of the screen height to balance claims in body content.

The ISI tray will include expand/collapse functionality to allow users to view the full ISI at any point during the website visit when the tray is in use and visible. For Boxed Warning products, the warning must appear on every Home and landing page of the website. 

Editors can configure the below:

• ISI can be either configured at global level or at a page specific level. If not configured at a page level, the ISI is inherited from the locale page.
• Text for Expand & Collapse. Option to choose between "plus" & "chevron" for expand & collapse state of ISIs.
• On clicking "plus" / "chevron" icon the ISI expands all the way to the top, covering the content of the page. However, the global utility navigation is visible.
• Unless specified, primary color is inherited for Headings, expand/collapse text. Editors can author different colors using color picker supported by the component
• Background color for heading section can be configured while authoring the component.
• Option to add box warning - solid border surrounding the content for both low & high transition.
• Option to author content for low transition & high transition, for text editing options refer to Text Formats page.
• As experience fragments are allowed, in DTC ISI we could achieve a wide variety of designs using components such as image, rich-text etc.
• The default font size for desktop is 16px & mobile is 12px (both high & low transition). Editors can change the font variations using options such as "Large text", "Small Text" & "Medium text" that is set up at a site-level
• Option to configure bullets & the color of the bullet icon is inherited from Scope Link Color, which is fixed throughout the ISI.
• Supports headings h1 through h6 and below are the font-sizes:    
  • h1 : desktop - 2.5rem, mobile - 2rem 
  • h2 : desktop - 2rem , mobile - 1.75rem
  • h3 : desktop - 1.75rem, mobile - 1.5rem
  • h4 : desktop - 1.5rem,mobile - 1.25rem
  • h5 : desktop - 1.25 rem, mobile: 1rem
  • h6 : desktop - 1 rem, mobile : 0.75rem