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
![Blog Post Image Example](/images/blog-post-image-example.png)
<div class="blog-img">
<img data-src="/images/blog/blog-post-image.jpg" class="lazyload" alt="Blog Image">
</div>
List with dashes
![Blog list Example](/images/blog-list-example.png)
<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
![Blog quote Example](/images/blog-quote-example.png)
<p class="quote">
This is really cool! Quotes look extra fancy now!
</p>
CTAs
Gray Background
![Blog ad Example](/images/blog-cta-example.png)
<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
![Blog ad Example](/images/blog-cta-example-blue.png)
<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
![Blog ad Example](/images/blog-cta-example-orange.png)
<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>