Caption

# Use When

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

# Don’t Use When

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

# Foundations

• Captions align to the left border based on the paragraph container and 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
• Left padding is added to the caption container
  
  
  

# Content

The Captions 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)

Text fields within a caption:

• Summary text gives the media context:
  • Keep summary text concise, 1-2 lines at LG breakpoint
  • Use sentence case
• Credit provides attribution to the correct sources:
  • Helps users gauge the strength and validity of the material the author has used
  • Begin credit text with “Video Credit” or “Image Credit”

# Types of Accreditations

For photos submitted by customers or members:

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

For multiple photo accreditations:

• List in clockwise order from top
• Separated by commas and semicolons
• No 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 there 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)

# For More Information

• For more information about photo accreditation recommendations:
  • Noble Blogger Guidelines: How to Cite Pictures
  • NPR Training, Storytelling tips and best practices: These are NPR's photo caption guidelines

# Behavior

# Do / Don’t

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.

# Props

# Installation

Resources are available within the CdrCaption package

• Component: @rei/cdr-caption
• Component styles: cdr-caption.css

To incorporate the required assets for a component, use the following steps:

# 1. Install using NPM

Install the CdrCaption package using npm in your terminal:

Terminal

npm i -S @rei/cdr-text

# 2. Import Dependencies

main.js

// import your required css.
import "@rei/cdr-caption/dist/cdr-caption.css";

# 3. Add Component to a Template

local.vue

<template>
  <cdr-caption
     summary="Lorem ipsum dolor sit amet elit."
     credit="Lorem ipsum dolor sit"
   />

</template>

<script>
import { CdrCaption } from '@rei/cdr-caption';
export default {
  ...
  components: {
     CdrCaption  
  }
}
</script>

# Usage

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>