Additional Information
HCP Important Safety Information (ISI) is present on all 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.
- The heading "Important Safety Information" is authorable & for text editing options, please refer to Text Formats page.
- 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.
- 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 primary scope color.
- 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
- Phone numbers can be clickable on mobile.
More examples of ISI can be checked at below URLs:
For step by step guidance about authoring this component, please visit ISI authoring guide.
