Foreign Affairs Style Guide

Foreign Affairs

Article Recirculation


This appears at the bottom of an article page. It should contain different article types dependent on which article you are currently viewing. You can see an interview style recirculation on the interview page.

Data Sources:
<div class="container">
    <div class="l-article-column">
      <section class="recirc">
        <h1 class="recirc__title">More Image Galleries</h1>
            <article class="list__row-meta multimedia-list-item is-gallery" style="background-image:url(/fa_prototype/assets/images/16x9_comp2.jpg);">
  <div class="multimedia-list-item__gradient-wrapper">

    <div class="meta">
      <span class="topic"><a href="#">Immigration Reform</a></span>
      <span class="date"><time pubdate datetime="2013-09-15" title="Sep. 15, 2013">Sep. 15, 2013</time></span>
      <span class="type"><a href="#">Gallery</a></span>
    </div>

    <div class="multimedia-list-item-article">
      <a href="#">
        <h1 class="multimedia-list-item-article__title">Foreign Policy a la Modi</h1>
        <p class="multimedia-list-item-article__deck">Where Juba Gets Its Energy. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        <div class="multimedia-list-item__gallery-preview">
          <img class="multimedia-list-item__gallery-preview-image" src="/fa_prototype/assets/images/16x9_comp2.jpg" />
          <img class="multimedia-list-item__gallery-preview-image" src="/fa_prototype/assets/images/16x9_comp1.jpg" />
          <img class="multimedia-list-item__gallery-preview-image" src="/fa_prototype/assets/images/16x9_comp3.jpg" />
          <img class="multimedia-list-item__gallery-preview-image is-last" src="/fa_prototype/assets/images/16x9_comp4.jpg" />
        </div>
      </a>
    </div>

  </div>
  </article>

            <article class="list__row-meta multimedia-list-item is-gallery" style="background-image:url(/fa_prototype/assets/images/16x9_comp2.jpg);">
  <div class="multimedia-list-item__gradient-wrapper">

    <div class="meta">
      <span class="topic"><a href="#">Immigration Reform</a></span>
      <span class="date"><time pubdate datetime="2013-09-15" title="Sep. 15, 2013">Sep. 15, 2013</time></span>
      <span class="type"><a href="#">Gallery</a></span>
    </div>

    <div class="multimedia-list-item-article">
      <a href="#">
        <h1 class="multimedia-list-item-article__title">Foreign Policy a la Modi</h1>
        <p class="multimedia-list-item-article__deck">Where Juba Gets Its Energy. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        <div class="multimedia-list-item__gallery-preview">
          <img class="multimedia-list-item__gallery-preview-image" src="/fa_prototype/assets/images/16x9_comp2.jpg" />
          <img class="multimedia-list-item__gallery-preview-image" src="/fa_prototype/assets/images/16x9_comp1.jpg" />
          <img class="multimedia-list-item__gallery-preview-image" src="/fa_prototype/assets/images/16x9_comp3.jpg" />
          <img class="multimedia-list-item__gallery-preview-image is-last" src="/fa_prototype/assets/images/16x9_comp4.jpg" />
        </div>
      </a>
    </div>

  </div>
  </article>

            <article class="list__row-meta multimedia-list-item is-gallery" style="background-image:url(/fa_prototype/assets/images/16x9_comp2.jpg);">
  <div class="multimedia-list-item__gradient-wrapper">

    <div class="meta">
      <span class="topic"><a href="#">Immigration Reform</a></span>
      <span class="date"><time pubdate datetime="2013-09-15" title="Sep. 15, 2013">Sep. 15, 2013</time></span>
      <span class="type"><a href="#">Gallery</a></span>
    </div>

    <div class="multimedia-list-item-article">
      <a href="#">
        <h1 class="multimedia-list-item-article__title">Foreign Policy a la Modi</h1>
        <p class="multimedia-list-item-article__deck">Where Juba Gets Its Energy. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        <div class="multimedia-list-item__gallery-preview">
          <img class="multimedia-list-item__gallery-preview-image" src="/fa_prototype/assets/images/16x9_comp2.jpg" />
          <img class="multimedia-list-item__gallery-preview-image" src="/fa_prototype/assets/images/16x9_comp1.jpg" />
          <img class="multimedia-list-item__gallery-preview-image" src="/fa_prototype/assets/images/16x9_comp3.jpg" />
          <img class="multimedia-list-item__gallery-preview-image is-last" src="/fa_prototype/assets/images/16x9_comp4.jpg" />
        </div>
      </a>
    </div>

  </div>
  </article>

        <a class="recirc__cta" href="#">Browse All Image Galleries <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="195 398.9 610 937.8" enable-background="new 195 398.9 610 937.8" xml:space="preserve">
<g>
	<polygon points="805,867.8 336,1336.7 195,1315.5 642.6,867.8 195,420.1 336,398.9 	"/>
</g>
</svg>
</a>
      </section>
    </div>
</div>