Foreign Affairs Style Guide

Foreign Affairs

Homepage Module -- Featured Multimedia

This component appears on the homepage in between the story breaks. It has four variants, Map, Infographic, Image Gallery, and Video.

Redline Notes:
Images Styles:
<article class="featured-multimedia is-map">
    <div>
      <span class="label-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="0 275 1000 1000" enable-background="new 0 275 1000 1000" xml:space="preserve">
<path d="M236,955c-28-40-44-84-52-132L72,775l112-48c20-136,128-248,268-268l48-112l48,112c48,8,92,24,132,52l320-236L764,595
	c28,40,44,84,52,132l112,48l-112,48c-20,136-128,248-268,268l-48,112l-48-112c-52-4-96-24-132-52L0,1275L236,955z M180,763l-36,16
	l36,16c0-4,0-8,0-16S180,767,180,763z M820,791l36-16l-36-16c0,4,0,8,0,16C820,779,820,783,820,791z M500,419l-16,36c4,0,8,0,16,0
	s8,0,16,0L500,419z M500,1131l16-36c-4,0-8,0-16,0s-8,0-16,0L500,1131z M500,1063c156,0,284-128,284-284c0-56-16-108-44-152L572,851
	l0,0l-228,168C392,1047,444,1063,500,1063z M536,775c0-20-16-36-36-36s-36,16-36,36s16,36,36,36S536,795,536,775z M424,699L424,699
	l228-168c-44-28-96-44-152-44c-156,0-284,128-284,284c0,56,16,108,44,152L424,699z"/>
</svg>
</span>
      <h4 class="featured-multimedia__label">Featured Map</h4>
      <p class="featured-multimedia__sponsor"> Sponsored by <img class="featured-multimedia-sponsor-image" src="/fa_prototype/assets/images/sponsor-small.jpg" /></p>
    </div>
    <a href="#">
      <figure class="featured-multimedia__image image-width-auto">
        <img src="/fa_prototype/assets/images/featured-map.jpg" />
      </figure>
      <div class="featured-multimedia-title-block">
        <h2 class="featured-multimedia-title-block__title">South Sudan's Black Gold</h2>
        <p class="featured-multimedia-title-block__deck">Where Juba Gets Its Energy</p>
      </div>
    </a>
</article>