Image with Caption / Jumbotron

Best Practices

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 Analyzerexternal icon.
  • Avoid images with embedded text.
How to Write Effective Alt Text

Alt text descriptions seem simple, but they can be a bit challenging to write. Here are a few tips:

  • Make certain content owners are involved in the writing.
  • Describe the content of the image, keeping in mind context and target audiences.  Are scientific terms relevant to the topic and audiences?  Which visual details are relevant?
  • Remember that alt text represents an image in any situation where it cannot be seen or displayed (search engines, screen readers, etc.), so be as accurate as possible but brief — no more than 125 characters.
  • Do not use the phrase “image of” or “graphic of.”

  • photo icon

    Go to ExamplesSee examples on this page that illustrate key options.

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 image:  bicycle in city
Image Title

Text below image. No image padding. With this style, action button is always on the right.

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.

Example image
Image Title

Text below image with link in caption text. Standard image padding (all sides except bottom).

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.)

Example image
Image Title

Text below image. Large image padding on top to create bar effect.

Example image: orange flowers

Image Title

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

Example image: bicycle in art gallery

Image with caption and large-image viewer.

Example image: young girl on bicycle

Image Caption

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.

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.

Page last reviewed: April 2, 2019
Content source: WCMS / Template Team