Caption

Captions can be added to an Image, Video, Slideshow, Map, Social Embed, or Interactive Graphic within an Instant Article to provide additional detail about the content.

Captions are specified using the standard HTML <figcaption> element. To attach a caption to a media element within an Instant Article, insert a <figcaption> element inside the <figure> element that defines this media element. Captions can be rendered above, below or superimposed on top of the media element.

Options

Name	Description	Definition
Credit	An attribution to the originator/creator of the content.	Specify this using the first `<cite>` element in the `<figcaption>` element. The `<cite>` element can have the standard text annotation classes to control how they are displayed. Its size, however, is fixed.
Font Size	The size of the font used in the text of the caption.	Specify this by adding one of these classes to the `<figcaption>` element: `op-small` `op-medium` `op-large` `op-extra-large`
Horizontal Alignment	The horizontal alignment of the caption text within its container.	Specify this by adding one of these classes to the `<figcaption>` element or its children: `op-left` (default): positions caption text at the left of the container `op-center`: centers caption text withing the container `op-right`: positions caption text at the right of the container
Positioning	The positioning style of the caption for a rich meda element.	Specify this by adding one of these classes to the `<figcaption>` element or its children: `op-vertical-below` (default): positions caption below the Rich Media element `op-vertical-above`: positions caption above the Rich Media element `op-vertical-center`: superimposes the caption on top of the Rich Media element
Title [required]	A title for the captioned content.	Specify this with any content found within the first `<h1>` element.
Vertical Alignment	The vertical alignment of the caption text within its container.	Specify this by adding one of these classes to the `<figcaption>` element or its children: `op-vertical-bottom`: positions caption text at the bottom of the container `op-vertical-center`: centers caption text within the container `op-vertical-top`: positions caption text at the top of the container

Examples

Superimposed on top of media element

Captions can be superimposed on top of your media element by applying the op-vertical-center class to the <figcaption> element that defines your caption.

<figure>
   <img src="http://example.images.com/1.jpg"/>
   <figcaption class="op-vertical-center">
     <h1>Image 1 Title</h1>
   </figcaption>
</figure>

Above media element

The caption can be displayed above the media element by applying the op-vertical-above class to the <figcaption> element that defines your caption.

Note: A caption placed above a fullscreen image will appear at the top of the image.

<figure>
   <img src="http://example.images.com/1.jpg"/>
   <figcaption class="op-vertical-above">
     <h1>Image 1 Title</h1>
   </figcaption>
</figure>

Below media element

Captions can be dispalyed below your media element by applying the op-vertical-below class to the <figcaption> element that defines your caption.

Note: A caption placed below a fullscreen image will appear at the bottom of the image.

<figure>
   <img src="http://example.images.com/1.jpg"/>
   <figcaption class="op-vertical-below">
     <h1>Image 1 Title</h1>
   </figcaption>
</figure>

Position caption elements individually

Caption elements can be positioned individually by applying position classes to the <h1> or <cite> child elements of <figcaption>. The class applied to the <figcaption> element itself will define position of the caption body. In this example, the caption title is positioned above and aligned center; the caption body is vertically centered, and the credit is below the media element and aligned right.

<figure>
  <img src="http://example.images.com/1.jpg" />
  <figcaption class="op-vertical-center">
    <h1 class="op-vertical-above op-center">Caption Title</h1>
      Caption Description. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    <cite class="op-vertical-below op-right">Photo Credit</cite>
  </figcaption>
</figure>

You can see more examples of caption positioning in our Example Articles.