Foreign Affairs Style Guide

Foreign Affairs

Sitewide -- Footer


Description of Footer to come.

<footer class="site-footer">
  <section class="blue-bg">
    <div class="container-bs">
      <div class="row">
        <div class="col-12 col-md-6 p-3 light-grey-bg text-center p-2">
          <div class="d-flex align-items-center justify-content-center flex-wrap flex-md-nowrap">
            <div class="mb-2 mb-md-0 mr-md-2">
							<img src="/fa_prototype/assets/images/subscription-cover.png" alt="">
						</div>
            <div>
              <p class="small-upper-text text-red mb-0">Get the Magazine</p>
              <h1 class="f-serif mb-0">Save up to 55%</h1>
              <p class="f-serif font-italic small-text">
                on Foreign Affairs magazine!
              </p>

              <a class="button-outlined button-red" href="#">subscribe</a>
            </div>
          </div>
        </div>
        <div class="col-12 col-md-6 text-white text-center py-4 d-flex flex-column justify-content-center align-content-center">
					<p class="small-upper-text text-white mb-0">Foreign Affairs</p>
					<h4 class="f-serif mb-0 footer-newsletter-head ls-0">Weekly Newsletter</h4>
					<p class="f-serif font-italic small-text">
						Get in-depth analysis delivered right to your inbox
					</p>

					<div class="d-flex footer-signup-container px-lg-5 flex-wrap flex-lg-nowrap">
						<input
							placeholder="Enter your email"
							type="text"
							class="required mr-lg-2 footer-email-input"
							id="edit-email"
							name="email"
							value=""
							size="60"
							maxlength="128"
						/>
						<input
							type="submit"
							class="button-outlined button-white mt-2 mt-lg-0"
							id="edit-submit--2"
							name="op"
							value="sign up"
						/>
					</div>

        </div>
      </div>
    </div>
  </section>

	<section class="near-black-bg">
		<div class="container-bs">
			<div class="row py-3 py-md-5">
				<div class="col-12 col-lg-8">
					<div class="row">
						<div class="col-12 col-sm-3">
							<nav class="site-footer-section-menu" role="menu">
								<h2 class="site-footer-section-menu__title">
									<a href="#" role="menuitem">About <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>
								</h2>
								<a class="site-footer-section-menu__item" href="#" role="menuitem">About Us</a>
								<a class="site-footer-section-menu__item" href="#" role="menuitem">History</a>
								<a class="site-footer-section-menu__item" href="#" role="menuitem">Staff</a>
								<a class="site-footer-section-menu__item" href="#" role="menuitem">Europe</a>
								<a class="site-footer-section-menu__item" href="#" role="menuitem">Careers</a>
								<a class="site-footer-section-menu__item" href="#" role="menuitem">Events</a>
							</nav>
						</div>
						<div class="col-12 col-sm-3 border-md-left">
							<nav class="site-footer-section-menu" role="menu">
								<h2 class="site-footer-section-menu__title">
									<a href="#" role="menuitem">Contact <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>
								</h2>
								<a class="site-footer-section-menu__item" href="#" role="menuitem">Customer Service</a>
								<a class="site-footer-section-menu__item" href="#" role="menuitem">Contact Us</a>
								<a class="site-footer-section-menu__item" href="#" role="menuitem">Submissions</a>
								<a class="site-footer-section-menu__item" href="#" role="menuitem">Permissions</a>
								<a class="site-footer-section-menu__item" href="#" role="menuitem">Advertise</a>
								<a class="site-footer-section-menu__item" href="#" role="menuitem">Press Center</a>
								<a class="site-footer-section-menu__item" href="#" role="menuitem">Leave Us Feedback</a>
							</nav>
						</div>
						<div class="col-12 col-sm-3 border-md-left">
							<nav class="site-footer-section-menu" role="menu">
								<h2 class="site-footer-section-menu__title">
									<a href="#">Subscription <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>
								</h2>
								<a class="site-footer-section-menu__item" href="#" role="menuitem">Subscriptions</a>
								<a class="site-footer-section-menu__item" href="#" role="menuitem">Group Subscriptions</a>
								<a class="site-footer-section-menu__item" href="#" role="menuitem">My Account</a>
								<a class="site-footer-section-menu__item" href="#" role="menuitem">Give a Gift</a>
								<a class="site-footer-section-menu__item" href="#" role="menuitem">Donate</a>
								<a class="site-footer-section-menu__item" href="#" role="menuitem">Newsletter</a>
								<a class="site-footer-section-menu__item" href="#" role="menuitem">Download iOS App</a>
							</nav>
						</div>
						<div class="col-12 col-sm-3 border-md-left">
							<nav class="site-footer-section-menu" role="menu">
								<h2 class="site-footer-section-menu__title">
									<a href="#" role="menuitem">Follow <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>
								</h2>
								<nav class="d-flex flex-wrap">
									<a class="site-footer-social-menu__item" href="#" role="menuitem"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 356.66 765.45"><defs><mask id="a" x="0" y="0" width="356.66" height="765.45" maskUnits="userSpaceOnUse"><path d="M4.6 0h356.66v765.45H4.6z" fill="#fff" fill-rule="evenodd" transform="translate(-4.6)"/></mask></defs><g mask="url(#a)"><path d="M356.66 250.82l-13.88 131.93H237.31v382.7H78.96v-382.7H0V250.82h79v-79.43C78.96 64.07 123.51 0 250.4 0h105.33v131.93h-65.92c-49.22 0-52.5 18.6-52.5 52.92v66z"/></g></svg><span class="element-invisible">ForeignAffairs.com on Facebook</span></a>
									<a class="site-footer-social-menu__item" href="#" role="menuitem"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 20"><path d="M19.6 6.1v.6c0 5.7-4.4 12.3-12.3 12.3-2.5 0-4.7-.7-6.6-1.9.3 0 .7.1 1 .1 2 0 3.9-.7 5.4-1.8-1.9 0-3.5-1.3-4-3 .3 0 .5.1.8.1.4 0 .8-.1 1.1-.1-2-.6-3.5-2.4-3.5-4.5v-.1c.6.3 1.2.5 2 .5-1.2-.6-2-2-2-3.5 0-.8.2-1.5.6-2.2C4.2 5.3 7.4 7 11 7.2c-.1-.3-.1-.7-.1-1 0-2.4 1.9-4.3 4.3-4.3 1.2 0 2.4.5 3.2 1.4 1-.2 1.9-.5 2.7-1-.3 1-1 1.8-1.9 2.4.9-.1 1.7-.3 2.5-.7-.5.8-1.3 1.5-2.1 2.1z" /></svg><span class="element-invisible">ForeignAffairs.com on Twitter</span></a>
									<a class="site-footer-social-menu__item" href="https://www.instagram.com/foreignaffairsmag/" role="menuitem"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22"><path d="M14.6 20.6H7.5c-3.3 0-6-2.7-6-6V7.5c0-3.3 2.7-6 6-6h7.1c3.3 0 6 2.7 6 6v7.1c0 3.3-2.7 6-6 6z" /><circle cx="11" cy="11.6" r="4"/><circle cx="17" cy="5.6" r="1.2"/></svg><span class="element-invisible">ForeignAffairs.com on Instagram</span></a>
									<a class="site-footer-social-menu__item" href="#" role="menuitem"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22"><path d="M3.5 6C2 6 1 5 1 3.7c0-1.3 1-2.3 2.5-2.3S6 2.4 6 3.7C6 5 5 6 3.5 6zm2.2 15.1H1.3V7.8h4.4v13.3zm15.9 0h-4.4V14c0-1.8-.6-3-2.2-3-1.2 0-1.9.8-2.3 1.6-.1.3-.1.7-.1 1.1v7.4H8.1c.1-12 0-13.3 0-13.3h4.4v1.9c.6-.9 1.6-2.2 4-2.2 2.9 0 5.1 1.9 5.1 6v7.6z"/></svg><span class="element-invisible">ForeignAffairs.com on LinkedIn</span></a>
									<a class="site-footer-social-menu__item" href="#" role="menuitem"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 19"><path d="M24.6 15.2c-.3 1.3-1.3 2.3-2.6 2.4-3 .4-6 .4-9 .4s-6 0-9-.3c-1.3-.1-2.3-1.1-2.6-2.4-.4-1.9-.4-4-.4-5.9s0-4 .4-5.8C1.7 2.3 2.8 1.3 4 1.2c3-.3 6-.3 9-.3s6 0 9 .3c1.3.1 2.3 1.1 2.6 2.4.4 1.9.4 3.9.4 5.8s0 4-.4 5.8zm-6.9-6.5l-6.9-4.3c-.3-.2-.6-.2-.9 0-.2.1-.3.4-.3.7v8.6c0 .3.2.6.4.8.1.1.3.1.4.1.2 0 .3 0 .5-.1l6.9-4.3c.3-.1.4-.4.4-.7s-.2-.7-.5-.8z" /></svg><span class="element-invisible">ForeignAffairs.com on YouTube</span></a>
									<a class="site-footer-social-menu__item" href="#" role="menuitem"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 23"><path d="M11.6 13.2c0 .9-.8 1.7-1.7 1.7-.9 0-1.7-.8-1.7-1.7 0-.9.8-1.7 1.7-1.7.9 0 1.7.8 1.7 1.7zm0 0"/><path d="M26.2 11.9c0-2.1-1.7-3.8-3.7-3.8-.7 0-1.4.2-1.9.6-1.7-1-4-1.6-6.4-1.7l1.4-4 2.9.7V4c0 1.6 1.3 2.9 2.9 2.9 1.6 0 2.9-1.3 2.9-2.9 0-1.6-1.3-2.9-2.9-2.9-1 0-1.9.6-2.4 1.4l-4.1-1L13 7c-2.5 0-4.7.7-6.4 1.7l.1-.1c-.6-.3-1.3-.6-2-.6C2.7 8 1 9.8 1 11.9c0 1.4.7 2.6 1.8 3.3.5 3.9 5.1 7 10.8 7 5.7 0 10.4-3.1 10.8-7.1 1.2-.7 1.8-1.9 1.8-3.2zm-4.8-9.6c.8 0 1.6.7 1.6 1.6 0 .9-.7 1.6-1.6 1.6-.9 0-1.6-.7-1.6-1.6 0-.9.7-1.6 1.6-1.6zm-16.7 7c.3 0 .6.1.8.2-1.4 1.1-2.3 2.5-2.6 4.1-.4-.5-.6-1-.6-1.7 0-1.4 1.1-2.6 2.4-2.6zm9 11.6c-5.3 0-9.6-2.9-9.6-6.4 0-3.5 4.3-6.4 9.6-6.4s9.6 2.9 9.6 6.4c0 3.5-4.3 6.4-9.6 6.4zm10.7-7.5c-.3-1.5-1.2-2.9-2.6-4 .2-.1.5-.1.7-.1 1.3 0 2.4 1.1 2.4 2.5.1.6-.1 1.2-.5 1.6zm0 0"/><path d="M18.9 13.2c0 .9-.8 1.7-1.7 1.7-.9 0-1.7-.8-1.7-1.7 0-.9.8-1.7 1.7-1.7.9 0 1.7.8 1.7 1.7zm0 0M16.9 17c-3.6 2.4-6.5.1-6.6 0-.3-.2-.7-.2-.9.1-.2.3-.2.7.1.9 0 0 1.7 1.3 4.1 1.3 1.2 0 2.6-.3 4-1.3.3-.2.4-.6.2-.9-.2-.2-.6-.3-.9-.1zm0 0"/></svg><span class="element-invisible">ForeignAffairs.com on Reddit</span></a>
									<a class="site-footer-social-menu__item" href="#" role="menuitem"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 21"><path d="M0 0v21h21V0H0zm16.4 8.2h-4.1v4.1H8.2v4.1H4.1V4.1h12.3v4.1z"/></svg><span class="element-invisible">ForeignAffairs.com on Flipboard</span></a>
									<a class="site-footer-social-menu__item" href="#" role="menuitem"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M15 14.8c-.1.1-.3.2-.5.2h-1.4c-.3 0-.6-.3-.6-.6C12.1 8.6 7.4 3.9 1.6 3.6c-.3 0-.6-.3-.6-.7V1.5c0-.2.1-.3.2-.5.1-.1.3-.2.4-.2C5.2 1 8.5 2.5 11 5s4 5.8 4.2 9.3c-.1.2-.1.4-.2.5zm-5.2 0c-.1.1-.3.2-.4.2H8c-.3 0-.6-.3-.6-.6-.3-3.1-2.7-5.5-5.8-5.8-.3 0-.6-.3-.6-.6V6.6c0-.2.1-.4.2-.5.1 0 .3-.1.4-.1 2.1.2 4.2 1.1 5.7 2.6s2.5 3.5 2.6 5.7c.1.2 0 .4-.1.5zm-6.9.2c-1 0-1.9-.9-1.9-1.9s.9-1.9 1.9-1.9 1.9.9 1.9 1.9S4 15 2.9 15z" /></svg><span class="element-invisible">ForeignAffairs.com RSS feed</span></a>
								</nav>
							</nav>
						</div>
					</div>
					<div class="row border-md-top py-sm-3 px-sm-0 mt-sm-3">
						<div class="col-12">
							<div class="site-footer-section-menu d-flex">
								<div class="col col-md-3 pl-0">
									<h2 class="site-footer-section-menu__more">
										<a href="#" role="menuitem">Country Focus</a>
									</h2>
								</div>
								<div class="col col-md-9 pr-0">
									<h2 class="site-footer-section-menu__more text-right text-md-left">
										<a href="#" role="menuitem">Graduate School Forum</a>
									</h2>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="col-12 col-lg-4 mt-3 mt-md-0">
					<div>
						<div class="site-footer-cofr-menu__brand d-flex align-items-end mb-3">
							<img
								class="site-footer-cofr-menu__logo mr-2"
								src="/fa_prototype/assets/images/council-on-FA-lockup.png"
								alt="Council on Foreign Relations"
							/>
		
							<p class="site-footer-cofr-menu__subtitle mb-0">
								From the
								<br>
								publishers of
								<br>
								<em>Foreign Affairs</em>
							</p>
						</div>
			
						<section class="tabs tabs-footer">
							<h2 class="site-footer-cofr-menu__tab-tab mb-0">The Most:</h2>
							<ul class="site-footer-cofr-menu mb-0">
								<li class="site-footer-cofr-menu__tab-tab">
									<a
										href="#fragment-1"
										class="site-footer-cofr-menu__tab link"
										href="#"
										>
										Recent</a>
								</li>
								<li class="site-footer-cofr-menu__tab-tab">
									<a href="#fragment-2" class="site-footer-cofr-menu__tab link">
										Shared
									</a>
								</li>
								<li class="site-footer-cofr-menu__tab-tab">
									<a href="#fragment-3" class="site-footer-cofr-menu__tab link">
										Viewed
									</a>
								</li>
							</ul>
							<div id="fragment-1" class="site-footer-cofr-menu__tab-contents">
								<article class="site-footer-cofr-menu-item">
									<h2 class="site-footer-cofr-menu-item__title">
										<a href="#">Pakistan's New Generation of Terrorists</a>
									</h2>
		
									<div class="author">by Zachary Laub</div>
								</article>
								<article class="site-footer-cofr-menu-item">
									<h2 class="site-footer-cofr-menu-item__title">
										<a href="#">The High Stakes in Regional Trade Talks</a>
									</h2>
		
									<div class="author">by Serge Schmemann</div>
								</article>
								<article class="site-footer-cofr-menu-item">
									<h2 class="site-footer-cofr-menu-item__title">
										<a href="#">Currency Crises in Emerging Markets</a>
									</h2>
		
									<div class="author">by Ray Takeyh</div>
								</article>
								<article class="site-footer-cofr-menu-item">
									<h2 class="site-footer-cofr-menu-item__title">
										<a href="#">A Vague Map for Chinese Reform</a>
									</h2>
		
									<div class="author">by Gayle Tzemach Lemmon</div>
								</article>
							</div>
		
							<div id="fragment-2" class="site-footer-cofr-menu__tab-contents">
								<article class="site-footer-cofr-menu-item">
									<h2 class="site-footer-cofr-menu-item__title">
										<a href="#">The High Stakes in Regional Trade Talks</a>
									</h2>
		
									<div class="author">by Serge Schmemann</div>
								</article>
								<article class="site-footer-cofr-menu-item">
									<h2 class="site-footer-cofr-menu-item__title">
										<a href="#">Currency Crises in Emerging Markets</a>
									</h2>
		
									<div class="author">by Ray Takeyh</div>
								</article>
								<article class="site-footer-cofr-menu-item">
									<h2 class="site-footer-cofr-menu-item__title">
										<a href="#">A Vague Map for Chinese Reform</a>
									</h2>
		
									<div class="author">by Gayle Tzemach Lemmon</div>
								</article>
								<article class="site-footer-cofr-menu-item">
									<h2 class="site-footer-cofr-menu-item__title">
										<a href="#">Pakistan's New Generation of Terrorists</a>
									</h2>
		
									<div class="author">by Zachary Laub</div>
								</article>
							</div>
		
							<div id="fragment-3" class="site-footer-cofr-menu__tab-contents">
								<article class="site-footer-cofr-menu-item">
									<h2 class="site-footer-cofr-menu-item__title">
										<a href="#">A Vague Map for Chinese Reform</a>
									</h2>
		
									<div class="author">by Gayle Tzemach Lemmon</div>
								</article>
								<article class="site-footer-cofr-menu-item">
									<h2 class="site-footer-cofr-menu-item__title">
										<a href="#">Pakistan's New Generation of Terrorists</a>
									</h2>
		
									<div class="author">by Zachary Laub</div>
								</article>
								<article class="site-footer-cofr-menu-item">
									<h2 class="site-footer-cofr-menu-item__title">
										<a href="#">The High Stakes in Regional Trade Talks</a>
									</h2>
		
									<div class="author">by Serge Schmemann</div>
								</article>
								<article class="site-footer-cofr-menu-item">
									<h2 class="site-footer-cofr-menu-item__title">
										<a href="#">Currency Crises in Emerging Markets</a>
									</h2>
		
									<div class="author">by Ray Takeyh</div>
								</article>
							</div>
						</section>
					</div>
				</div>
			</div>
		</div>
	</section>
  
  <section class="black-bg">
    <div class="container-bs">
			<div class="p-2 d-flex flex-column flex-md-row align-items-md-end">
				
				<div class="site-footer-legals-container text-white text-center text-md-left order-md-2">
					<p class="mb-2 mb-md-1">
						Published by the Council on Foreign Relations
					</p>
					<div class="d-flex flex-column flex-md-row">
						<nav class="site-footer-legals-nav mb-2 mb-md-1">
							<a href="#" class="site-footer-legals-link text-white">Privacy Policy</a>
							<a href="#" class="site-footer-legals-link text-white">Terms of Use</a>
						</nav>
						<p class="site-footer-copyright mb-2 mb-md-1">
							©2018 Council on Foreign Relations, Inc. All Rights Reserved.
						</p>
					</div>
				</div>

				<div class="d-flex justify-content-center order-md-1 mr-md-2">
					<img
						class="site-footer-logo"
						src="/fa_prototype/assets/images/fa-logotype.svg"
						alt="Foreign Affairs"
					/>
				</div>

			</div>
    </div>
  </section>
</footer>