Foreign Affairs Style Guide

Foreign Affairs

Homepage Module -- Featured Lead Story

This component is a variant of the lead story component, and appears in the hero area. The main differences between the basic lead story and the featured lead story occur at mobile viewport sizes. There are 9 layout variants for the title box—top-left (default), top-center, top-right, center-left, center-center, center-right, bottom-left, bottom-center, and bottom-right.

Redline Notes:
Images Styles:
<div class="lead-story--featured-container">
  <article class="lead-story--featured">
    <div class="container">
      <div class="l-lead-story-1up--featured">
        <header class="lead-story-block--featured--left">
          <div class="lead-story-bar">
            <div class="metadata--lead-story--featured">
              <p><a href="#">Terrorism in Africa </a><time datetime="2014-05-07" class="metadata--lead-story__date">May 7, 2014</time></p>
             </div>
          </div>
          <a href="#">
           <div class="lead-story-bar--featured--margin">
              <h2 class="lead-story__headline--featured">Ukraine's Last Best Hope</h2>
              <h3 class="lead-story__deck--featured">How Political Reform Can Defend Against Russian Intervention</h3>
            </div>
          </a>
          <div class="lead-story-bar--featured">
            <h4 class="lead-story__author--featured"><a href="#" rel='author'>Bruce Bueno de Mesquita</a></h4>
          </div>
        </header>
        <span class="featured-lead-story__photo-credit">Jonathan Doe / Reuters</span>
      </div>
    </div>
  </article>
</div>

<div class="lead-story--featured-container">
  <article class="lead-story--featured">
    <div class="container">
      <div class="l-lead-story-1up--featured">
        <header class="lead-story-block--featured--right">
          <div class="lead-story-bar">
            <div class="metadata--lead-story--featured">
              <p><a href="#">Terrorism in Africa </a><time datetime="2014-05-07" class="metadata--lead-story__date">May 7, 2014</time></p>
             </div>
          </div>
          <a href="#">
           <div class="lead-story-bar--featured--margin">
              <h2 class="lead-story__headline--featured">Ukraine's Last Best Hope</h2>
              <h3 class="lead-story__deck--featured">How Political Reform Can Defend Against Russian Intervention</h3>
            </div>
          </a>
          <div class="lead-story-bar--featured">
            <h4 class="lead-story__author--featured"><a href="#" rel='author'>Bruce Bueno de Mesquita</a></h4>
          </div>
        </header>
        <span class="featured-lead-story__photo-credit">Jonathan Doe / Reuters</span>
      </div>
    </div>
  </article>
</div>

<div class="lead-story--featured-container">
  
    <article class="lead-story--featured" data-src-low="../assets/images/responsiveimg/story-teaser-640.jpg|../assets/images/responsiveimg/story-teaser-1000.jpg" data-src-medium="../assets/images/responsiveimg/story-teaser-1000.jpg|../assets/images/responsiveimg/story-teaser-orig.jpg" data-src="../assets/images/responsiveimg/story-teaser-orig.jpg">
  
    <div class="container">
      <div class="l-lead-story-1up--featured">
        
        <header class="lead-story-block--featured--center">
          <a class="lead-story__headline--node_path" href="#">
            <div class="lead-story-bar">
              <div class="metadata--lead-story--featured">
              </div>
            </div>
            <div class="lead-story-bar--featured--margin">
               <h2 class="lead-story__headline--featured">Germany and the Armenian Genocide</h2>
               <h3 class="lead-story__deck--featured">How Political Reform Can Defend Against Russian Intervention</h3>
            </div>
            <div class="lead-story-bar--featured">
              <h4 class="lead-story__author--featured">Bruce Bueno de Mesquita</h4>
            </div>
          </a>
          <div class="lead-story__headline--section">
            <a href="/regions/syria">Syria</a>
          </div>
          <div class="metadata--lead-story__date">
            <time datetime="2016-02-08" title="Feb 8, 2016">May 7, 2014</time>
          </div>
          <div class="lead-story__save mobile-only">
            <a class="save-article" href="#"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 18"><defs></defs><polygon points="0 0 0 18 6.03 13.96 12 18 12 0 0 0"/></svg></a>
          </div>
        </header>
        
          <span class="featured-lead-story__photo-credit">Jonathan Doe / Reuters</span>
        
      </div>
    </div>
  </article>
</div>