Foreign Affairs Style Guide

Foreign Affairs

Article -- Paywall Archive


The body component of an article including the archive article paywall.

This article is a part of our premium archives.

Subscribers get free access to the archive.

      <div class="paywall">
  <div class="paywall-prompt">
    <header class="paywall-prompt-header">
      <h3 class="paywall-prompt__title">
        Sign In or register for free to continue reading.
      </h3>
      <p>
        Registered users get access to <strong>two free articles</strong> every month.
      </p>
    </header>
    <form class="paywall-prompt-form">
      <div class="paywall-prompt-form__login">
        <input type="text" placeholder="Username" />
        <input type="text" placeholder="Password" />
      </div>
      <div class="paywall-prompt__buttons">
        <a class="button__blue prompt-button" href="#">Sign In</a>
        <a class="button__black-reversed prompt-button" href="#">Register</a>
      </div>
      <div class="paywall-prompt-form__login-helpers">
        <a href="#">Forgot your username or password?</a>
        <a href="#">Already a subscriber but don’t have a username?</a>
        <a href="#">Customer Service</a>
      </div>
    </form>
  </div>
  <div class="paywall-subscribe">
    <header class="paywall-subscribe-header">
      <h3 class="paywall-subscribe__title">
        Or subscribe now and save 55 percent.
      </h3>
    </header>
    <div class="paywall-subscribe__photo">
      <img src="/fa_prototype/assets/images/subscribe-thumb.png" />
    </div>
    <div class="paywall-subscribe__deck">Your benefits will include:</div>
    <ul class="paywall-upsell-list">
      <li class="upsell-list__item">
        Full website and iPad access
      </li>
      <li class="upsell-list__item">
        Magazine issues
      </li>
      <li class="upsell-list__item">
        <strong>New!</strong> Books from the
        <i>Foreign Affairs</i> Anthology Series
      </li>
    </ul>
    <div class="paywall-subscribe-button">
      <a href="#" class="prompt-button--large button__red-reversed--light">
        Subscribe
      </a>
    </div>
  </div>
</div>