Foreign Affairs Style Guide

Foreign Affairs

Homepage Module -- Most Read Articles Expanded


This component currently appears on the homepage within a page break.

<section class="most-read-articles--expanded">
  <header>
    <h2 class="most-read-articles-title">Most-Read Articles</h2>
  </header>
  <section class="most-read-articles--expanded-body">
    <ul class="most-read-articles--expanded-list">
      <li class="most-read-articles--expanded-list-item">
        <a href="#" class="most-read-articles--expanded-link">
          <img src="/fa_prototype/assets/images/responsiveimg/story-teaser-640.jpg" class="most-read-articles--expanded-list-img">
          <date class="most-read-articles--expanded-date">June 30, 2017</date>
          <h3 class="most-read-articles--expanded-title">Sweden Steps up Deportation</h3>
          <h4 class="most-read-articles--expanded-subtitle">Asylum is hard to find</h4>
          <h5 class="most-read-articles--expanded-author">Amy M. Russo</h5>
        </a>
      </li>
      <li class="most-read-articles--expanded-list-item">
        <a href="#" class="most-read-articles--expanded-link">
          <img src="/fa_prototype/assets/images/thumb1.jpg" class="most-read-articles--expanded-list-img">
          <date class="most-read-articles--expanded-date">June 30, 2017</date>
          <h3 class="most-read-articles--expanded-title">Puntland's Problems</h3>
          <h4 class="most-read-articles--expanded-subtitle">It's Not Just Al Shabob That Threatens the Region's Stability</h4>
          <h5 class="most-read-articles--expanded-author">Vanda Felbab-Brown</h5>
        </a>
      </li>
      <li class="most-read-articles--expanded-list-item">
        <a href="#" class="most-read-articles--expanded-link">
          <img src="/fa_prototype/assets/images/thumb2.jpg" class="most-read-articles--expanded-list-img">
          <date class="most-read-articles--expanded-date">June 30, 2017</date>
          <h3 class="most-read-articles--expanded-title">Trump and the Environment</h3>
          <h4 class="most-read-articles--expanded-subtitle">What His Plans Would Do</h4>
          <h5 class="most-read-articles--expanded-author">Fred Krupp</h5>
        </a>
      </li>
      <li class="most-read-articles--expanded-list-item">
        <a href="#" class="most-read-articles--expanded-link">
          <img src="/fa_prototype/assets/images/thumb3.jpg" class="most-read-articles--expanded-list-img">
          <date class="most-read-articles--expanded-date">June 30, 2017</date>
          <h3 class="most-read-articles--expanded-title">China's Coal Problem</h3>
          <h4 class="most-read-articles--expanded-subtitle">How it Undermines the Fight Against Climate Change</h4>
          <h5 class="most-read-articles--expanded-author">Amy M. Russo</h5>
        </a>
      </li>
      <li class="most-read-articles--expanded-list-item">
        <a href="#" class="most-read-articles--expanded-link">
          <img src="/fa_prototype/assets/images/thumb4.jpg" class="most-read-articles--expanded-list-img">
          <date class="most-read-articles--expanded-date">June 30, 2017</date>
          <h3 class="most-read-articles--expanded-title">The Case Against Immigration</h3>
          <h4 class="most-read-articles--expanded-subtitle">Why the United States Should Look Out for Itself</h4>
          <h5 class="most-read-articles--expanded-author">Steven Camarota</h5>
        </a>
      </li>
    </ul>
  </section>
</section>