UI Style Guide
The de facto style guide.
Buttons
Forms
Notices
Page Divider
<div class="divider"><span class="divider__label "><img src="/" alt="" width="130" /></span></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>
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>
Image 2 Column CTA
<div class="columns">
<div class="column -width-1/2 -width-1/2@md -width-1/1@sm">
<img src="/">
</div>
<div class="column -width-1/2 -width-1/2@md -width-1/1@sm">
<img src="/">
</div>
</div>
Image 2 Column CTA V.2
(Image on mobile/responsive selects part of photo, does not resize photo completely instead resizes containing box)
<div class="columns" id="offices_1">
<a href="" class="hero hero--landscape column -width-1/2 -width-1/1@md -width-1/1@sm -width-1/1@xs hero--portrait@xs">
<div class="hero__fg">
<div class="hero__head">
<div class="divider">
<span class="divider__label -left -text-upper -text-xs">Upper Text</span>
</div>
</div>
<div class="hero__body -flex">
<div class="-bottom">
<h2 class="-text-upper -text-bold -mar-bottom-0">Heading Text</h2>
<p class="-mar-vertical-0">Sub Heading Text</p>
<p class="-mar-top-sm -text-xs -text-upper">orem ipsum dolor sit amet, consectetur adipiscing elit. Cras risus orci, ultricies a purus nec, malesuada placerat lorem.</p>
</div>
</div>
</div>
<div class="hero__bg">
<div class="cloak cloak--dusk"></div>
<img class="hero__bg-content loaded" alt="ALT Photo Text" data-src="/" src="/" data-org="/img/util/35mm_landscape.gif">
</div>
</a>
<a href="" class="hero hero--landscape column -width-1/2 -width-1/1@md -width-1/1@sm -width-1/1@xs hero--portrait@xs">
<div class="hero__fg">
<div class="hero__head">
<div class="divider">
<span class="divider__label -left -text-upper -text-xs">Upper Text</span>
</div>
</div>
<div class="hero__body -flex">
<div class="-bottom">
<h2 class="-text-upper -text-bold -mar-bottom-0">Heading Text</h2>
<p class="-mar-vertical-0">Sub Heading Text</p>
<p class="-mar-top-sm -text-xs -text-upper">orem ipsum dolor sit amet, consectetur adipiscing elit. Cras risus orci, ultricies a purus nec, malesuada placerat lorem.</p>
</div>
</div>
</div>
<div class="hero__bg">
<div class="cloak cloak--dusk"></div>
<img class="hero__bg-content loaded" alt="ALT Photo Text" data-src="/" src="/" data-org="/img/util/35mm_landscape.gif">
</div>
</a>
</div>
Text 3 Column CTA
<div class="columns">
<div class="column -width-1/3 -width-1/2@md -width-1/1@sm">
<h4><strong>Text Here</strong></h4>
<p>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.</p>
<p><a href="#"><button class="button button--strong">Read More</button></a></p>
</div>
<div class="column -width-1/3 -width-1/2@md -width-1/1@sm">
<h4><strong>Text Here</strong></h4>
<p>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.</p>
<p><a href="#"><button class="button button--strong">Read More</button></a></p>
</div>
<div class="column -width-1/3 -width-1/2@md -width-1/1@sm">
<h4><strong>Text Here</strong></h4>
<p>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.</p>
<p><a href="#"><button class="button button--strong">Read More</button></a></p>
</div>
</div>
Image 3 Column CTA
<div class="columns">
<div class="column -width-1/3 -width-1/1@md -width-1/1@sm">
<img src="/">
</div>
<div class="column -width-1/3 -width-1/1@md -width-1/1@sm">
<img src="/">
</div>
<div class="column -width-1/3 -width-1/1@md -width-1/1@sm">
<img src="/">
</div>
</div>
Image 3 Column CTA V.2
(Image on mobile/responsive selects part of photo, does not resize photo completely instead resizes containing box)
<div class="columns" id="offices_1">
<a href="" class="hero hero--landscape column -width-1/3 -width-1/1@md -width-1/1@sm -width-1/1@xs hero--portrait@xs">
<div class="hero__fg">
<div class="hero__head">
<div class="divider">
<span class="divider__label -left -text-upper -text-xs">Upper Text</span>
</div>
</div>
<div class="hero__body -flex">
<div class="-bottom">
<h2 class="-text-upper -text-bold -mar-bottom-0">Heading Text</h2>
<p class="-mar-vertical-0">Sub Heading Text</p>
<p class="-mar-top-sm -text-xs -text-upper">orem ipsum dolor sit amet, consectetur adipiscing elit. Cras risus orci, ultricies a purus nec, malesuada placerat lorem.</p>
</div>
</div>
</div>
<div class="hero__bg">
<div class="cloak cloak--dusk"></div>
<img class="hero__bg-content loaded" alt="ALT Photo Text" data-src="/" src="/" data-org="/img/util/35mm_landscape.gif">
</div>
</a>
<a href="" class="hero hero--landscape column -width-1/3 -width-1/1@md -width-1/1@sm -width-1/1@xs hero--portrait@xs">
<div class="hero__fg">
<div class="hero__head">
<div class="divider">
<span class="divider__label -left -text-upper -text-xs">Upper Text</span>
</div>
</div>
<div class="hero__body -flex">
<div class="-bottom">
<h2 class="-text-upper -text-bold -mar-bottom-0">Heading Text</h2>
<p class="-mar-vertical-0">Sub Heading Text</p>
<p class="-mar-top-sm -text-xs -text-upper">orem ipsum dolor sit amet, consectetur adipiscing elit. Cras risus orci, ultricies a purus nec, malesuada placerat lorem.</p>
</div>
</div>
</div>
<div class="hero__bg">
<div class="cloak cloak--dusk"></div>
<img class="hero__bg-content loaded" alt="ALT Photo Text" data-src="/" src="/" data-org="/img/util/35mm_landscape.gif">
</div>
</a>
<a href="" class="hero hero--landscape column -width-1/3 -width-1/1@md -width-1/1@sm -width-1/1@xs hero--portrait@xs">
<div class="hero__fg">
<div class="hero__head">
<div class="divider">
<span class="divider__label -left -text-upper -text-xs">Upper Text</span>
</div>
</div>
<div class="hero__body -flex">
<div class="-bottom">
<h2 class="-text-upper -text-bold -mar-bottom-0">Heading Text</h2>
<p class="-mar-vertical-0">Sub Heading Text</p>
<p class="-mar-top-sm -text-xs -text-upper">orem ipsum dolor sit amet, consectetur adipiscing elit. Cras risus orci, ultricies a purus nec, malesuada placerat lorem.</p>
</div>
</div>
</div>
<div class="hero__bg">
<div class="cloak cloak--dusk"></div>
<img class="hero__bg-content loaded" alt="ALT Photo Text" data-src="/" src="/" data-org="/img/util/35mm_landscape.gif">
</div>
</a>
</div>
Updating the Site-sign up cta Picture.
Place this under 'sign up for email updates'
<style>
.subscribe-cta {
padding: 45px 0;
background-image: url(/uploads/agent-1/IMG_4796.jpg) !important;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
position: relative;
}
</style>
