Foreign Affairs Style Guide

Foreign Affairs

Article -- Paywall A/B Testing Registered Default

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.

      <div class="paywall">
  <div class="paywall-prompt--kicker">
    <header class="paywall-prompt-header">
      <h3 class="paywall-prompt--kicker__title">You have read all of your free articles this month.</h3>
    </header>
  </div>
  <div class="paywall-subscribe">
    <header class="paywall-subscribe-header">
      <h3 class="paywall-subscribe--kicker__title">Subscribe now to continue reading.</h3>
    </header>
    <div class="paywall-subscribe__photo">
      <img src="/profiles/foreignaffairs/libraries/fa_prototype/assets/images/subscribe-thumb.png">
    </div>
    <div class="paywall-subscribe__deck">Subscribe now and save 55% on:</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=APWMX">Subscribe</a>
    </div>
  </div>
</div>