Caption

Jump to: Image, Video and Audio Caption | Gallery Image Caption

A caption provides details of multimedia. A caption can describe who or what is shown, or to provide credit.

Image, Video and Audio Caption

A caption appears below the image, video or audio file.

Example

brookings
Brookings Hall, Danforth Campus

Design Considerations

The caption text size is smaller than the size of paragraph text to help set it apart from other text content on a page.

To maintain accessibility standards, when an image with a caption is placed on a dark colored background, the caption text will change to white.

Best Practices

  • Avoid adding long captions to media files.

HTML

<figure>
  <img src="https://live-webdesign-washu.pantheonsite.io/app/uploads/2019/10/brookings-1024x683.jpg" alt="Brookings Hall">
  <figcaption>Brookings Hall, Danforth Campus</figcaption>
</figure>

CSS

figcaption {
  margin-bottom: 1.5em;
  font-size: 0.833rem;
  color: #555;
  text-align: left;
  line-height: 1.333;
  margin: 0.5rem 0 0;
  padding: 0.278rem 0;

  @media screen and (min-width: 37em) {
    font-size: 1rem;
    margin-bottom: 0;
  }

  em {
    font-style: normal;
  }
}

A gallery image caption appears on top of the image and is anchored to the bottom.

Example

Danforth University Center
Olin Library

Design Considerations

The caption text size is 16px so that it takes up less space at the bottom of the image. The text is white on top of a dark gradient overlay at the bottom of the photo so that the text is readable and accessible on all images.

The caption text is anchored to the bottom of the image to allow the image to be visible as much as possible.

Best Practices

  • Avoid adding long captions to images. Longer captions can cause scrollbars to appear over images.
  • Keeping captions short will allow the focus to remain on the images.

Related Components