Text
Caption
A caption is a text description of an image or video to describe what is showing.
Interactive demo
This demo lets you preview the caption component, its variations, and configuration options.
Anatomy
The caption contains one required element and one optional element.
| Item | Name | Description | Component | Optional |
|---|
Options
The caption has options that can be used to provide an appropriate experience for different use cases.
Credit text
A credit to the source can be added underneath the caption text.
Inset spacing
The caption can be inset with increased spacing.
Credit text
A credit to the source can be added underneath the caption text.
Inset spacing
The caption can be inset with increased spacing.
Usage
The following guidance describes how and when to use the caption component appropriately.
Don’t include captions inside images
Legibility can be poor and screen readers cannot read the words. Use live text instead.
Accessibility considerations
Captions help ensure that media like images and video are accessible to everyone by providing supplemental information about what the image is conveying. Captions are displayed within the main content and can be read by assistive technology.
API
The caption has a range of props that can be used to define an appropriate experience for different use cases.
| Name | Type | Default | Description | Required |
|---|