The body component of an article including the article paywall.
Registered users get access to two free articles every month.
<div class="paywall"> <div class="paywall-prompt"> <header class="paywall-prompt-header"> <h3 class="paywall-prompt__title"> Sign In or register for free to continue reading. </h3> <p> Registered users get access to <strong>two free articles</strong> every month. </p> </header> <form class="paywall-prompt-form"> <div class="paywall-prompt-form__login"> <input type="text" placeholder="Username" /> <input type="text" placeholder="Password" /> </div> <div class="paywall-prompt__buttons"> <a class="button__blue prompt-button" href="#">Sign In</a> <a class="button__black-reversed prompt-button" href="#">Register</a> </div> <div class="paywall-prompt-form__login-helpers"> <a href="#">Forgot your username or password?</a> <a href="#">Already a subscriber but don’t have a username?</a> <a href="#">Customer Service</a> </div> </form> </div> <div class="paywall-subscribe"> <header class="paywall-subscribe-header"> <h3 class="paywall-subscribe__title"> Or subscribe now and save 55 percent. </h3> </header> <div class="paywall-subscribe__photo"> <img src="/fa_prototype/assets/images/subscribe-thumb.png" /> </div> <div class="paywall-subscribe__deck">Your benefits will include:</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 href="#" class="prompt-button--large button__red-reversed--light"> Subscribe </a> </div> </div> </div>