Caption

A caption component for images and other media content with a light gray background and a small font size for additional information.

New
Reviewed for accessibility

Source

On this page

The caption component can be used to append a caption to images used in documentation.

Usage

Caption is a shortcode, meaning it's globally available in all .md and .mdx files. So you can use the Caption component in any .md or .mdx file without importing it.

Example

<Box display="flex" alignItems="center" flexDirection="column">
  <img
    alt=""
    src="https://s3.us-west-2.amazonaws.com/photos.puppyspot.com/breeds/245/card/500000291_medium.jpg"
  />
  <Caption>A beautiful husky puppy.</Caption>
</Box>

<Box display="flex" alignItems="center" flexDirection="column">
  <img
    alt=""
    src="https://s3.us-west-2.amazonaws.com/photos.puppyspot.com/breeds/245/card/500000291_medium.jpg"
  />
  <Caption>A beautiful husky puppy.</Caption>
</Box>

Be sure to provide enough detail in your caption so users with assistive technology have adequate context. An empty alt tag alt="" should be used on the img in cases where the caption describes the image, thus making the image decorative in purpose.