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 1/3rd width or 2/3rd width.

Redline Notes:
Images Styles:
New Issue

Read the Issue ›

Also Available on





New Issue

Read the Issue >

Also Available on

In this Issue: 

<section class="new-issue-lockup">

  <div class="wrapper">
    <div class="ribbon-wrapper">
      <div class="ribbon">New Issue</div>
    </div>
    <div class="new-issue-lockup-image image-auto-width">
      <img src="/fa_prototype/assets/images/responsiveimg/new-issue-300.jpg" srcset="/fa_prototype/assets/images/responsiveimg/new-issue-640.jpg 2x, /fa_prototype/assets/images/responsiveimg/new-issue-1000.jpg 3x" />
    </div>
  </div>

  <p class="button--new-issue-lockup"><a href="#" >Read the Issue ›</a></p>

  <div class="new-issue-lockup-external-sales">
    <p class="external-sales__title">Also Available on</p>
      <a class="external-sales__icon" href="#"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="21.3 322.5 957.3 905" enable-background="new 21.3 322.5 957.3 905" xml:space="preserve">
<g>
	<g>
		<path d="M972,969.9c-14-17.4-52.2-20.9-69.7-20.9c-34.8,0-80.1,10.4-107.9,34.8c-3.5,3.5-17.4,13.9-10.4,24.4
			c3.5,10.4,17.4,10.4,20.9,10.4s3.5,0,7,0h7c20.9,0,38.3-3.5,55.7-3.5c7,0,13.9,0,24.4,0s10.4,3.5,10.4,3.5c3.5,7,0,20.9,0,31.3
			c-7,38.3-10.4,59.2-24.4,94c-3.5,13.9-3.5,20.9,0,24.4s7,7,10.4,7c10.4,0,24.4-13.9,24.4-13.9C961.5,1123.1,992.8,994.3,972,969.9
			z M860.6,1046.5c-7,0-13.9,3.5-24.4,7c-107.9,55.7-208.8,73.1-330.7,73.1c-149.7,0-295.9-45.3-424.7-128.8l-3.5-3.5
			c-7-3.5-13.9-10.4-24.4-17.4c-7-3.5-10.4-7-17.4-7c-3.5,0-10.4,3.5-10.4,7c-7,7-3.5,17.4,3.5,27.8
			c132.3,146.2,292.4,222.8,469.9,222.8l0,0c10.4,0,20.9,0,31.3,0c153.2-7,271.5-73.1,337.6-132.3c13.9-13.9,20.9-31.3,10.4-41.8
			C874.5,1046.5,867.5,1046.5,860.6,1046.5z M439.4,573.1c-107.9,7-208.8,76.6-212.3,205.4C223.6,896.8,307.1,956,422,949
			c66.1-3.5,125.3-31.3,170.6-80.1l62.7,69.6c3.5,3.5,10.4,7,13.9,7c7,0,10.4-3.5,13.9-7l83.5-76.6c7-7,7-17.4,3.5-24.4l-31.3-38.3
			c-7-7,0-41.8,0-62.7V472.2c0-94-94-149.7-264.5-149.7c-100.9,3.5-198.4,38.3-222.8,156.6c0,3.5,0,10.4,3.5,13.9
			c3.5,3.5,7,7,13.9,7l104.4,10.4c10.4,0,20.9-7,20.9-13.9c7-34.8,38.3-62.7,80.1-62.7c62.7,0,90.5,31.3,90.5,73.1v55.7L439.4,573.1
			z M568.2,646.2v73.1c0,55.7-38.3,104.4-73.1,114.9c-62.7,17.4-104.4-27.8-104.4-80.1c3.5-66.1,62.7-104.4,111.4-104.4L568.2,646.2
			z"/>
	</g>
</g>
</svg>
</a>
      <a class="external-sales__icon" href="#"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="55.5 214.7 889.1 1056.4" enable-background="new 55.5 214.7 889.1 1056.4" xml:space="preserve">
<g>
	<path d="M601.7,473.9C645.6,458,681.4,454,713.3,454c51.8,0,95.7,12,135.6,39.9c12,8,23.9,15.9,31.9,27.9c12,8,23.9,19.9,35.9,35.9
		c-31.9,27.9-55.8,55.8-71.8,75.8C817,673.2,801,717.1,801,764.9c0,51.8,15.9,99.7,43.9,143.5c27.9,39.9,63.8,67.8,99.7,79.7
		c-8,23.9-19.9,51.8-31.9,79.7s-27.9,51.8-47.8,79.7c-55.8,83.7-107.6,123.6-163.5,123.6c-23.9,0-51.8-8-91.7-19.9
		c-35.9-12-67.8-19.9-95.7-19.9c-27.9,0-59.8,8-91.7,19.9c-35.9,15.9-63.8,19.9-83.7,19.9c-63.8,0-127.6-55.8-191.4-163.5
		C87.4,1000,55.5,892.3,55.5,788.7c0-95.7,23.9-175.4,71.8-239.2c47.8-63.8,107.6-91.7,183.4-91.7c31.9,0,67.8,8,111.6,19.9
		c43.9,12,75.8,19.9,87.7,19.9C529.9,493.8,557.8,489.8,601.7,473.9z M685.4,326.4c-12,31.9-31.9,59.8-59.8,87.7
		c-23.9,23.9-47.8,39.9-71.8,47.8c-15.9,4-35.9,8-63.8,12c0-63.8,15.9-115.6,47.8-163.5c31.9-47.8,83.7-79.7,159.5-95.7
		c0,4,4,12,4,15.9c0,4,0,8,0,12C705.3,266.6,701.3,294.5,685.4,326.4z"/>
