Image/Video Callouts (CTAs)

Image/video CTAs on landing pages

Image and video callouts (CTAs) are displayed in a 50/50 layout, with an image showing in either the right or left side of the callout (in mobile viewports, the layout switches away from a 50/50 layout to a stacked full-width top/bottom layout, with the image always showing on top). One image is provided per callout. The blue text panel will get placed automatically after the image loaded to the website. Image size: 496 x 496px recommended. If the image does not work in a square format, the smallest dimension should be 496px (a good example image size: 747 x 496px). All image file sizes should be 100 KB or less.

To ensure that the callouts display properly across all viewports, character limits have been established for the heading and body copy. A 50 character limit has been set for the heading, and a 200 character limit has been set for the copy, including punctuation. As longer headlines or copy are added, the height of the callout will also increase, which is not ideal.

It is important to make sure all of the images selected will work across various devices since the callout is not a fixed size. Only one image needs to be provided, this will adjust based on desktop, tablet, or mobile sizes. A good rule of thumb is to make sure the main portion of the image is in the center.

Multple CTAs can be added to the same page and can appear in any area of the page, not just stacked on top of each other. The recommendation is no more than two or three image or video CTA per page.

See following examples to show how portions of the image are hidden from view across various devices. 

Original images

Images uploaded at 496 x 496px.

Sample image and video CTAs

The following are live versions of the CTA. See how the image and text adjusts when resizing browser window. 

Image cropping

Images will be presented with some cropping along the top and bottom. Text panels will be automatically placed once the CTA is created.

The red overlay indicates the area that may be cropped off on tablet devices.

The red overlay indicates the area that may be cropped off on mobile devices.

Image/video CTAs on homepages and campaigns

Same rules as stated above will apply for campaign pages, hospital location pages and all homepages (including microsites). However, the CTA will be slightly larger to fill the full width of the page and will use a gray text panel rather than blue. It is important to make sure all of the images selected will work across various devices. Only one image needs to be provided, this will adjust based on desktop, tablet, or mobile sizes. A good rule of thumb is to make sure the main portion of the image is in the center. Image size: 747 x 747px recommended. If the image does not work in a square format, the smallest dimension should be 747px (a good example size: 1114 x 747px). 

Sample image and video CTAs

The following is a live version of the CTA. See how the image and text adjusts when resizing browser window.