Foreign Affairs Style Guide

Foreign Affairs

Sponsored Landing Page Hero

This component creates the Sponsored Section Landing page, which is defined with the fields in the data sources section. The Sponsored Section Landing Page content type is used to create landing pages for Graduate School Forum, World Traveler, and World Country Section. Other than the main content, represented with the data sources, these pages also have other elements (Current Featured Schools, Graduate School Forum Members , Featured Countries, All Countries) and they will be defined in their respective content type templates (Graduate School Forum Article, World Section Article)

Redmine Prototyping Ticket(s)
Data Sources:
<!-- General sponsored content hero area -->
<header class="sponsored-landing-hero--nid123 sponsored-landing-hero--general">
  <div class="sponsored-landing-hero-gradient">
    <div class="container">
    <div class="sponsored-landing-hero__container">
      <div class="sponsored-landing-hero__titleblock-container">
        <div class="sponsored-landing-hero__titleblock">
          <p class="sponsor">Sponsor Content presented by</p>
          <img class="sponsor-image" src="/fa_prototype/assets/images/boeing-logo-white.png" />
          <h1 class="title">Sponsored Content Landing Page Section Title from Sponsor</h1>
          <h2 class="subtitle">Additional supporting copy about the sponsor and it's relation to <em>Foreign Affairs</em>.</h2>
          <a class="cta" href="#"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="31.1 741 937.8 610.1" enable-background="new 31.1 741 937.8 610.1" xml:space="preserve">
<g>
	<polygon points="500,1351.1 31.1,882.1 52.3,741 500,1188.7 947.7,741 968.9,882.1 	"/>
</g>
</svg>
</a>
        </div>
      </div>
    </div>
  </div>
</header>

<!-- Grad School Forums sponsored content hero area -->
<header class="sponsored-landing-hero--gsf">
  <div class="container">
    <main class="l-sponsored-left sponsored-gsf">
      <h1 class="title">Graduate School Forum</h1>
      <h2 class="subtitle">Crafting Your Career in International Affairs</h2>
      <p class="byline"><span>Introduction by Leigh Morris Sloane </span>
                    Association of Professional Schools
                    of International Affairs (APSIA)</p>
      <p class="text">"I have yet to meet a graduate student of international affairs who was not passionate about what he or she was studying. When I meet prospective students, they usually have a global issue or region of the world that gets them excited and compels them to deepen their knowledge and improve their skill set. They want to be leaders for change in the world. As professional programs of international leaders for change in the world. As professional programs of international</p>
      <a class="cta" href="#">Continue Reading...</a>
    </main>
    <aside class="l-sponsored-right gsf-new-issue">
      <div class="cover-container">
        <div class="cover image-width-auto">
          <img src="/fa_prototype/assets/images/gsf-cover.jpg"/>
        </div>
        <span class="cover__banner">New Issue</span>
        <span class="dropshadow"></span>
      </div>
      <div class="gsf-share">
        <a class="gsf-share-item" href="#"><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 159.1 1000 1333.2" enable-background="new 0 159.1 1000 1333.2" xml:space="preserve">
<path d="M946,537.9H640.7c-14.1,0-23.5,9.3-23.5,23.5s9.3,23.5,23.5,23.5h305.3v845.6H53.5V584.9h305.3c14.1,0,23.5-9.3,23.5-23.5
	c0-14.1-9.3-23.5-23.5-23.5H53.5c-28.1,0-47,18.8-47,47v845.6c0,28.1,18.8,47,47,47H946c28.1,0,47-18.8,47-47V584.9
	C993,556.7,974.2,537.9,946,537.9 M499.8,162.1c-14.1,0-23.5,9.3-23.5,23.5v742.2L330.7,782.1c-4.7-4.7-14.1-9.3-18.8-9.3
	c-14.1,0-23.5,9.3-23.5,23.5c0,4.7,4.7,14.1,4.7,18.8L481,1003.1c4.7,4.7,9.3,4.7,18.8,4.7c4.7,0,14.1-4.7,18.8-4.7l187.9-187.9
	c4.7-4.7,4.7-9.3,4.7-18.8c0-14.1-9.3-23.5-23.5-23.5c-4.7,0-14.1,4.7-18.8,4.7L523.3,927.7V185.7
	C523.3,171.5,513.9,162.1,499.8,162.1"/>
