Foreign Affairs Style Guide

Foreign Affairs

Article Card


This is a component that is used in many areas, like the Magazine/Issue page, homepage and potentially future use in browse pages.

Data Sources:
Images Styles:
Known Omissions:
<article class="magazine-list-article d-inline-block position-relative ">
  <a class="magazine-list-item--image-link row" href="">
    <div class="col-4 col-md-12">
      
        <img class="magazine-list-item--image b-lazy" data-src-low="/fa_prototype/assets/images/anthology-list-item__image--sq.jpg" data-src="/fa_prototype/assets/images/anthology-list-item__image.jpg" alt="Article image" />
      
    </div>
    <div class="col-8 col-md-12">
      
      
      
        <h3 class="magazine-title font-weight-bold ls-0 mb-0">The Clinton Legacy</h3>
      

      
        <p class="magazine-deck ls-0 mb-0 f-serif">How Will History Judge the Soft Power Secretary of State</p>
      

      
        <p class="magazine-author font-italic ls-0 mb-0 f-serif">Author Name</p>
      
    </div>
  </a>
  <div class="row magazine-item-actions">
    <div class="col-4 col-md-12 magazine-article-info primary-featured">
      
        <a href="#" aria-hidden="true" class="text-decoration-none"><span class="audio-article"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="66.4 323.2 903.6 903.6" enable-background="new 66.4 323.2 903.6 903.6" xml:space="preserve">
<g>
	<g>
		<path d="M15798,37206.2v62.5h250v-62.5H15798z M15798,37393.8h250v-62.5h-250V37393.8z M15798,37518.8h250v-62.5h-250V37518.8z
			 M15798,37643.8h250v-62.5h-250V37643.8z M15798,37768.8h250v-62.5h-250V37768.8z M15110.5,37268.8h625v-62.5h-625V37268.8z
			 M15110.5,37393.8h625v-62.5h-625V37393.8z M15110.5,37518.8h625v-62.5h-625V37518.8z M15110.5,37643.8h625v-62.5h-625V37643.8z
			 M15110.5,37768.8h625v-62.5h-625V37768.8z M15798,37893.8h250v-62.5h-250V37893.8z M15798,38018.8h250v-62.5h-250V38018.8z
			 M15110.5,37893.8h625v-62.5h-625V37893.8z M15110.5,38018.8h625v-62.5h-625V38018.8z M15798,38143.8h250v-62.5h-250V38143.8z
			 M15110.5,38143.8h625v-62.5h-625V38143.8z"/>
	</g>
</g>
<path d="M783.6,464.4L783.6,464.4H778c-11.3,0-16.9,5.6-16.9,16.9s5.6,11.3,5.6,11.3C868.3,549.1,936.1,656.4,936.1,775l0,0
	c0,124.3-67.8,231.6-169.4,282.4c0,0-5.6,5.6-5.6,11.3c0,11.3,5.6,16.9,16.9,16.9h5.6l0,0c113-62.1,186.4-175,186.4-310.6l0,0
	C970,639.4,896.6,526.5,783.6,464.4z M501.2,323.2c-11.3,0-22.6,5.6-28.2,11.3l0,0L213.2,549.1h-84.7c-33.9,0-62.1,28.2-62.1,62.1
	v321.9c0,39.5,28.2,67.8,62.1,67.8h79.1l259.8,214.6l0,0c11.3,5.6,22.6,11.3,33.9,11.3c28.2,0,50.8-22.6,50.8-50.8V374
	C552.1,345.8,529.5,323.2,501.2,323.2z M196.2,967h-67.8c-16.9,0-33.9-16.9-33.9-33.9V611.2c0-16.9,16.9-33.9,33.9-33.9h62.1V967
	H196.2z M518.2,419.2v717.3v45.2c0,11.3-5.6,16.9-16.9,16.9c-5.6,0-5.6,0-11.3-5.6l0,0l0,0l0,0L224.5,978.3V583L490,368.4l0,0l0,0
	l0,0c0,0,5.6-5.6,11.3-5.6c11.3-5.6,16.9,0,16.9,11.3V419.2z M710.2,775c0-50.8-45.2-96-96-96c-11.3,0-16.9,5.6-16.9,16.9
	s5.6,16.9,16.9,16.9c33.9,0,62.1,28.2,62.1,62.1l0,0c0,33.9-28.2,62.1-62.1,62.1c-11.3,0-16.9,5.6-16.9,16.9
	c0,11.3,5.6,16.9,16.9,16.9C670.7,871,710.2,825.8,710.2,775L710.2,775z M840.1,775L840.1,775c0-90.4-56.5-169.4-129.9-203.3l0,0
	c0,0-5.6-5.6-11.3-5.6c-11.3,0-16.9,5.6-16.9,16.9c0,5.6,5.6,11.3,11.3,16.9l0,0c67.8,28.2,118.6,96,118.6,175.1l0,0
	c0,79.1-50.8,146.8-118.6,175.1l0,0c-5.6,0-11.3,5.6-11.3,16.9c0,11.3,5.6,16.9,16.9,16.9c5.6,0,5.6,0,11.3-5.6l0,0
	C789.3,944.4,840.1,865.4,840.1,775z"/>
</svg>
</span></a><span class="element-invisible">Audio available for this article</span>
      
      
      
    </div>
  </div>
</article>