Caption

Provides further context and attribution for a figure or media asset such as an image, video, or chart

Default

Caption aligns to the left alongside the body copy with inset padding. Default caption includes summary and credit.

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Summary

Summary has same CSS styles as the default; however, only the summary element is displayed.

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Credit

Credit has same CSS styles as the default; however, only the credit element is displayed.

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Caption with image

The captions component is text-only; however, it is meant to be displayed in the context of a media object.

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Accessibility

To ensure that usage of this component complies with accessibility guidelines, do the following:

  • Use captions sparingly and only with accompanied media
  • Do not use caption text styles for body copy; it is smaller than the recommended size for text readability

This component has compliance with WCAG guidelines by:

  • Using text color with a Level AA contrast ratio of 4.5:1 contrast between the text color and the background but only when displayed on light backgrounds