caption

Provides context and credit for an asset such as an image, video, or chart

import { CdrCaption } from '@rei/cedar'

Live demo

Purpose

TypePurpose
Medium (default)Caption aligns to the left alongside the body copy with inset padding. Default caption includes summary and credit.
SummarySummary has same CSS styles as the default, but only the summary element is displayed.
CreditCredit has same CSS styles as the default, but only the credit element is displayed.
Caption with imageThe captions component is text-only, but is meant to be displayed in the context of a media object.

Usage

When to use

  • Providing further context and attribution to any figure or media asset such as an image, video or chart

When not to use

  • Displaying body copy. Instead, use text
  • Breaking up the text styles in a layout for aesthetic purposes

Best practices

Do
A box representing media content with caption lines below

Do provide a caption for images when attribution information is available.

Don't
Caption lines improperly used below non-media content

Don't use captions without associated media content (image, video, chart, etc.).

Do
A box representing media content with left-aligned caption lines below

Do left align the caption to the body copy.

Don't
A box representing media content with caption lines improperly centered below

Don't center the caption beneath the media.

Anatomy

  • Captions align to the left border based on the paragraph container. They are not centered under the media object
  • Max width is 498 pixels, even if the media (image, video, or chart) extends beyond the paragraph max width

Example of an image caption which reads: Testing and validating the final fit of the 2018/2019 Tecnica ski boot collection during the September 2017 focus group in Park City, Utah. Image Credit: Blizzard Tecnica

Content

Do
A box representing content with an appropriately short caption.

Do write concise, informative summaries.

Don't
A box representing content with an inappropriately long caption

Don't write long summaries that wrap to more than 3 lines on desktop breakpoints.

Available caption fields

The caption component has two separate fields: summary and credit. While they often appear together, one is not dependent on the other. However, both are dependent on media content (image, video, etc).

Summary text gives the context to the media:

  • Keep summary text concise, 1-2 lines at LG breakpoint
  • Use sentence case

Credit provides attribution to the correct sources:

  • Use to help users evaluate the strength and validity of the material the author has used
  • Begin credit text with “Video Credit” or “Image Credit”
Do
Credit lines with proper separation from the summary lines above

Do provide further explanation of media in the summary field and attribution in the credit field.

Don't
Credit lines with improper separation from the summary lines

Don't combine attribution within the summary field.

Types of accreditations

For photos submitted by customers or members:

  • Provide first name, initial of last name (not full last name)
  • If available, use the social media site handle (for example, Madeline G. @maddyluv) from where the asset was provided

For multiple photo accreditations:

  • List in clockwise order from top
  • Separate by commas and semicolons
  • Don't use breaking spaces
  • For example, “Image Credits: top left, Madeline G. @maddyluv; top right, Kevin C.; bottom right, George M. @gmonkey”

For purchased assets (photos or video):

Use full name, provided a signed release is on file.

For copyrighted media (photos or video):

  • Use © symbol and date separated by (non-breaking) spaces and photographer name. (e.g. © 2017 Norm Bellows)
  • If date is not available, use © symbol and photographer name separated by a (non-breaking) space. (e.g. © Norm Bellows)

Accessibility

What Cedar provides

CdrCaption uses 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.

Development responsibilities

When using this component, here's what you are responsible for:

  • Use captions sparingly and only with accompanied media
  • Don’t use caption text styles for body copy. It is smaller than the recommended size for text readability

Implementation

The CdrCaption component is developed to work within a composition with other components. However, composition-type components have not been developed yet.

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>

API

CdrCaption

Props

NameTypeDefault
summary

Sets the string content for the description body of the caption.

string
credit

Sets the string content for attribution.

string