Captions are used as brief explanations accompanying an illustration, form element, or similar. Caption text is smaller than the recommended size for general reading.
| || ||Controls the margin of the component.|| || |
| || ||Selected state of the caption. Used inside Choice component.|| || |
| || ||Controls the size of the caption.|| || |
| || ||Theme of the caption.|| || |
This section includes guidelines for designers and developers about the usage of this component in different contexts.
When to use #
- As brief explanations accompanying an illustration, form element, or similar.
When not to use #
- For long paragraphs or main content. Use Paragraph component instead.
- On backgrounds other than white as caption won’t provide enough contrast to pass WCAG 2.1 AA requirements.
This component has been validated to meet the WCAG 2.1 AA accessibility guidelines. You can find additional information regarding accessibility of this component below.
- Do not use caption on backgrounds other than white as caption won’t provide enough contrast to pass WCAG 2.1 AA requirements.
- Caption is a custom element with regular text inside. It doesn’t currently have any added functionality for assistive technologies.
Follow these practical tutorials to learn how to build simple page layouts using Duet’s CSS Framework, Web Components and other features:
Using CLI ToolsTutorials
Creating Custom PatternsTutorials
Server Side RenderingTutorials
Usage With Markdown
If you experience any issues while using a component, please head over to the Support page for more guidelines and help.