Image with Caption / Jumbotron

Overview

When you insert an image as a stand-alone page component (i.e., not as part of a navigation button, list module, etc.), you must select how the image is to be used: image only (basic image with no caption or title), photo box, or image with caption.

This topic covers the image-with-caption type, which supports two styles:  text below image and text above image. When the text is an overlay (i.e., above the image), the image is often called a jumbotron. The example below is a jumbotron.

As with the photo box, this image type supports a title and caption as well as an action button, but the layout is much more flexible, particularly with the jumbotron style. With the introduction of TP4, image-with-caption options were significantly expanded:

• Optional components:  title, caption, image link, action button
• Caption layout — below image or above image in the jumbotron style (note that in mobile viewports the above-image text displays below the image)
• Caption style — white text on black background or black text on white background
• Overlay size, alignment, and padding (jumbotron style only)
• Button position in overlay and color (jumbotron style only)
• Four sizes for title (jumbotron style only)
• Button label
• Image padding (any or all sides)

Examples at the bottom of this page show a variety of option combinations. View the examples in both large and small viewports to understand the trade-offs that each option combination presents.

Usage

• Use an image with caption to highlight a key message or illustration or an important link to related content.
• Do not use to present detailed images in small spaces.  In particular, do not use the jumbotron style (text overlay) for infographics or other images with embedded text.  (The image with caption below the image and the basic image support the large-image viewer, and the image share widget provides special options for infographics, such as a visitor link to a description of the image content. These content elements are in most cases better suited for infographics and other detailed images.)

General Guidelines

• Select high-quality images that are interesting and engaging.
• Use image styles consistently and keep the mixing of styles to a minimum.
• Keep text as brief as possible, particularly with jumbotrons.
• Remember that an effective caption is not simply 508 alt text that displays on the page:  while alt text describes the content of an image, a caption should explain how the image relates to the page topic.
• When linking to an external site or a non-HTML document, follow CDC policies regarding special links.
• With images as links, use call-to-action verbs like “Learn more” or “Find out how.”
• Preview the page in all the viewports. With jumbotrons, pay particular attention to viewport 4, the smallest desktop viewport. (The overlay text displays below the image in mobile viewports.)

Accessibility

• Provide meaningful alt text. (See guidelines below.)
• Avoid low-contrast images. For more information, see the Color Contrast Analyzer.
• Avoid images with embedded text.

Examples

The jumbotron above has the overlay alignment set to “left full height” with the following options:   no overlay margin; large overlay padding; no image padding; large title.  Consider using no overlay margin when you’re concerned about obscuring too much of the image — and keep the text lean.  Because of the large overlay padding and the moderate image size, we are quite limited in the number of characters in this example. When deciding where to position the overlay, pay careful attention to the focal point of the image. But, at the same time, avoid mixing too many image styles.

Example above is a jumbotron with text overlay set to “left top” at 33% size. Other key options are standard overlay margin and padding, and no image padding.  The overlay is black text on white, but because of the overlay transparency, the background appears almost solid gray.

The jumbotron above shows the text overlay in bottom position. This layout can work, but generally, it’s the most difficult to work with. For visual simplicity, the caption is omitted, and a large title is used.  Note how, with the jumbotron, the action button is positioned within the overlay.

Above the jumbotron overlay width is 50% (with standard overlay padding and margin) and there is standard image padding on all sides. Overlay alignment is “left top,” and the overlay border is turned on.  The image padding creates the gray border effect around the image. (With jumbotron, the padding is always gray.)

The jumbotron above shows the overlay caption set to “left bottom” with no overlay margin.  Rounded corners is turned on.

On the left is another example of an image with text below. Because the image is wrapped by text in the desktop viewports (it’s inside a text box module, actually), the image text is kept to a minimum and the white-on-black style makes the image caption stand out from the surrounding text.