Skip to main content

Caption

The caption component replaces the HTML caption element. A caption is a brief descriptive phrase appended to another object, most commonly a table or illustration. It is primarily used as a title, short description, or identification for its associated object. It has a footnote quality to it because it commonly appears below the associated object and uses a smaller font size. Captions should never be used for primary content.

Example

Caption 1 with default type

Caption 2 with default type

Different caption sizes on a default theme

Best practices

Use a caption component to provide helpful context or identifying information about another object like a table. A caption is typically a short phrase or sentence. It may include citation information or a numerical reference.

If you just need a word or two to add some additional context, state, or other information, consider using metatext. Caption placement is always secondary, not primary (ex. at page bottom, off to the side or below an image.) Whereas metatext generally has a more prominent position (ex. above an image or just below the text it is augmenting).

Captions should never be a distraction. Too much content in a caption is a strong indicator that the content should be presented elsewhere.

Generally, an MWF caption is built upon an HTML paragraph element, rather than the HTML caption element, which is intended for use with a table. However, if the need is for a caption for a figure that is presented within an HTML <figure> element, you can use the HTML <figcaption> element for your MWF caption.

Do

  • Be concise. Due to the smaller physical size of the font, longer phrases may suffer in legibility. That said, a caption can be a complete sentence.
  • Place the caption as close as possible to its related element, but with less prominent positioning such as off to the side or below.
  • Caption size 2 is typically used for low priority caption text such as legal notices.
  • Use caption text sparingly. It should add informational value without being a distraction.
  • When using a caption for a citation, surround the citation text with the HTML5 <cite> tags.

Don’t

  • Do not use caption for information necessary for actionable items that would be lost if skimmed over.
  • Do not use caption as a layout tool to fit more text in a particular region.
  • Do not use captions inconsistently. They serve a specialized function and should not be used casually.

Also known as

Label

Related

Heading
Metatext
Paragraph
Subheading

Accessibility

  • No special requirements.

Options

  • Size: There are two size options for the caption.
    • Large (default): Use the c-caption-1 for the component's class for the large caption.
    • Small: Use the c-caption-2 for the component's class for the small caption.

Development

  • Schema definition: The caption schema defines the acceptable configurations, requirements, and options for each component.

Code and preview

Level one Caption

Caption level one

<p class="c-caption-1">Caption level one</p>

Level two Caption

Caption level two

<p class="c-caption-2">Caption level two</p>