Foreign Affairs Style Guide

Foreign Affairs

Article -- Paywall - 2019 - Max Views C version


The body component of an article including the article paywall.

Redmine Prototyping Ticket(s)
Data Sources:

You have read all of your free articles this month.

Subscribe for full access

Subscribe now and enjoy:

  • Unlimited access to ForeignAffairs.com
  • Six issues a year in print, digital, and audio editions
  • Unlocked archives going back to 1922
  • The Foreign Affairs App available on iOS and Android
  • Special subscriber-only extras like curated reading lists, invitations to attend or stream events, and more
      <div class="paywall d-2019-v max-views-no-border">
  <div class="paywall-prompt purchasable-pdf--no">
    <div class="container-bs">
      <div class="row">
        <div class="col-12">
          <h3 class="d-2019-v-prim-header">You have read all of your free articles this month.</h3>
          <a href="#" class="button__red-reversed c-2019-v-ctabtn">Subscribe for full access</a>
          <img src="/fa_prototype/assets/images/subscribe-thumb.png" alt="" class="b-lazy">
          <p><strong>Subscribe now and enjoy:</strong></p>
          <ul class="d-2019-v-benefits-list">
            <li class="d-2019-v-benefits-list-item"><strong>Unlimited access to</strong> ForeignAffairs.com</li>
            <li class="d-2019-v-benefits-list-item"><strong>Six issues a year</strong> in print, digital, and audio editions</li>
            <li class="d-2019-v-benefits-list-item"><strong>Unlocked archives</strong> going back to 1922</li>
            <li class="d-2019-v-benefits-list-item"><strong>The Foreign Affairs App</strong> available on iOS and Android</li>
            <li class="d-2019-v-benefits-list-item"><strong>Special subscriber-only extras</strong> like curated reading lists, invitations to attend or stream events, and more</li>
          </ul>
          <p class="sign-in"><em>Already have an account? <a href="#">Sign in.</a></em></p>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- The below code is used to simulate the action of clicking the "Already a subscriber" link -->
<form class="user-login-form" action="/ajax_forms/ajax/login" method="post" id="user-login" accept-charset="UTF-8" style="display:none;"><div><div class="user-login__header form-mice-type">Don't have an account? <a href="/ajax_forms/nojs/register-form" class="use-ajax ajax-processed">Register</a> today for free.</div><div class="form-item form-type-textfield form-item-name">
 <input placeholder="Your Email" type="text" id="edit-name" name="name" value="" size="60" maxlength="60" class="form-text required">
</div>
<div class="form-item form-type-password form-item-pass">
 <input placeholder="Your Password" type="password" id="edit-pass" name="pass" size="60" maxlength="128" class="form-text required">
</div>
<input type="hidden" name="form_build_id" value="form-bhbt2KjqO3rMHkKACXaIRRlkDr0ioDrtTwgLqbGz24c">
<input type="hidden" name="form_id" value="user_login">
<div class="form-actions form-wrapper" id="edit-actions"><input class="button__blue button-login form-submit ajax-processed" type="submit" id="edit-submit--4" name="op" value="Sign In"></div><div class="user-login__footer form-mice-type"><a href="/modal_forms/nojs/password" class="ctools-use-modal ctools-modal-modal-popup-small ctools-use-modal-processed" title="Forgot your username or password?">Forgot your username or password?</a><br><a class="use-ajax ajax-processed" href="/ajax_forms/nojs/register-form?status=1">Already a subscriber but don't have a login?</a><br><a href="/myaccount">Customer Service</a></div></div></form>