</g>
</svg>
</a>
      <a class="external-sales__icon" href="#"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="-0.1 503.7 1000 544.3" enable-background="new -0.1 503.7 1000 544.3" xml:space="preserve">
<g>
	<path d="M0.5,733.1C126,795.8,246.6,855.9,366.7,915.9c36.8,18.4,74.1,36.8,110.9,56.2c15.7,8.1,28.7,8.1,44.9,0
		c149.3-75.7,299.1-150.4,448.4-225c8.1-3.8,16.2-7.6,28.7-13.5c0,22.2,1.1,41.1-0.5,60c-0.5,5.9-8.1,13.5-14.1,16.2
		c-157.4,79-314.8,157.9-472.7,235.8c-7,3.8-19.5,2.7-27-1.1C329.4,967.8,173.6,889.9,17.3,812C3.8,805.6-1.1,797.4,0,782.8
		C1.6,768.2,0.5,753.1,0.5,733.1z"/>
	<path d="M178.5,651.4C381.3,415.1,749.1,480,879.9,721.7c-20.6,10.3-40.6,21.6-62.2,29.2c-5.4,1.6-17.8-8.1-22.7-15.7
		c-56.8-83.8-133-141.2-229.9-168.7C421.9,525.9,293.7,556.8,178.5,651.4z"/>
	<path d="M263.4,749.9c143.3-176.3,397.5-140.6,495.9,33.5c-24.9,12.4-49.2,24.9-73.6,36.8C585.7,669.3,399.7,640.6,263.4,749.9z"/>
	<path d="M563.5,882.4c-64.9-75.7-106.5-87.1-192.5-53c67.6-97.9,199.6-92.5,268.8,14.1C614.4,856.4,589.5,868.8,563.5,882.4z"/>
</g>
</svg>
</a>
  </div>

</section>

    
<section class="new-issue-lockup--2">
<div class="issue-lockup">
  <div class="wrapper">
    <div class="ribbon-wrapper">
      <div class="ribbon">New Issue</div>
    </div>

    <div class="new-issue-lockup-image image-auto-width">
      <img src="/fa_prototype/assets/images/responsiveimg/new-issue-300.jpg" srcset="/fa_prototype/assets/images/responsiveimg/new-issue-640.jpg 2x, /fa_prototype/assets/images/responsiveimg/new-issue-1000.jpg 3x" />
    </div>
  </div>
  <p class="button--new-issue-lockup"><a href="#" >Read the Issue ></a></p>
  <div class="new-issue-lockup-external-sales">
    <p class="external-sales__title"> Also Available on </p>
      <a class="external-sales__icon" href="#"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="21.3 322.5 957.3 905" enable-background="new 21.3 322.5 957.3 905" xml:space="preserve">
<g>
	<g>
		<path d="M972,969.9c-14-17.4-52.2-20.9-69.7-20.9c-34.8,0-80.1,10.4-107.9,34.8c-3.5,3.5-17.4,13.9-10.4,24.4
			c3.5,10.4,17.4,10.4,20.9,10.4s3.5,0,7,0h7c20.9,0,38.3-3.5,55.7-3.5c7,0,13.9,0,24.4,0s10.4,3.5,10.4,3.5c3.5,7,0,20.9,0,31.3
			c-7,38.3-10.4,59.2-24.4,94c-3.5,13.9-3.5,20.9,0,24.4s7,7,10.4,7c10.4,0,24.4-13.9,24.4-13.9C961.5,1123.1,992.8,994.3,972,969.9
			z M860.6,1046.5c-7,0-13.9,3.5-24.4,7c-107.9,55.7-208.8,73.1-330.7,73.1c-149.7,0-295.9-45.3-424.7-128.8l-3.5-3.5
			c-7-3.5-13.9-10.4-24.4-17.4c-7-3.5-10.4-7-17.4-7c-3.5,0-10.4,3.5-10.4,7c-7,7-3.5,17.4,3.5,27.8
			c132.3,146.2,292.4,222.8,469.9,222.8l0,0c10.4,0,20.9,0,31.3,0c153.2-7,271.5-73.1,337.6-132.3c13.9-13.9,20.9-31.3,10.4-41.8
			C874.5,1046.5,867.5,1046.5,860.6,1046.5z M439.4,573.1c-107.9,7-208.8,76.6-212.3,205.4C223.6,896.8,307.1,956,422,949
			c66.1-3.5,125.3-31.3,170.6-80.1l62.7,69.6c3.5,3.5,10.4,7,13.9,7c7,0,10.4-3.5,13.9-7l83.5-76.6c7-7,7-17.4,3.5-24.4l-31.3-38.3
			c-7-7,0-41.8,0-62.7V472.2c0-94-94-149.7-264.5-149.7c-100.9,3.5-198.4,38.3-222.8,156.6c0,3.5,0,10.4,3.5,13.9
			c3.5,3.5,7,7,13.9,7l104.4,10.4c10.4,0,20.9-7,20.9-13.9c7-34.8,38.3-62.7,80.1-62.7c62.7,0,90.5,31.3,90.5,73.1v55.7L439.4,573.1
			z M568.2,646.2v73.1c0,55.7-38.3,104.4-73.1,114.9c-62.7,17.4-104.4-27.8-104.4-80.1c3.5-66.1,62.7-104.4,111.4-104.4L568.2,646.2
			z"/>
	</g>
