Foreign Affairs Style Guide

Foreign Affairs

Homepage Module -- Sponsor Content


This object appears on the the homepage and is injected within article lists.

Redline Notes:
Images Styles:
<section class="sponsor-content">
<div class="container">
      <div class="l-1up">
          <div class="sponsor-content-block">

            <header class="sponsor-content-header">
            <p class="sponsor-content-label"> Sponsor Content </p>
            </header>

            <h2 class="sponsor-content__headline">Icons: History Told Through Human Achievement</h2>
            <p class="sponsor-content__deck">Since its founding in 1857, The Atlantic has profiled those men and women whose extraordinary talents and remarkable legacies inspire, entertain, and move us. To sift through the brand's archive is to witness more than 155 years of American history take shape in words and images. <span class="sponsor-content__truncated">Here, the clarion call of Martin Luther King, Jr.'s "Letter from Birmingham Jail," published in The Atlantic's July 1963 issue, proclaims that "injustice anywhere is a threat to justice everywhere." There, in an issue from 1966, the great film critic Pauline Kael sketches a searing portrait of Marlon Brando, the "angry young man" whose career was forged by a pop culture at once fascinated.</span></p>
            <a href="#" class="sponsor-content__action">See the Icons  <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>

              <div class="sponsor-content-sponsor">
                <p>Presented by </p>
                <img src="/fa_prototype/assets/images/sponsor-small.png" />
              </div>
          </div>

          <div class="sponsor-content-image" style="background-image: url('/fa_prototype/assets/images/sponsor-content.jpg');">
            <header class="element-invisible">
              <h4>Sponsor Content Related Image</h4>
            </header>
          </div>
        </div>

      </div>
</section>