Foreign Affairs Style Guide

Foreign Affairs

Homepage Module -- Most Read Articles


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

Redline Notes:
Images Styles:
<div class="background-gradient">
<section class="most-read-articles">

  <header>
    <div class="most-read-articles-icon">
      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="18.5 586 1000 1000" enable-background="new 18.5 586 1000 1000" xml:space="preserve">
<g>
	<g>
		<path d="M517,633.1c248.7,0,450.4,201.8,450.4,450.4S765.7,1533.9,517,1533.9S66.6,1332.2,66.6,1083.5S268.3,633.1,517,633.1
			 M517,597c-270.3,0-486.5,216.2-486.5,486.5S246.7,1570,517,1570s486.5-216.2,486.5-486.5S787.3,597,517,597L517,597z"/>
	</g>
	<path d="M517,827.7l64.9,191l201.8,3.6l-162.2,122.5l57.7,194.6L513.4,1224l-165.8,115.3l57.7-194.6l-162.2-122.5l201.8-3.6
		L517,827.7z"/>
</g>
</svg>

    </div>
   <h2 class="most-read-articles-title">Most-Read Articles</h2>
  </header>

   <article class="most-read-article-list-item image--1">
   <div>
     <div class="most-read-article-list-item__stripe">
       <p class="most-read-article-list-item__topic">  <a href="#">Russian Invasion</a></p>
      </div>
      <div class="most-read-article-list-item__stripe--bottom">
       <h3 class="most-read-article-list-item__title"><a href="">What Really Happened in Bangladesh</a></h3>
      </div>
    </div>
    </article>

   <article class="most-read-article-list-item image--2">
    <div>
     <div class="most-read-article-list-item__stripe">
       <p class="most-read-article-list-item__topic"><a href="">India Votes</a></p>
      </div>
      <div class="most-read-article-list-item__stripe--bottom">
       <h3 class="most-read-article-list-item__title"><a href="">Nagorno-Karabakh After Crimea</a></h3>
      </div>
     </div>
    </article>

   <article class="most-read-article-list-item image--3">
    <div>
     <div class="most-read-article-list-item__stripe">
       <p class="most-read-article-list-item__topic"><a href="">Erdogan in Trouble </a></p>
      </div>
      <div class="most-read-article-list-item__stripe--bottom">
       <h3 class="most-read-article-list-item__title"><a href="">Why Chinese-Japanese Economic Relations Are Improving</a></h3>
      </div>
      </div>
    </article>

</section>
</div>