Foreign Affairs Style Guide

Foreign Affairs

Article -- Paywall A/B Testing Anonymous Default


The body component of an article including the article paywall.

Redmine Prototyping Ticket(s)
Data Sources:

Log in or register for free to continue reading.

Registered users get access to one free article every month. Subscribers get access to the entire archive.

      <div class="paywall ajax-container__register-form">
  <div class="paywall-prompt">
    <header class="paywall-prompt-header">
      <h3 class="paywall-prompt__title">Log in or register for free to continue reading.</h3>
      <p>Registered users get access to <strong>one free article</strong> every month. Subscribers get access to the entire archive.</p>
    </header>
    <div class="paywall-prompt__buttons ajax-container__login-form">
      <a class="button__blue prompt-button use-ajax" href="/ajax_forms/nojs/login">Sign In</a>
      <a class="button__black-reversed prompt-button use-ajax" href="/ajax_forms/nojs/register-form">Register</a>
    </div>
  </div>
  <div class="paywall-subscribe">
    <header class="paywall-subscribe-header">
      <h3 class="paywall-subscribe__title">Or subscribe and save 55%!</h3>
    </header>
    <div class="paywall-subscribe__photo">
      <img src="https://files.foreignaffairs.com/styles/medium/s3/images/businessboxes/2015/04/22/subscribe-thumb.png">
    </div>
    <div class="paywall-subscribe__deck">Your subscription includes:</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 class="prompt-button--large button__red-reversed--light" href="/subscribe?ban=APWLK">Subscribe</a>
    </div>
  </div>
</div>