Foreign Affairs Style Guide

Foreign Affairs

Article -- Paywall -- Max Views

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">Support our work and subscribe now to continue reading.</h3>
    </header>
    <div class="paywall-subscribe__photo">
      <img src="/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 data-dl-click-event="subscribe_cta_click" data-dl-click-event-location="Registered Max Views Reached" class="prompt-button--large button__red-reversed--light datalayer-click-event-processed" href="/subscribe">Subscribe</a>
    </div>
  </div>
</div>