inline-cta
The inline CTA should be used in the story body. Under the dynamic content rules, it will be moved on the page and the wording will change. To allow for maximum flexibility, it’s a standard stack of atoms and follows the same rules as all other ads on the page.
EXAMPLE
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent facilisis ex ex, at blandit sapien suscipit eget. Maecenas gravida, erat vitae commodo semper, lorem sem molestie metus, quis faucibus tellus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent facilisis ex ex, at blandit sapien suscipit eget. Maecenas gravida, erat vitae commodo semper, lorem sem molestie metus, quis faucibus tellus.
HTML
<div class="inline-cta ad-widget package ">
<h1>Make us part of your daily routine.</h1>
<p class="summary">Get full access to The Sacramento Bee across all your devices. Unlimited Digital Access: Only $0.99 for your first month.</p>
<a class="button" href="#">SAVE NOW</a>
</div>Newsletter signup
The newsletter signup uses the same basic structure placing the classes on the form itself.
Example
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent facilisis ex ex, at blandit sapien suscipit eget. Maecenas gravida, erat vitae commodo semper, lorem sem molestie metus, quis faucibus tellus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent facilisis ex ex, at blandit sapien suscipit eget. Maecenas gravida, erat vitae commodo semper, lorem sem molestie metus, quis faucibus tellus.
HTML
<form class="inline-cta ad-widget package ">
<h1>Breaking news</h1>
<p class="summary">Be the first to know when big news breaks</p>
<input type="hidden" value="breaking newsletter" id="newsletterType">
<input type="email" placeholder="Email">
<button class="button">Sign Up</button>
<p class="small sans gray">This site is protected by reCAPTCHA and the Google <a href="https://policies.google.com/privacy">Privacy Policy</a> and <a href="https://policies.google.com/terms">Terms of Service</a> apply.</p>
</form>