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 
						
		
		
		<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 
						
		
		
		<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 
						
		
		
		<p class="quote">
			This is really cool! Quotes look extra fancy now!
		</p>

CTAs

Gray Background

Blog ad Example 
						
		
		
<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 
						
		
		
<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 
						
		
		
<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>