</svg>
 Download PDF</a>
        <div class="gsf-share-icons">
          <div class="horizontal-article-tools-wrapper">
            <div class="horizontal-article-tools-internal-wrapper">
              <a class="horizontal-article-tools-item">
                <div class="article-tools-item__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="41.6 316.6 916.7 916.7" enable-background="new 41.6 316.6 916.7 916.7" xml:space="preserve">
<title>Facebook</title>
<path d="M805.6,1233.3H194.4c-84,0-152.8-68.8-152.8-152.8V469.4c0-84,68.7-152.8,152.8-152.8h611.1c84,0,152.8,68.8,152.8,152.8
	v611.1C958.3,1164.6,889.6,1233.3,805.6,1233.3z M656.6,507.6C515.3,507.6,500,622.2,500,622.2v114.6h-76.4v114.6H500V1157h114.6
	V851.4h106.9l15.3-114.6H614.6v-76.4c0-38.2,38.2-38.2,38.2-38.2h76.4l15.3-99.3C710.1,507.6,656.6,507.6,656.6,507.6z"/>
</svg>
</div>
                <span class="article-tools-item__counter">30</span>
              </a>
              <a class="horizontal-article-tools-item">
                <div class="article-tools-item__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="49.1 417.8 883.5 714.4" enable-background="new 49.1 417.8 883.5 714.4" xml:space="preserve">
<title>Twitter</title>
<path d="M926.2,501.7c-31.1,15.5-65.2,24.8-102.5,27.9c37.3-21.7,65.2-59,77.6-99.4c-34.2,21.7-71.4,34.2-111.8,43.5
	c-34.2-34.2-80.7-55.9-130.4-55.9c-99.4,0-177,80.7-177,180.1c0,15.5,3.1,27.9,3.1,40.4c-149.1-6.2-279.5-77.6-366.5-186.3
	c-15.5,24.8-24.8,55.9-24.8,90.1c0,62.1,31.1,118,77.6,149.1c-31.1,0-52.8-9.3-83.8-21.7c0,0,0,0,0,3.1c0,87,62.1,161.5,146,177
	c-15.5,3.1-31.1,3.1-46.6,3.1c-12.4,0-21.7,0-34.2-3.1C174.6,921,243,973.8,320.6,973.8c-62.1,49.7-136.6,77.6-220.5,77.6
	c-15.5,0-27.9,0-43.5-3.1c77.6,52.8,173.9,83.9,273.3,83.9c329.2,0,506.2-273.3,506.2-512.4c0-6.2,0-15.5,0-21.7
	C873.4,570,901.3,539,926.2,501.7z"/>
</svg>
</div>
                <span class="article-tools-item__counter">15</span>
              </a>
              <a class="horizontal-article-tools-item">
                <div class="article-tools-item__icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 12"><defs></defs><path d="M16 8.5V.9l-3.3 3.76L16 8.5zM0 .75v8.73l3.79-4.41L0 .75zM15.46 0H.67l7.4 8.4L15.46 0z"/><path d="M12.03 5.42l-3.96 4.5-3.61-4.1L0 11.02V12h16v-1.96l-3.97-4.62z"/></svg></div>
                <span class="article-tools-item__counter">5</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </aside>
  </div>
</header>

<!-- Country Focus sponsored content hero area -->
<header class="sponsored-landing-hero">
  <div class="container">
    <main class="l-sponsored-left sponsored-titleblock">
      <h1 class="title">Country Focus</h1>
      <h2 class="subtitle">Crafting Your Career in International Affairs</h2>
      <p class="byline"><span>Introduction by Leigh Morris Sloane </span>
                    Association of Professional Schools
                    of International Affairs (APSIA)</p>
      <p class="text">"I have yet to meet a graduate student of international affairs who was not passionate about what he or she was studying. When I meet prospective students, they usually have a global issue or region of the world that gets them excited and compels them to deepen their knowledge and improve their skill set. They want to be leaders for change in the world. As professional programs of international leaders for change in the world. As professional programs of international</p>
      <a class="cta" href="#">Continue Reading...</a>
    </main>
    <aside class="l-sponsored-right">
    <h3 class="country-list__label">All Countries</h3>
      <div class="country-list">
        <a class="country-list__item multiple" href="javascript:;">Afganistan (2) <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="195 398.9 610 937.8" enable-background="new 195 398.9 610 937.8" xml:space="preserve">
<g>
	<polygon points="805,867.8 336,1336.7 195,1315.5 642.6,867.8 195,420.1 336,398.9 	"/>
