PMW/BREW Blog Post Styles
Adding Links to the Blog Post Side Nav
All H2's will be automatically added to the Blog Post Side Nav.
If you would like to add an additional title link to the side nav, add class="blog-anchor" to the tag.
<h3 class="blog-anchor">Example Title Here</h3>
Adding Videos to the Post Body
If you would like to add a video to the post body, make sure to use the code example to the right instead of just an iframe to lazyload it (for better site speed) and make sure it's ADA Compliant. This will also make it look prettier!
<div class="video-wrapper" data-video-id="rEJCyvDVRZQ" role="button" aria-label="play video" tabindex="0"></div>
Full width images for the middle of the blog post

<div class="blog-img">
<img data-src="/images/blog/blog-post-image.jpg" class="lazyload" alt="Blog Image">
</div>
List with dashes

<ul class="dashes">
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
</ul>
Quotes

<p class="quote">
This is really cool! Quotes look extra fancy now!
</p>
CTAs
Gray Background

<div class="blog-ad">
<div class="row">
<div class="col-md-6 blog-ad__content">
<h3>Paid Ads are one of the best tools for lead generation.</h3>
<a href="/ppc-marketing" class="btn btn--md btn--green">Explore Ads</a>
</div>
<div class="col-md-6 blog-ad__img">
<img data-src="/images/blog-ad-image.png" alt="Paid Ads" class="lazyload">
</div>
</div>
</div>
Blue Background

<div class="blog-ad blog-ad--blue">
<div class="row">
<div class="col-md-6 blog-ad__content">
<h3>Paid Ads are one of the best tools for lead generation.</h3>
<a href="/ppc-marketing" class="btn btn--md btn--green">Explore Ads</a>
</div>
<div class="col-md-6 blog-ad__img">
<img data-src="/images/blog-ad-image.png" alt="Paid Ads" class="lazyload">
</div>
</div>
</div>
Orange Background

<div class="blog-ad blog-ad--orange">
<div class="row">
<div class="col-md-6 blog-ad__content">
<h3>Paid Ads are one of the best tools for lead generation.</h3>
<a href="/ppc-marketing" class="btn btn--md btn--green">Explore Ads</a>
</div>
<div class="col-md-6 blog-ad__img">
<img data-src="/images/blog-ad-image.png" alt="Paid Ads" class="lazyload">
</div>
</div>
</div>