Foreign Affairs Style Guide

Foreign Affairs

Homepage Module -- One Column Multimedia

This component appears on the homepage as one column aligned left or center. It has five variants Audio, Map, Infographic, Image Gallery and Video.

Redline Notes:
Images Styles:





      <article class="featured-multimedia one-column-home is-video">
  <div class="clearfix">
    <span class="label-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="7 831 1000 1000"><path d="M506 852c-265.1 0-480 214.9-480 480s214.9 480 480 480 480-214.9 480-480-214.9-480-480-480zm0 925.4c-245.8 0-445.4-199.7-445.4-445.4S260.2 886.6 506 886.6s445.4 199.7 445.4 445.4-199.6 445.4-445.4 445.4zm-84.4-257.3L675 1335.8l-253.4-184.2v368.5z"/></svg></span>
    <h1 class="featured-multimedia__label">Featured Video</h1>
    <p class="featured-multimedia__sponsor"> Sponsored by <img class="featured-multimedia-sponsor-image" src="/fa_prototype/assets/images/sponsor-small.jpg" /></p>
  </div>
  <figure class="featured-multimedia__image video-wrapper">
    <iframe width="245" height="360" src="//www.youtube.com/embed/LKjyOBK0Ft0?feature=player_embedded&showinfo=0&autohide=1" frameborder="0" allowfullscreen></iframe>
  </figure>
  <a href="#">
    <div class="featured-multimedia-title-block">
      <h1 class="featured-multimedia-title-block__title">Foreign Affairs Focus: Muhtar Kent on Immigration Reform</h1>
      <p class="featured-multimedia-title-block__deck">Where Juba Gets Its Energy</p>
      <span class="featured-multimedia-title-block__video-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="7 831 1000 1000"><path d="M506 852c-265.1 0-480 214.9-480 480s214.9 480 480 480 480-214.9 480-480-214.9-480-480-480zm0 925.4c-245.8 0-445.4-199.7-445.4-445.4S260.2 886.6 506 886.6s445.4 199.7 445.4 445.4-199.6 445.4-445.4 445.4zm-84.4-257.3L675 1335.8l-253.4-184.2v368.5z"/></svg></span>
    </div>
  </a>
</article>

      <article class="featured-multimedia one-column-home is-gallery">
  <div class="clearfix">
    <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="25.1 395.6 953.3 720.8" enable-background="new 25.1 395.6 953.3 720.8" xml:space="preserve">
<path d="M500.1,634.8c-75.3,0-134.3,62.2-134.3,137.6S428,910,500.1,910c75.3,0,134.3-62.2,134.3-137.6S575.4,634.8,500.1,634.8z
	 M500.1,877.2c-55.7,0-101.6-45.9-101.6-101.6c0-55.7,45.9-101.6,101.6-101.6s101.5,46,101.5,101.7S555.8,877.2,500.1,877.2z
	 M906.3,497.2H772c-68.8,0-101.6-101.6-170.3-101.6s-101.6,0-101.6,0s-32.8,0-101.6,0S297,497.2,228.2,497.2H93.9
	c-39.3,0-68.8,32.8-68.8,68.8v481.6c0,39.3,29.5,68.8,68.8,68.8h815.7c36,0,68.8-29.5,68.8-68.8V566
	C975.1,530,945.6,497.2,906.3,497.2z M942.3,1047.6c0,19.7-16.4,32.8-32.8,32.8H93.9c-19.7,0-32.8-16.4-32.8-32.8V566
	c0-19.7,16.4-32.8,32.8-32.8h127.8h9.8c81.9,0,114.7-104.8,167.1-104.8s101.6,0,101.6,0s52.4,0,104.8,0S693.4,530,778.6,530h9.8
	h117.9c19.7,0,32.8,16.4,32.8,32.8v484.8H942.3z M500.1,566C388.7,566,297,657.8,297,772.4s91.7,206.4,203.1,206.4
	s203.1-91.7,203.1-206.4C703.2,661,611.5,566,500.1,566z M500.1,946c-95,0-170.3-75.3-170.3-170.3s75.3-170.3,170.3-170.3
	s170.3,75.3,170.3,170.3C670.4,867.4,595.1,946,500.1,946z M772,585.7c-19.7,0-32.8,16.4-32.8,32.8c0,19.7,16.4,32.8,32.8,32.8
	c19.7,0,32.8-16.4,32.8-32.8C804.7,598.8,791.6,585.7,772,585.7z"/>
</svg>
</span>
    <h1 class="featured-multimedia__label">Featured Gallery</h1>
    <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="#">
    <div class="featured-multimedia__image" style="background-image:url('/fa_prototype/assets/images/16x9_comp3.jpg');">
      <span class="featured-multimedia__icon"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="512px" height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<g>
	<path d="M480,96h-32V32c0-17.664-14.344-32-32-32H32C14.336,0,0,14.336,0,32v352c0,17.656,14.336,32,32,32h32v64
		c0,17.656,14.336,32,32,32h384c17.656,0,32-14.344,32-32V128C512,110.336,497.656,96,480,96z M32,384V32h384v352H32z M480,480H96
		v-64h32v32h32h256h32v-32v-32v-96V128h32V480z M236.641,131.008c0,24.586,19.93,44.516,44.516,44.516
		c24.578,0,44.5-19.93,44.5-44.516l0,0c0-24.586-19.922-44.516-44.5-44.516C256.57,86.492,236.641,106.422,236.641,131.008
		L236.641,131.008z M160,160l-96,64v64v32v32h32h256h32v-32v-32v-96l-128,64L160,160z"/>
