Foreign Affairs Style Guide

Foreign Affairs

Homepage Module -- New Issue Lockup

This component displays the newest issue. It appears as a homepage break and can be 2/3rd width.

Redline Notes:
Images Styles:

Current Issue

May / June 2017

Subscribe
Go to Magazine 
<section class="new-issue-lockup--2 clearfix">
  <h2 class="new-issue-contents__label">Current Issue</h2>
  <div class="issue-lockup">
    <h3 class="new-issue-lockup-date">May / June 2017</h3>
    <div class="wrapper">
      <div class="new-issue-lockup-image image-auto-width">
        <a href="#">
          <img src="/fa_prototype/assets/images/responsiveimg/new-issue-300.jpg" data-src-low="/fa_prototype/assets/images/responsiveimg/new-issue-300.jpg|/fa_prototype/assets/images/responsiveimg/new-issue-640.jpg" data-src-medium="/fa_prototype/assets/images/responsiveimg/new-issue-640.jpg|/fa_prototype/assets/images/responsiveimg/new-issue-1000.jpg" data-src="/fa_prototype/assets/images/responsiveimg/new-issue-300.jpg" class="new-issue-img" />
        </a>
      </div>
    </div>
  </div>
  <div class="new-issue-contents">
    <article class="new-issue-contents-item">
      <h2 class="new-issue-contents__title"><a href="#">The Incredible Shrinking Buffer</a></h2>
      <h3 class="new-issue-contents__deck">UN Peacekeepers Face Crisis in the Golan Heights. </h3>
      <h4 class="new-issue-contents__author">Bilal Y. Saab</h4>
    </article>
    <article class="new-issue-contents-item">
      <h2 class="new-issue-contents__title"><a href="#">The Incredible Shrinking Buffer</a></h2>
      <h3 class="new-issue-contents__deck">UN Peacekeepers Face Crisis in the Golan Heights</h3>
      <h4 class="new-issue-contents__author">Bilal Y. Saab</h4>
    </article>
    <article class="new-issue-contents-item">
      <h2 class="new-issue-contents__title"><a href="#">The Incredible Shrinking Buffer</a></h2>
      <h3 class="new-issue-contents__deck">UN Peacekeepers Face Crisis in the Golan Heights</h3>
      <h4 class="new-issue-contents__author">Bilal Y. Saab</h4>
    </article>
    <article class="new-issue-contents-item">
      <h2 class="new-issue-contents__title"><a href="#">The Incredible Shrinking Buffer</a></h2>
      <h3 class="new-issue-contents__deck">UN Peacekeepers Face Crisis in the Golan Heights</h3>
      <h4 class="new-issue-contents__author">Bilal Y. Saab</h4>
    </article>
  </div>
  <div class="issue-lockup">
    <a href="#" class="button__red-reversed--light new-issue-cta">Subscribe</a>
  </div>
  <div class="new-issue-contents mobile-hidden">
    <a href="#" class="button__blue new-issue-cta">Go to Magazine</a>
  </div>
</section>