</g>
</svg>
</a>
      <a class="external-sales__icon" href="#"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="55.5 214.7 889.1 1056.4" enable-background="new 55.5 214.7 889.1 1056.4" xml:space="preserve">
<g>
	<path d="M601.7,473.9C645.6,458,681.4,454,713.3,454c51.8,0,95.7,12,135.6,39.9c12,8,23.9,15.9,31.9,27.9c12,8,23.9,19.9,35.9,35.9
		c-31.9,27.9-55.8,55.8-71.8,75.8C817,673.2,801,717.1,801,764.9c0,51.8,15.9,99.7,43.9,143.5c27.9,39.9,63.8,67.8,99.7,79.7
		c-8,23.9-19.9,51.8-31.9,79.7s-27.9,51.8-47.8,79.7c-55.8,83.7-107.6,123.6-163.5,123.6c-23.9,0-51.8-8-91.7-19.9
		c-35.9-12-67.8-19.9-95.7-19.9c-27.9,0-59.8,8-91.7,19.9c-35.9,15.9-63.8,19.9-83.7,19.9c-63.8,0-127.6-55.8-191.4-163.5
		C87.4,1000,55.5,892.3,55.5,788.7c0-95.7,23.9-175.4,71.8-239.2c47.8-63.8,107.6-91.7,183.4-91.7c31.9,0,67.8,8,111.6,19.9
		c43.9,12,75.8,19.9,87.7,19.9C529.9,493.8,557.8,489.8,601.7,473.9z M685.4,326.4c-12,31.9-31.9,59.8-59.8,87.7
		c-23.9,23.9-47.8,39.9-71.8,47.8c-15.9,4-35.9,8-63.8,12c0-63.8,15.9-115.6,47.8-163.5c31.9-47.8,83.7-79.7,159.5-95.7
		c0,4,4,12,4,15.9c0,4,0,8,0,12C705.3,266.6,701.3,294.5,685.4,326.4z"/>
</g>
</svg>
</a>
      <a class="external-sales__icon" href="#"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="-0.1 503.7 1000 544.3" enable-background="new -0.1 503.7 1000 544.3" xml:space="preserve">
<g>
	<path d="M0.5,733.1C126,795.8,246.6,855.9,366.7,915.9c36.8,18.4,74.1,36.8,110.9,56.2c15.7,8.1,28.7,8.1,44.9,0
		c149.3-75.7,299.1-150.4,448.4-225c8.1-3.8,16.2-7.6,28.7-13.5c0,22.2,1.1,41.1-0.5,60c-0.5,5.9-8.1,13.5-14.1,16.2
		c-157.4,79-314.8,157.9-472.7,235.8c-7,3.8-19.5,2.7-27-1.1C329.4,967.8,173.6,889.9,17.3,812C3.8,805.6-1.1,797.4,0,782.8
		C1.6,768.2,0.5,753.1,0.5,733.1z"/>
	<path d="M178.5,651.4C381.3,415.1,749.1,480,879.9,721.7c-20.6,10.3-40.6,21.6-62.2,29.2c-5.4,1.6-17.8-8.1-22.7-15.7
		c-56.8-83.8-133-141.2-229.9-168.7C421.9,525.9,293.7,556.8,178.5,651.4z"/>
	<path d="M263.4,749.9c143.3-176.3,397.5-140.6,495.9,33.5c-24.9,12.4-49.2,24.9-73.6,36.8C585.7,669.3,399.7,640.6,263.4,749.9z"/>
	<path d="M563.5,882.4c-64.9-75.7-106.5-87.1-192.5-53c67.6-97.9,199.6-92.5,268.8,14.1C614.4,856.4,589.5,868.8,563.5,882.4z"/>
</g>
</svg>
</a>
    </div>
  </div>
  <div class="new-issue-contents">
    <p class="new-issue-contents__label"> In this Issue: </p>
      <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>
</section>