</g>
</svg>
</span>
    </div>
    <div class="featured-multimedia-title-block">
      <h1 class="featured-multimedia-title-block__title">South Sudan's Black Gold</h1>
      <p class="featured-multimedia-title-block__deck">Where Juba Gets Its Energy</p>
    </div>
  </a>
</article>

      <article class="featured-multimedia one-column-home is-audio">
  <div class="clearfix">
    <span class="label-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="7 831 1000 1000"><path d="M506 852c-265.1 0-480 214.9-480 480s214.9 480 480 480 480-214.9 480-480-214.9-480-480-480zm0 925.4c-245.8 0-445.4-199.7-445.4-445.4S260.2 886.6 506 886.6s445.4 199.7 445.4 445.4-199.6 445.4-445.4 445.4zm-84.4-257.3L675 1335.8l-253.4-184.2v368.5z"/></svg></span>
    <h1 class="featured-multimedia__label">Featured Audio</h1>
    <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="#">
    <div class="featured-multimedia__image" style="background-image:url('/fa_prototype/assets/images/featured-map.jpg');">
      <span class="featured-multimedia__icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="7 831 1000 1000"><path d="M506 852c-265.1 0-480 214.9-480 480s214.9 480 480 480 480-214.9 480-480-214.9-480-480-480zm0 925.4c-245.8 0-445.4-199.7-445.4-445.4S260.2 886.6 506 886.6s445.4 199.7 445.4 445.4-199.6 445.4-445.4 445.4zm-84.4-257.3L675 1335.8l-253.4-184.2v368.5z"/></svg></span>
    </div>
    <div class="featured-multimedia-title-block">
      <h1 class="featured-multimedia-title-block__title">South Sudan's Black Gold</h1>
      <p class="featured-multimedia-title-block__deck">Where Juba Gets Its Energy</p>
    </div>
  </a>
</article>

      <article class="featured-multimedia one-column-home is-map">
  <div class="clearfix">
    <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>
    <h1 class="featured-multimedia__label">Featured Map</h1>
    <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="#">
    <div class="featured-multimedia__image" style="background-image:url('/fa_prototype/assets/images/featured-map.jpg');">
      <span class="featured-multimedia__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="63.6 300.9 872.8 829.1" enable-background="new 63.6 300.9 872.8 829.1" xml:space="preserve">
   <title>Search</title>
<path d="M936.4,1082.1L687.8,855.3c48-61.1,74.2-139.6,69.8-222.5c-8.7-191.9-170.1-340.3-362.1-331.5C203.6,310,55.2,467,64,659
	c8.7,187.5,170.1,335.9,362,327.1c82.9-4.4,157-34.9,213.7-82.9L888.3,1130L936.4,1082.1z M421.7,920.7
	c-157,4.4-287.9-113.4-292.3-266.1c-8.7-152.7,113.4-283.5,270.5-287.9c157-4.4,287.9,113.4,292.3,266.1
	C700.8,785.5,578.7,916.3,421.7,920.7z"/>
</svg>
</span>
    </div>
    <div class="featured-multimedia-title-block">
      <h1 class="featured-multimedia-title-block__title">South Sudan's Black Gold</h1>
      <p class="featured-multimedia-title-block__deck">Where Juba Gets Its Energy</p>
    </div>
  </a>
</article>

      <article class="featured-multimedia one-column-home is-infographic">
  <div class="clearfix">
    <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="6 280.7 987.2 976.3" enable-background="new 6 280.7 987.2 976.3" xml:space="preserve">
<g>
	<g>
		<path d="M494.3,803l-19-26.5V280.7C214.2,292.1,6,507.8,6,768.9C6,1037.5,225.5,1257,498,1257c102.2,0,189.2-26.5,272.5-79.5
			l-280-382.1L494.3,803z M974.9,640.3l-439,140l75.7,102.2l196.8,268.7C963.6,1026.3,1028,829.5,974.9,640.3z M959.8,598.6
			c-68.1-189.2-238.4-310.3-439-317.9v457.9l306.6-98.4L959.8,598.6z"/>
	</g>
</g>
</svg>
</span>
    <h1 class="featured-multimedia__label">Featured Infographic</h1>
    <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="#">
    <div class="featured-multimedia__image" style="background-image:url('/fa_prototype/assets/images/infographic.jpg');">
      <span class="featured-multimedia__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="63.6 300.9 872.8 829.1" enable-background="new 63.6 300.9 872.8 829.1" xml:space="preserve">
   <title>Search</title>
<path d="M936.4,1082.1L687.8,855.3c48-61.1,74.2-139.6,69.8-222.5c-8.7-191.9-170.1-340.3-362.1-331.5C203.6,310,55.2,467,64,659
	c8.7,187.5,170.1,335.9,362,327.1c82.9-4.4,157-34.9,213.7-82.9L888.3,1130L936.4,1082.1z M421.7,920.7
	c-157,4.4-287.9-113.4-292.3-266.1c-8.7-152.7,113.4-283.5,270.5-287.9c157-4.4,287.9,113.4,292.3,266.1
	C700.8,785.5,578.7,916.3,421.7,920.7z"/>
</svg>
</span>
    </div>
    <div class="featured-multimedia-title-block">
      <h1 class="featured-multimedia-title-block__title">A relatively longer title. This gives an example of how a longer headline might look.</h1>
      <p class="featured-multimedia-title-block__deck">This is the deck for the infographic. It is optional and doesn't display at mobile.</p>
    </div>
  </a>
</article>