Snippet Style Guide

 

Page Divider with Image

<div class="divider"><span class="divider__label "><img src="/" alt="" width="130" /></span></div>

Text 2 column CTA

 

<div class="columns">
<div class="column -width-1/2 -width-1/2@md -width-1/1@sm">
<h2>Text Goes Here</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget turpis ac orci viverra imperdiet. Sed ex augue, porta nec elit vitae, mollis sodales eros. Cras luctus neque nec interdum posuere. Duis ornare commodo tellus, ac rutrum dui. Donec vehicula ipsum non nibh eleifend blandit. Sed volutpat mattis odio at commodo. Nulla facilisi. Pellentesque ultricies eros felis, id cursus lorem accumsan id. Suspendisse at nibh nibh. Morbi non tempus tortor. Nunc vel lacinia nunc. Vivamus non enim in dolor scelerisque aliquet. Maecenas ultricies scelerisque arcu, non pretium est aliquam ut.</p>
</div>
<div class="column -width-1/2 -width-1/2@md -width-1/1@sm">
<h2>Text Goes Here</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget turpis ac orci viverra imperdiet. Sed ex augue, porta nec elit vitae, mollis sodales eros. Cras luctus neque nec interdum posuere. Duis ornare commodo tellus, ac rutrum dui. Donec vehicula ipsum non nibh eleifend blandit. Sed volutpat mattis odio at commodo. Nulla facilisi. Pellentesque ultricies eros felis, id cursus lorem accumsan id. Suspendisse at nibh nibh. Morbi non tempus tortor. Nunc vel lacinia nunc. Vivamus non enim in dolor scelerisque aliquet. Maecenas ultricies scelerisque arcu, non pretium est aliquam ut.</p>
</div>
</div>

4 Column Community CTA

<div class="columns" id="communities_1">
<a href="#" class="hero hero--portrait column -width-1/4 -width-1/2@md -width-1/1@sm -width-1/1@xs">
<div class="hero__fg">
<div class="hero__body -flex">
<div class="-bottom">
<span class="-font-fantasy -mar-bottom-xs">Sub-Title Text</span>
<h2 class="-text-upper">Heading Text</h2>
<p class="-text-xs -text-upper">Paragraph Text</p>
</div>
</div>
</div>
<div class="hero__bg">
<div class="cloak cloak--dusk"></div>
<img class="hero__bg-content loaded" data-src="Image File Here" src="Image File Here" alt="Photo ALT Text Here" data-org="/img/util/35mm_landscape.gif">
</div>
</a>
<a href="#" class="hero hero--portrait column -width-1/4 -width-1/2@md -width-1/1@sm -width-1/1@xs">
<div class="hero__fg">
<div class="hero__body -flex">
<div class="-bottom">
<span class="-font-fantasy -mar-bottom-xs">Sub-Title Text</span>
<h2 class="-text-upper">Heading Text</h2>
<p class="-text-xs -text-upper">Paragraph Text</p>
</div>
</div>
</div>
<div class="hero__bg">
<div class="cloak cloak--dusk"></div>
<img class="hero__bg-content loaded" data-src="Image File Here" src="Image File Here" alt="Photo ALT Text Here" data-org="/img/util/35mm_landscape.gif">
</div>
</a>
<a href="#" class="hero hero--portrait column -width-1/4 -width-1/2@md -width-1/1@sm -width-1/1@xs">
<div class="hero__fg">
<div class="hero__body -flex">
<div class="-bottom">
<span class="-font-fantasy -mar-bottom-xs">Sub-Title Text</span>
<h2 class="-text-upper">Heading Text</h2>
<p class="-text-xs -text-upper">Paragraph Text</p>
</div>
</div>
</div>
<div class="hero__bg">
<div class="cloak cloak--dusk"></div>
<img class="hero__bg-content loaded" data-src="Image File Here" src="Image File Here" alt="Photo ALT Text Here" data-org="/img/util/35mm_landscape.gif">
</div>
</a>
<a href="#" class="hero hero--portrait column -width-1/4 -width-1/2@md -width-1/1@sm -width-1/1@xs">
<div class="hero__fg">
<div class="hero__body -flex">
<div class="-bottom">
<span class="-font-fantasy -mar-bottom-xs">Sub-Title Text</span>
<h2 class="-text-upper">Heading Text</h2>
<p class="-text-xs -text-upper">Paragraph Text</p>
</div>
</div>
</div>
<div class="hero__bg">
<div class="cloak cloak--dusk"></div>
<img class="hero__bg-content loaded" data-src="Image File Here" src="Image File Here" alt="Photo ALT Text Here" data-org="/img/util/35mm_landscape.gif">
</div>
</a>
</div>

image2018-6-7_15-33-41.png

Image 3 Column CTA

 

 

 

Text 3 Column CTA

Text Here

Praesent porta urna id malesuada dictum. Pellentesque vitae scelerisque dolor. Nulla sagittis lectus at nunc facilisis venenatis. Donec quis venenatis elit. Mauris ut neque sit amet mauris finibus finibus id ornare metus. Sed leo massa, sodales et egestas eget, ultrices ac lacus. Aliquam aliquam lobortis velit, et pellentesque nulla luctus sit amet.

Text Here

Praesent porta urna id malesuada dictum. Pellentesque vitae scelerisque dolor. Nulla sagittis lectus at nunc facilisis venenatis. Donec quis venenatis elit. Mauris ut neque sit amet mauris finibus finibus id ornare metus. Sed leo massa, sodales et egestas eget, ultrices ac lacus. Aliquam aliquam lobortis velit, et pellentesque nulla luctus sit amet.

Text Here

Praesent porta urna id malesuada dictum. Pellentesque vitae scelerisque dolor. Nulla sagittis lectus at nunc facilisis venenatis. Donec quis venenatis elit. Mauris ut neque sit amet mauris finibus finibus id ornare metus. Sed leo massa, sodales et egestas eget, ultrices ac lacus. Aliquam aliquam lobortis velit, et pellentesque nulla luctus sit amet.

 

 

Sign up for email updates