Foreign Affairs Style Guide

Foreign Affairs

Article -- Paywall - 2019 - Max Views B version


The body component of an article including the article paywall.

Redmine Prototyping Ticket(s)
Data Sources:

Subscribe to continue reading.

Get a full year of access for as low as $34.95.

  • Paywall-free reading of new articles posting daily online and almost a century of archives
  • Unlock access to iOS/Android apps to save editions for offline reading
  • Six issues a year in print, online, and audio editions
      <div class="paywall c-2019-v max-views-no-border">
  <div class="paywall c-2019-v">
  <div class="paywall-prompt purchasable-pdf--no">
    <div class="container-bs">
      <div class="row">
        <div class="col-12">
          <h3 class="c-2019-v-prim-header">Subscribe to continue reading.</h3>
        </div>
      </div>
      <div class="row">
        <div class="col-md-8 col-12 order-1 order-md-0">
          <h4 class="c-2019-v-heading">Get a full year of access for as low as $34.95.</h4>
          <ul class="c-2019-v-benefits">
            <li class="c-2019-v-benefit-item">Paywall-free reading of new articles posting daily online and almost a century of archives</li>
            <li class="c-2019-v-benefit-item">Unlock access to iOS/Android apps to save editions for offline reading</li>
            <li class="c-2019-v-benefit-item"> Six issues a year in print, online, and audio editions</li>
          </ul>
          <p class="sign-in"><em>Already have an account? <a href="#">Sign in.</a></em></p>
        </div>
        <div class="col-md-4 col-12 order-0 order-md-1">
          <a href="#" class="button__red-reversed c-2019-v-ctabtn">Subscribe</a>
          <img src="/fa_prototype/assets/images/subscribe-thumb.png" alt="" class="b-lazy">
        </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>