As of April 20, 2023, the Instant Articles API no longer returns data. Instant Articles API endpoints cannot be called on v17 or later and will be removed entirely on August 21, 2023.
Example Articles
Use our three Example Articles to get inspired by the interactive features and typographic elements available in Instant Articles. Find the code for each of the articles below.
Example Articles HTML Markup
“Instant Articles Overview” Sample Code
This example article describes and previews the unique immersive features available in Instant Articles. Experience tilt-to-explore images, autoplay video, in-line related articles, 3D maps and more. Read up on interactive features.
<!doctype html>
<html lang="en" prefix="op: http://media.facebook.com/op#">
<head>
<meta charset="utf-8">
<link rel="canonical" href="http://instantarticles.fb.com/example1">
<link rel="stylesheet" title="default" href="#">
<title>Instant Articles</title>
<meta property="fb:article_style" content="Test Article Style">
</head>
<body>
<article>
<header>
<!-- The header image shown inside your article -->
<figure data-mode=aspect-fit>
<video loop>
<source src="http://fb.me/ia-video-ia_b_roll.mov" type="video/mov" />
</video>
</figure>
<!-- The title and subtitle shown in your article -->
<h1> Instant Articles </h1>
<h2>Get familiar with your new storytelling tools. Make your media come alive, and keep readers coming back for more</h2>
<!-- A kicker for your article -->
<h3 class="op-kicker">
Introduction
</h3>
<!-- The author of your article -->
<address>
Instant Articles Team
</address>
<!-- The published and last modified time stamps -->
<time class="op-published" dateTime="2016-2-04T08:00">February 4th 2016, 8:00 AM</time>
<time class="op-modified" dateTime="2016-2-04T08:00">February 4th 2016, 8:00 AM</time>
</header>
<p>Yes, it’s true. Instant Articles open on mobile devices really quickly.</p>
<p>But that’s just the beginning of it. Instant Articles are buttery smooth and addictive. Once you’ve read a few, you’ll never want to go back.</p>
<p>The Facebook-native format is packed with innovative ways to tell deeply engaging, interactive stories. Thanks to the powerful, built-in media features and customizable typographic elements, Instant Articles gives you awesome new editorial tools to use while delivering a decidedly superior experience for your readers.</p>
<p>More than half of Instant Articles readers scroll 90% of the way through their articles, while, historically, 38% of web readers haven’t made it past the first line of other online media.</p>
<p>This article gives you a quick highlight tour of Instant Articles features and shows you how to make magic with the format. You’ll be happy to find that Instant Articles are not only delightful but surprisingly easy to
e.</p>
<h1> Photography </h1>
<p>All photographs are interactive by default. When tapped an image will expand to fill the screen, then readers can tilt the phone back and forth to explore the margins.</p>
<!-- Photo with caption -->
<figure>
<img src="http://fb.me/ia-img-fisherman.jpg" />
<figcaption><h1>Photograph Example</h1>Tap this image to make it expand. Tilt the phone right and left and see what happens.
<cite>tunart/Getty Images</cite>
</figcaption>
</figure>
<p>To return to the article, tap the image again. The interactive mode works best with high-definition photos containing rich visual information. For low-resolution media, we recommend using the non-interactive setting so that it will remain in-line in the correct aspect ratio and your readers won’t tap into a mushy, pixelated experience.</p>
<h2>Social Feedback</h2>
<p>You can add native Facebook Likes and Comments buttons to images, giving readers extra opportunities to engage with individual elements in your stories. This feature currently works for photographs and videos.</p>
<h2>Slideshow</h2>
<p>You can also group collections of images into slideshows that scroll horizontally.
</p>
<!-- Slideshow with multiple captions-->
<figure class="op-slideshow">
<figure>
<img src="http://fb.me/ia-img-townhouses.jpg"/>
<figcaption class="op-vertical-bottom">
<h1 class="op-vertical-bottom"> 1/5 </h1> This caption becomes visible once you enter the slideshow by tapping the first image.
<cite class="op-vertical-bottom">Kimson Doan/Unsplash</cite> </figcaption>
</figure>
<figure>
<img src="http://fb.me/ia-img-grafitti.jpg" />
<figcaption class="op-vertical-bottom">
<h1 class=op-vertical-bottom> 2/5 </h1> Each photo in a slideshow can have its own caption.
<cite class="op-vertical-bottom">Peter Dargatz/Pixabay</cite>
</figcaption>
</figure>
<figure>
<img src="http://fb.me/ia-img-dancer.jpg" />
<figcaption class="op-vertical-bottom">
<h1 class="op-vertical-bottom"> 3/5 </h1> This is the third photo of the slideshow.
<cite class="op-vertical-bottom">blanaru/iStock</cite>
</figcaption>
</figure>
<figure>
<img src="http://fb.me/ia-img-subway_orange.jpg" />
<figcaption class="op-vertical-bottom">
<h1 class=op-vertical-bottom> 4/5 </h1> The fourth photo of the slideshow.
<cite class="op-vertical-bottom">Christian Beirle González/Getty Images </cite>
</figcaption>
</figure>
<figure>
<img src="http://fb.me/ia-img-subway_yellow.jpg" />
<figcaption class="op-vertical-bottom">
<h1 class=op-vertical-bottom> 5/5 </h1> The fifth photo of the slideshow.
<cite class="op-vertical-bottom">Ole Spata/EyeEm</cite>
</figcaption>
</figure>
<figcaption>
<h1>Slideshow Example</h1>
The slideshow caption is visible in-line in the main body of the story. You can also add individual captions for each image in the gallery, which become visible only after entering the slideshow. Tap on the first image to open it.
</figcaption>
</figure>
<h1>Video</h1>
<p>Native videos in Instant Articles play automatically, by default, as soon as they scroll into view on the reader’s screen—a powerful way to make the page come to life. You have many options for presenting videos. Here’s an interactive one with play controls. </p>
<!-- An interactive video with play controls -->
<figure>
<img src="http://fb.me/ia-img-video_frame.jpg" />
<video controls>
<source src="http://fb.me/ia-video-fb_ia_product_video.mov" />
</video>
<figcaption><h1><b>2:57</b> | Interactive Video Example</h1>When this video first scrolls into sight, it appears in-line in its correct aspect ratio and plays automatically with the volume off. By tapping it, the video expands to fill the screen and can be turned to view horizontally. The soundtrack becomes audible, and play controls, with scrubber, are accessible.</figcaption>
</figure>
<p> To hide play controls, tap the video again; the pause/play icons and scrubber can be toggled on and off this way. You can also rotate the phone sideways while the video is in-line to view it in landscape mode.</p>
<p>Alternately, try using a short video to add color and mood to a story. Disable the play controls and set it to loop with a cross-fade.</p>
<!-- A video set to loop and cross-fade with play controls disabled -->
<figure data-mode="aspect-fit">
<video loop data-fade>
<source src="http://fb.me/ia-video-lantern.mov" />
</video>
<figcaption><h1>Ambient Video Example</h1>Tap the video to expand and then tilt to explore. Think of this kind of interactive video as a moving photograph. It gives curious readers an opportunity to explore a living scene and become immersed in a new way. Looping continuously, the video adds atmosphere to an article and can be used to emphasize a section break. <cite>torcia/iStock</cite></figcaption>
</figure>
<p>You can also ingest GIFs natively—no need for third-party players.</p>
<!-- Native GIF example -->
<figure>
<img src="http://fb.me/ia-img-dog.gif" />
<figcaption class="op-vertical-below op-large">
We know GIFs are exciting, but please try to calm down.
<cite>
iStock
</cite>
</figcaption>
</figure>
<h1> Cartography </h1>
<p>Another great way to add information and texture to your stories: maps! Instant Articles has two cartographic features that deliver additional context to news and help readers situate it in the wider world.</p>
<!-- A geotagged image within your article -->
<figure>
<img src="http://fb.me/ia-img-volcano.jpg" />
<figcaption><h1>Geotagging Example</h1>Major news events often occur in locations unfamiliar to readers. Photos and videos in Instant Articles can easily be geotagged, such as this image of Mount Etna, so that readers can tap the globe icon to see where the action is happening. By pinching this map, you can zoom in to see details on the snow-capped slopes of the volcano or zoom out far enough to see the boot of Italy—and beyond.
<cite>Marco Restivo/Getty Images</cite>
</figcaption>
<script type="application/json" class="op-geotag">
{
"type": "Feature",
"geometry":{
"type": "Point",
"coordinates":[37.7550, 14.9950] },
"properties":{
"title": "Mount Etna, Sicily",
"style": "hybrid",
"radius": 10000
}
}
</script>
</figure>
<p>Rotating contour maps can be inserted in stories with a simple code block, giving readers a bird’s-eye view of topography and the ability to pinch and zoom in or out.</p>
<!-- A map within your article -->
<figure class="op-map">
<figcaption><h1>Map Example</h1>The pin on this map designates Facebook Media Central’s offices in New York City.
</figcaption>
<script type="application/json" class="op-geotag">
{
"type": "Feature",
"geometry":
{
"type": "Point",
"coordinates": [ [40.730852, -73.991364], [40.730852, -73.991364] ]
},
"properties":
{
"title": "770 Broadway, Manhattan, New York",
"radius": 100000,
"pivot": true,
"style": "satellite",
}
}
</script>
</figure>
<h1>Embeds</h1>
<p>Instant Articles deliver rich, multimedia stories even when you don’t own all the source media files. You might want to publish evolving news about an incident captured in video on YouTube. Or a listicle made up entirely of Tweets, Facebook posts, Instagrams and Vines. Instant Articles seamlessly integrate all types of web-based embeds, including your own interactive graphics, video players, ads and social media, such as this post from Mark Zuckerberg.</p>
<!-- Embedded social media example -->
<figure class="op-interactive ">
<iframe>
<!-- Include social media embed code here -->
<div id="fb-root"></div><script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script><div class="fb-post" data-href="https://www.facebook.com/zuck/posts/10102531565693851" data-width="500"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/zuck/posts/10102531565693851"><p>The force is strong with this one.</p>Posted by <a href="https://www.facebook.com/zuck">Mark Zuckerberg</a> on <a href="https://www.facebook.com/zuck/posts/10102531565693851">Thursday, December 17, 2015</a></blockquote></div></div>
</iframe>
</figure>
<h1>Typography</h1>
<p>Don’t forget to make use of pull quotes and block quotes. Give the quote extra punch by customizing its color using the <a href="https://developers.facebook.com/docs/instant-articles/design/creating-styles">Style Editor</a>. </p>
<!-- A pull quote within your article -->
<aside>
Being connected means having opportunity. We’re connecting the world so one day everyone can fulfill their dreams.
<cite>Mark Zuckerberg</cite>
</aside>
<p>To include a long excerpt from another source, such as the following example from Sheryl Sandberg’s <em>Lean In: Women, Work, and the Will to Lead</em>, use a block quote. It’s in the same style as the body text but set off with a rule on the left margin.</p>
<!-- A block quote within your article -->
<blockquote>
But knowing that things could be worse should not stop us from trying to make them better. When the suffragettes marched in the streets, they envisioned a century later, men and women would be truly equal. A century later, we are still squinting, trying to bring that vision into focus.
</blockquote>
<h1>In-line Related Articles</h1>
<p>Pique reader interest in more articles from your publication with an in-line related articles element. Choose up to 3 stories and guide readers to other engaging articles. </p>
<ul class="op-related-articles" title="Learn more about Instant Articles">
<li><a href="http://instantarticles.fb.com"></a></li>
<li><a href="https://www.facebook.com/facebookmedia"></a></li>
</ul>
<p>You can also add a related articles element in the footer. Scroll down to the bottom of the story to see that feature in action.</p>
<h1>Customizing the Formatting</h1>
<p>To create advanced effects, you can play with different layout settings on your media elements. To create full-bleed layouts with a magazine-like feel, for example, you can crop a series of photos vertically and stack them in-line without spacing or text in between.</p>
<h2>Fullscreen Media</h2>
<p> Another option is to set images or videos to fullscreen mode, in which case the art crops automatically so that it bleeds off the screen frame and snaps gently into place. It’s kind of like a digital gatefold, giving readers a chance to enjoy a special moment in the story. See how this next image pauses briefly when you scroll it into view.</p>
<!-- A fullscreen image that snaps into place -->
<figure data-mode="fullscreen">
<img src="http://fb.me/ia-img-norway.jpg" />
<figcaption class="op-vertical-bottom op-large">
<h1 class="op-vertical-bottom op-extra-large"> “I want to stay as close to the edge as I can without going over. Out on the edge you see all kinds of things you can’t see from the center.” </h1>Kurt Vonnegut </figcaption>
</figure>
<p>Visit the <a href="https://developers.facebook.com/docs/instant-articles/guides/design">Instant Articles Design Guide</a> to learn how to customize your typography and layout. The <a href="https://developers.facebook.com/docs/instant-articles/reference">Format Reference</a> describes the HTML-5 markup used to set interactive features and vary the presentation modes for media.</p>
<h1>Next</h1>
<p>Get inspired by some of the incredible showcase articles that we’ve posted on the <a href="https://www.facebook.com/instantArticles/?fref=ts">Instant Articles Facebook page</a>. Whether you want to create a specially designed long read filled with multimedia elements or to quickly publish an on-the-scene video connected to an evolving news story, Instant Articles has the features and flexibility to help you deliver stories that not only load fast but are hard to forget.</p>
<p>Look at this format as a tool box. How you choose to use Instant Articles and what you make with them are limited only by your imagination. We plan on continuously adding tools to the kit, based on your experiences and feedback. Our team is eager to work with publishers, bloggers and independent journalists to help you deliver your stories to new audiences with the most impact and multimedia goodness possible.
</p>
<footer>
<ul class="op-related-articles">
<li><a href="http://instantarticles.fb.com"></a></li>
<li><a href="http://instantarticles.fb.com"></a></li>
</ul>
<!-- Credits for your article -->
<aside>The footer section can be used for acknowledgements, author bios, related articles, or any other supplemental information.</aside>
<!-- Copyright details for your article -->
<small>© Facebook</small>
</footer>
</article>
</body>
</html>“Style Your Instant Articles” Sample Code
Use this article to experiment with different styles and explore options for your publication’s visual identity in Instant Articles. Review how to create and modify your own styles.
<!doctype html>
<html lang="en" prefix="op: http://media.facebook.com/op#">
<head>
<meta charset="utf-8">
<link rel="canonical" href="http://instantarticles.fb.com/example2">
<link rel="stylesheet" title="default" href="#">
<title>Style Your Instant Articles</title>
<meta property="fb:article_style" content="Test Article Style">
</head>
<body>
<article>
<header>
<!-- The cover image shown inside your article -->
<figure>
<img src="http://fb.me/ia-img-desert.jpg" />
<figcaption>Header image description becomes visible when image has been tapped and expanded.</figcaption>
</figure>
<!-- The title and subtitle shown in your article -->
<h1> Style Your Instant Articles </h1>
<h2> Use this article to experiment with the look and feel of your brand in Instant Articles </h2>
<!-- A kicker for your article -->
<h3 class="op-kicker">
Customizable Design Elements
</h3>
<!-- The author of your article -->
<address>
Instant Articles Team
</address>
<!-- The published and last modified time stamps -->
<time class="op-published" dateTime="2016-2-04T09:00">February 4th 2016, 9:00 AM</time>
<time class="op-modified" dateTime="2016-2-04T09:00">February 4th 2016, 9:00 AM</time>
</header>
<p>With the <a href="https://developers.facebook.com/docs/instant-articles/design/creating-styles">Style Editor</a>, you can create and modify layout templates that can be applied automatically to individual articles. Each style that you build this way can feature its own logo as well as unique variations of typography and colors.</p>
<p>To experiment, create a new article manually in your Instant Articles Library; copy the markup from this article, and replace the canonical URL with one of your own. You can then easily test out new layout combinations and define the style—or styles—that are right for your publication. This is scrap paper for Instant Articles. Have fun!</p>
<p>Learn more about each of the customizable design elements in the <a href="https://developers.facebook.com/docs/instant-articles/guides/design#design">Instant Articles Design Guide</a>.
<h1>Example Text Starts Here</h1>
<p>Body Text. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut minim inline link veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. tpariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.</p>
<figure>
<img src="http://fb.me/ia-img-snow.jpg" />
<figcaption><h1>Caption Title Small</h1><h2>Caption Description Small lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</h2>
<cite>PHOTO BY JOHN SMITH</cite>
</figcaption>
<script type="application/json" class="op-geotag">
{
"type": "Feature",
"geometry":{
"type": "Point",
"coordinates":[37.5922282, -106.7008752] },
"properties":{
"title": "LOCATION",
"style": "hybrid",
"radius": 2000
}
}
</script>
</figure>
<p>Body Text. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem doloremque, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt.</p>
<h1> H1 lorem ipsum </h1>
<p>Body Text. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.</p>
<aside>
Pull quote lorem ipsum dolor sit amet, cons ectetur adipi sicing elit, sed do eiusmod.
<cite>JOHN SMITH LOREM IPSUM</cite>
</aside>
<p>Body Text. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h2> H2 lorem ipsum </h2>
<p>Body Text. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.</p>
<blockquote>
Block quote. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostr ud exer citation ullamco laboris.
</blockquote>
<p>Body Text. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla.</p>
<figure>
<video>
<source src="http://fb.me/ia-video-forest.mov" />
</video>
<figcaption class="op-medium"><h1>2:08 | Caption Title Small</h1>Caption Description Medium</figcaption>
</figure>
<p>Body Text. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem doloremque, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt.</p>
<footer>
<aside>
Footer totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</aside>
<small>© Facebook</small>
</footer>
</article>
</body>
</html> “Using Captions in Instant Articles” Sample Code
Captions in Instant Articles are an incredibly versatile design feature. By varying the size and positioning them above, below or on top of media, you can create all kinds of emphatic effects. Learn about the advanced captioning formats to choose from in Instant Articles. Explore our other custom design features.
<!doctype html>
<html lang="en" prefix="op: http://media.facebook.com/op#">
<head>
<meta charset="utf-8">
<link rel="canonical" href="http://instantarticles.fb.com/example3">
<link rel="stylesheet" title="default" href="#">
<title>Using Captions in Instant Articles</title>
<meta property="fb:article_style" content="Test Article Style">
</head>
<body>
<article>
<header>
<!-- The cover image shown inside your article -->
<figure>
<img src="http://fb.me/ia-img-mont_st_michel.jpg" />
<figcaption>Header image description becomes visible after image has been tapped and expanded.</figcaption>
</figure>
<!-- The title shown in your article -->
<h1> Using Captions in Instant Articles </h1>
<!-- The subtitle shown in your article -->
<h2> Captions are super flexible in Instant Articles. Learn how to use the many variations expressively </h2>
<!-- A kicker for your article -->
<h3 class="op-kicker">
Creative Captions
</h3>
<!-- The author of your article -->
<address>
<a>Instant Articles Team</a>
</address>
<!-- The published and last modified time stamps -->
<time class="op-published" dateTime="2016-2-04T10:00">February 4th 2016, 10:00 AM</time>
<time class="op-modified" dateTime="2016-2-04T10:00">February 4th 2016, 10:00 AM</time>
</header>
<h1> Caption Formatting </h1>
<p> There are three elements to each caption: <strong> title</strong>, <strong> description</strong> and <strong> credit </strong>. Both the <strong> title </strong> and <strong> description </strong> can be styled with different typefaces and colors using the <a href="https://developers.facebook.com/docs/instant-articles/design/creating-styles">Style Editor</a>. Styles are applied on the article level. Within each article, individual captions may be formatted with small, medium, large or extra-large font sizes. The typeface and color of the <strong> credit </strong> can be customized, but the size remains fixed.</p>
<p>The four following examples show variations in title and description sizes.</p>
<p> </p>
<figure>
<img src="http://fb.me/ia-img-mont_st_michel.jpg"/>
<figcaption class="op-extra-large">
<h1 class="op-small">Caption Title Small</h1>
This description uses extra-large text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<cite>Photo Credit</cite> </figcaption>
</figure>
<p> </p>
<figure>
<img src="http://fb.me/ia-img-mont_st_michel.jpg"/>
<figcaption class="op-large">
<h1 class="op-medium">Caption Title Medium</h1>
This description uses large text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<cite>Photo Credit</cite> </figcaption>
</figure>
<p> </p>
<figure>
<img src="http://fb.me/ia-img-mont_st_michel.jpg"/>
<figcaption class="op-medium">
<h1 class="op-large">Caption Title Large</h1>
This description uses medium text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<cite>Photo Credit</cite> </figcaption>
</figure>
<p> </p>
<figure>
<img src="http://fb.me/ia-img-mont_st_michel.jpg"/>
<figcaption class="op-small">
<h1 class="op-extra-large">Caption Title XL</h1>
This description uses small text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<cite>Photo Credit</cite> </figcaption>
</figure>
<h1> Vertical Positioning </h1>
<p> You can place a caption in one of five vertical positions in relation to a media element. A caption can be <strong>above</strong>, <strong>below</strong> or superimposed on an image at its <strong>top</strong>, <strong>bottom</strong> or <strong>center</strong>. </p>
<p>Each element of the caption (title, description, and credit) can be in any one of those five spots. So you could have a title above the image, the description superimposed at the top and the credit below, if you wished. If no position is defined for an element, it defaults to below the image.</p>
<p>The six following examples demonstrate a variety of vertical placement combinations.</p>
<p> </p>
<figure>
<img src="http://fb.me/ia-img-mushroom.jpg">
<figcaption class="op-vertical-above op-medium">
<h1 class="op-vertical-above op-large">Caption Title Large</h1>
This caption is above the image. Description uses medium text.
<cite class="op-vertical-above">Photo Credit</cite> </figcaption>
</figure>
<p> </p>
<figure>
<img src="http://fb.me/ia-img-mushroom.jpg"/>
<figcaption class="op-vertical-below op-medium">
<h1 class="op-vertical-below op-large">Caption Title Large</h1>
This caption is below the image. Description uses medium text.
<cite class="op-vertical-below">Photo Credit</cite> </figcaption>
</figure>
<p> </p>
<figure>
<img src="http://fb.me/ia-img-mushroom.jpg"/>
<figcaption class="op-vertical-top op-medium">
<h1 class="op-vertical-top op-large">Caption Title Large</h1>
This caption is within the image at the top. Description uses medium text.
<cite class="op-vertical-top">Photo Credit</cite> </figcaption>
</figure>
<p> </p>
<figure>
<img src="http://fb.me/ia-img-mushroom.jpg"/>
<figcaption class="op-vertical-bottom op-medium">
<h1 class="op-vertical-bottom op-large">Caption Title Large</h1>
This caption is within the image at the bottom. Description uses medium text.
<cite class="op-vertical-bottom">Photo Credit</cite> </figcaption>
</figure>
<p> </p>
<figure>
<img src="http://fb.me/ia-img-mushroom.jpg"/>
<figcaption class="op-vertical-center op-medium">
<h1 class="op-vertical-center op-large">Caption Title Large</h1>
This caption is within the image at the center. Description uses medium text.
<cite class="op-vertical-center">Photo Credit</cite> </figcaption>
</figure>
<p> </p>
<figure>
<img src="http://fb.me/ia-img-mushroom.jpg"/>
<figcaption class="op-vertical-top op-medium">
<h1 class="op-vertical-above op-large">Caption Title Large</h1>
This caption is within the image at the top. Description uses medium text.
<cite class="op-vertical-below">Photo Credit</cite> </figcaption>
</figure>
<p> </p>
<h1> Horizontal Positioning </h1>
<p> You can also place a caption in one of three horizontal positions in relation to a media element. A caption can be aligned to the <strong>left</strong>, <strong>right</strong> or <strong>center</strong>. </p>
<p>If no horizontal position is defined for an element, it defaults to the left.</p>
<p>The five following examples demonstrate a variety of horizontal placement combinations.</p>
<p> </p>
<figure>
<img src="http://fb.me/ia-img-balloons.jpg"/>
<figcaption class="op-vertical-below op-medium op-right">
<h1 class="op-vertical-below op-large op-right">Caption Title Large</h1>
This caption is below the image and right aligned. Description uses medium text.
<cite class="op-vertical-below op-right">Photo Credit</cite> </figcaption>
</figure>
<p> </p>
<figure>
<img src="http://fb.me/ia-img-balloons.jpg"/>
<figcaption class="op-vertical-below op-medium op-center">
<h1 class="op-vertical-below op-large op-center">Caption Title Large</h1>
This caption is below the image and center aligned. Description uses medium text.
<cite class="op-vertical-below op-center">Photo Credit</cite> </figcaption>
</figure>
<p> </p>
<figure>
<img src="http://fb.me/ia-img-balloons.jpg"/>
<figcaption class="op-vertical-top op-medium op-right">
<h1 class="op-vertical-top op-large op-right">Caption Title Large</h1>
This caption is within the image at the top and right aligned. Description uses medium text.
<cite class="op-vertical-top op-right">Photo Credit</cite> </figcaption>
</figure>
<p> </p>
<figure>
<img src="http://fb.me/ia-img-balloons.jpg"/>
<figcaption class="op-vertical-top op-medium op-center">
<h1 class="op-vertical-top op-large op-center">Caption Title Large</h1>
This caption is within the image at the top and center aligned. Description uses medium text.
<cite class="op-vertical-top op-center">Photo Credit</cite> </figcaption>
</figure>
<p> </p>
<figure>
<img src="http://fb.me/ia-img-balloons.jpg"/>
<figcaption class="op-vertical-above op-medium op-center">
<h1 class="op-vertical-above op-large op-center">Caption Title Large</h1>
This caption is above the image and center aligned. Description uses medium text.
<cite class="op-vertical-below op-left">Photo Credit</cite> </figcaption>
</figure>
<p> </p>
<p>Learn more about captions and other customizable design elements in the <a href="https://developers.facebook.com/docs/instant-articles/guides/design#design">Instant Articles Design Guide</a>.
</p>
<footer>
<!-- Copyright details for your article -->
<small>© Facebook</small>
</footer>
</article>
</body>
</html>