Provides further context and attribution for a figure or media asset such as an image, video, or chart
Caption aligns to the left alongside the body copy with inset padding. Default caption includes summary and credit.
Summary has same CSS styles as the default; however, only the summary element is displayed.
Credit has same CSS styles as the default; however, only the credit element is displayed.
The captions component is text-only; however, it is meant to be displayed in the context of a media object.
To ensure that usage of this component complies with the accessibility guidelines, do the following:
This component has compliance with WCAG guidelines by:
The Caption component has two separate fields: Summary and Credit. While they often appear together, one is not dependent on the other. Both are, however, dependent on media content (image, video, etc).
There are two text fields available within a caption:
For photos submitted by customers or members:
For multiple photo accreditations:
For purchased assets (photos or video):
For copyrighted media (photos or video):
Keep summary content short to avoid excess text-wrapping.
Captions must be accompanied by media asset such as an image, video, or chart.
Summary and Credit serve different purposes and should remain separate.
Caption stays left aligned with body copy regardless of the width of the media.
Sets the string content for the description body of the caption. Not required.
Sets the string content for attribution. Not required.
The CdrCaption component is developed to work within a composition with other components; however, composition-type components have not been developed yet.
The below example demonstrates how to extend this component for use within a figure.
<figure> <cdr-img src="http://via.placeholder.com/350x150" /> <figcaption> <cdr-caption summary="Testing and validating the final fit of the 2018/2019 Tecnica ski boot collection during the September 2017 focus group in Park City, Utah" credit="Image Credit: Blizzard Tecnica” /> </figcaption> </figure>