</g>
</svg>
</a>
          <div class="country-list--item-sub">
            <a class="country-list__item sub-item" href="#">Title of this article about Afganistan</a>
            <a class="country-list__item sub-item" href="#">Another title of another article subitem</a>
          </div>
        <a class="country-list__item" href="#">Bolivia <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="195 398.9 610 937.8" enable-background="new 195 398.9 610 937.8" xml:space="preserve">
<g>
	<polygon points="805,867.8 336,1336.7 195,1315.5 642.6,867.8 195,420.1 336,398.9 	"/>
</g>
</svg>
</a>
        <a class="country-list__item" href="#">Chad <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="195 398.9 610 937.8" enable-background="new 195 398.9 610 937.8" xml:space="preserve">
<g>
	<polygon points="805,867.8 336,1336.7 195,1315.5 642.6,867.8 195,420.1 336,398.9 	"/>
</g>
</svg>
</a>
        <a class="country-list__item" href="#">Denmark <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="195 398.9 610 937.8" enable-background="new 195 398.9 610 937.8" xml:space="preserve">
<g>
	<polygon points="805,867.8 336,1336.7 195,1315.5 642.6,867.8 195,420.1 336,398.9 	"/>
</g>
</svg>
</a>
        <a class="country-list__item" href="#">Finland <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="195 398.9 610 937.8" enable-background="new 195 398.9 610 937.8" xml:space="preserve">
<g>
	<polygon points="805,867.8 336,1336.7 195,1315.5 642.6,867.8 195,420.1 336,398.9 	"/>
</g>
</svg>
</a>
        <a class="country-list__item" href="#">Germany <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="195 398.9 610 937.8" enable-background="new 195 398.9 610 937.8" xml:space="preserve">
<g>
	<polygon points="805,867.8 336,1336.7 195,1315.5 642.6,867.8 195,420.1 336,398.9 	"/>
</g>
</svg>
</a>
        <a class="country-list__item multiple" href="javascript:;">Greece (2) <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="195 398.9 610 937.8" enable-background="new 195 398.9 610 937.8" xml:space="preserve">
<g>
	<polygon points="805,867.8 336,1336.7 195,1315.5 642.6,867.8 195,420.1 336,398.9 	"/>
</g>
</svg>
</a>
          <div class="country-list--item-sub">
            <a class="country-list__item sub-item" href="#">Title of this article about Greece</a>
            <a class="country-list__item sub-item" href="#">Another title of another article subitem</a>
          </div>
        <a class="country-list__item" href="#">Honduras <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="195 398.9 610 937.8" enable-background="new 195 398.9 610 937.8" xml:space="preserve">
<g>
	<polygon points="805,867.8 336,1336.7 195,1315.5 642.6,867.8 195,420.1 336,398.9 	"/>
</g>
</svg>
</a>
        <a class="country-list__item" href="#">Indonesia <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="195 398.9 610 937.8" enable-background="new 195 398.9 610 937.8" xml:space="preserve">
<g>
	<polygon points="805,867.8 336,1336.7 195,1315.5 642.6,867.8 195,420.1 336,398.9 	"/>
</g>
</svg>
</a>
        <a class="country-list__item" href="#">Isreal <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="195 398.9 610 937.8" enable-background="new 195 398.9 610 937.8" xml:space="preserve">
<g>
	<polygon points="805,867.8 336,1336.7 195,1315.5 642.6,867.8 195,420.1 336,398.9 	"/>
</g>
</svg>
</a>
        <a class="country-list__item" href="#">Java <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="195 398.9 610 937.8" enable-background="new 195 398.9 610 937.8" xml:space="preserve">
<g>
	<polygon points="805,867.8 336,1336.7 195,1315.5 642.6,867.8 195,420.1 336,398.9 	"/>
</g>
</svg>
</a>
        <a class="country-list__item" href="#">Kenya <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="195 398.9 610 937.8" enable-background="new 195 398.9 610 937.8" xml:space="preserve">
<g>
	<polygon points="805,867.8 336,1336.7 195,1315.5 642.6,867.8 195,420.1 336,398.9 	"/>
</g>
</svg>
</a>
        <a class="country-list__item" href="#">Pakistan <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="195 398.9 610 937.8" enable-background="new 195 398.9 610 937.8" xml:space="preserve">
<g>
	<polygon points="805,867.8 336,1336.7 195,1315.5 642.6,867.8 195,420.1 336,398.9 	"/>
</g>
</svg>
</a>
      </div>
      <div class="country-list__overlay"></div>
    </aside>
  </div>
</header>