Information for healthcare professionals

Full width image

Overview

The full width image component allows for the display of a full width background image with options to overlay on-screen text and calls to action using various font face, sizes, colors and positions in a manner that is brand compliant.

Authors should use this component rather than embedding text in graphics. This helps ensure content will be translated during translation workflows as pages are deployed into different countries.

demo

Per the brand guidelines:

Authors are responsible for composing the desktop image so that it does not collide with how text is overlaid
Only fully clipped images are acceptable for using with this component; text should not overlap any aspect of the image
Do not use partially clipped or unclipped images
Authors are responsible for ensuring final renderings are brand compliant

Good to know:

The component requires a desktop AND a mobile version of the image to be specified
On desktops, the image will be rendered as a background with the text overlaid on the image; on mobile devices, content will reflow and the image will render before or after the text
Text and buttons can be overlaid by adding: Large headline, RTE, and curated CTA components into the column areas
Using the Large headline component will resize (scale) the text across various screen widths
Using an RTE component will reflow the text across screen widths
Authors should test their layout by viewing on multiple screen widths to ensure content is rendered properly

Available text layouts

25% Text left
25% Text right
33% Text left
33% Text right
50% Text left
50% Text right
66% Text left
66% Text right
100% Text
2 col 50% Text top
2 col 50% Text bottom
2 col 33+66% Text top
2 col 33+66% Text bottom

Supported sub-components

The text column areas specified in a full width image component supports addition of the following components: