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
The caption component can be used to append a caption to images used in documentation.
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.
<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.