Image code

<img class="lazyload" src="Link to Image Goes Here" data-src="Link to Image Goes Here" alt="Alt Tag Goes Here">

Buttons

<button class="button button--large button--primary">Primary Button</button>

Primary Button

<button class="button button--large button--secondary">Secondary Button</button>

Secondary Button

<button class="button button--large button--ghost">Ghost Button</button>

Ghost Button

<button class="button button--large button--success button--round">Round Success Btn</button>

Round Success Btn

<button class="button button--large button--round button--blue">Round Info Btn</button>

Round Info Btn

<button class="button button--small button--primary">Small Button</button>

Small Button

To Create A clickable Button

<a href="Page Link Goes Here" class="Change Button Type Here">Button Text Goes Here</a>

Layouts

Two Column

<div class="teasers teasers--2-col">
<div class="teaser__content">
<!-- Content goes in here -->
<sup class="kicker__headline">Sub Heading One</sup>
<h2>Heading Column One</h2>
<p>This content is an example of content that could be placed for different column or grid layouts.</p>
</div>
<div class="teaser__content">
<!-- Content goes in here -->
<sup class="kicker__headline">Sub Heading Two</sup>
<h2>Heading Column Two</h2>
<p>This content is an example of content that could be placed for different column or grid layouts.</p>
</div>
</div>

Three Column

<div class="teasers teasers--3-col">
<div class="teaser__content">
<!-- Content goes in here -->
<sup class="kicker__headline">Sub Heading One</sup>
<h2>Heading Column One</h2>
<p>This content is an example of content that could be placed for different column or grid layouts.</p>
</div>
<div class="teaser__content">
<!-- Content goes in here -->
<sup class="kicker__headline">Sub Heading Two</sup>
<h2>Heading Column Two</h2>
<p>This content is an example of content that could be placed for different column or grid layouts.</p>
</div>
<div class="teaser__content">
<!-- Content goes in here -->
<sup class="kicker__headline">Sub Heading Three</sup>
<h2>Heading Column Three</h2>
<p>This content is an example of content that could be placed for different column or grid layouts.</p>
</div>
</div>

Four Column

<div class="teasers teasers--4-col">
<div class="teaser__content">
<!-- Content goes in here -->
<sup class="kicker__headline">Sub Heading One</sup>
<h2>Heading Column One</h2>
<p>This content is an example of content that could be placed for different column or grid layouts.</p>
</div>
<div class="teaser__content">
<!-- Content goes in here -->
<sup class="kicker__headline">Sub Heading Two</sup>
<h2>Heading Column Two</h2>
<p>This content is an example of content that could be placed for different column or grid layouts.</p>
</div>
<div class="teaser__content">
<!-- Content goes in here -->
<sup class="kicker__headline">Sub Heading Three</sup>
<h2>Heading Column Three</h2>
<p>This content is an example of content that could be placed for different column or grid layouts.</p>
</div>
<div class="teaser__content">
<!-- Content goes in here -->
<sup class="kicker__headline">Sub Heading Four</sup>
<h2>Heading Column Four</h2>
<p>This content is an example of content that could be placed for different column or grid layouts.</p>
</div>
</div>

Two by Two Grid

<div class="block--full-width">
<div class="teaser__cta">
<div class="teaser__cta__content">
<!-- Content goes in here -->
<sup class="kicker__headline">Sub Heading One</sup>
<h2>Grid Heading Column One</h2>
<p>This content is an example of content that could be placed for different column or grid layouts.</p>
</div>
<div class="teaser__cta__content">
<!-- Content goes in here -->
<sup class="kicker__headline">Sub Heading Two</sup>
<h2>Grid Heading Column Two</h2>
<p>This content is an example of content that could be placed for different column or grid layouts.</p>
</div>
</div>
<div class="teaser__cta">
<div class="teaser__cta__content">
<!-- Content goes in here -->
<sup class="kicker__headline">Sub Heading Three</sup>
<h2>Grid Heading Column Three</h2>
<p>This content is an example of content that could be placed for different column or grid layouts.</p>
</div>
<div class="teaser__cta__content">
<!-- Content goes in here -->
<sup class="kicker__headline">Sub Heading Four</sup>
<h2>Grid Heading Column Four</h2>
<p>This content is an example of content that could be placed for different column or grid layouts.</p>
</div>
</div>
</div>

Snippets Call to action

Join CTA

<section class="cta cta--background-light">
<div class="cta__container container clear">
<sup class="kicker__headline">Are you an agent?</sup>
<h2 class="cta__headline">Join our growing team, we're looking for exceptional agents</h2>
<p>Our team is dedicated to putting our experience and local knowledge to work for you in all steps of your real estate transaction.</p>
<a href="Page Link Goes Here" class="button button--large button--primary">Button Text Goes Here</a>
</div>
</section>

Agent CTA

<section class="cta__image cta--background-light">
<div class="cta__container container">
<div class="cta--two-thirds-layout">
<img class="lazyload" src="Image Link Goes Here" data-src="Image Link Goes Here" alt="Alt Text Goes Here">
<div class="cta__content clear">
<h2 class="cta__headline">Contact us today to help you with your next home</h2>
<a href="Link Goes Here" class="button button--large button--primary">Button Text Goes Here</a>
</div>
</div>
</div>
</section>

Contact us today to help you with your next home

Get in touch

Subscribe CTA

<section class="cta cta--background-light">
<div class="cta__container container">
<h3 class="kicker__headline">Sign Up for free</h3>
<p>Get the first to receive the latest listing updates, save favorites & much more by signing up.</br>
Or already have in account,<a href="Link Goes Here">Text Goes Here</a>.</p>

Do Not Change Anything under here
<form class="cta__form" action="?newsletter" method="POST">
<input type="hidden" name="opt_marketing" value="in">
<div class="field">
<div class="field--inline">
<label for="inline" class="-is-hidden">Enter your email address</label>
<input id="inline" type="text" name="mi0moecs" placeholder="Enter your email address">
<button class="button button--large button--primary">Sign Up</button>
</div>
</div>
</form>
</div>
</section>

Community CTA

<section class="cta cta__background cta--background-dark">
<div class="cta__background__image">
<img class="lazyload" src="/img/util/35mm_landscape.gif" data-src="Image Link Goes Here" alt="Alt Text Goes Here">
</div>
<div class="cta__container container">
<h2 class="cta__headline">Start searching for your dream home now.</h2>
<p>When it comes to convenience, our site is unparalleled. Whether you're in the comfort of your home, or on the go.<br>Our site works flawlessly on multiple devices so you can find the information you need.</p>
<a href="Button Link Goes Here" class="button button--large button--primary">Button Text Goes Here</a>
</div>
</section>

Start searching for your dream home now.

When it comes to convenience, our site is unparalleled. Whether you're in the comfort of your home, or on the go.
Our site works flawlessly on multiple devices so you can find the information you need.

Start Search

List of Communities CTA

<div class="cta__communities" aria-labelledby="browse-community-nav">
<h5 id="browse-community-nav" class="cta__communities__headline">Browse Other Communities</h5>
<ul>
<li><a href="Link Goes Here">Clickable Text Goes Here</a></li>
<li><a href="/community-2/">Community 2</a></li>
<li><a href="/community-3/">Community 3</a></li>
<li><a href="/community-4/">Community 4</a></li>
<li><a href="/community-5/">Community 5</a></li>
<li><a href="/community-6/">Community 6</a></li>
</ul>
</div>

Search CTA

<section class="cta cta--background-light">
<div class="cta__container container">
<span class="kicker__headline">Technology to fit you</span>
<h2 class="cta__headline">At home or on the go, listings are always with you.</h2>
<p>When it comes to convenience, our site is unparalleled. Whether you're in the comfort of your home, or on the go, our site works flawlessly on multiple devices so you can find the information you need.</p>
<a href="Link Goes Here" class="button button--large button--primary">Button Text Goes Here</a>
</div>
</section>

FAQ

Example Faq Bordered

<section class="block--light block--full-width block--small">
<div class="container">
<h1>Title Goes Here</h1>
<div>
<div class="faqs">
<details class="faq faq--bordered">
<summary class="faq__question">Question Goes Here</summary>
<div class="faq__answer">
<p>Answer Goes Here</p>
</div>
</details>
<details class="faq faq--bordered">
<summary class="faq__question">How long does it take to buy a home?</summary>
<div class="faq__answer">
<p>From start (searching online) to finish (closing escrow), buying a home takes about 10 to 12 weeks.</p>
</div>
</details>
</div>
</div>
</div>
</section>

Example Faq Bordered Caret

<section class="block--light block--full-width block--small">
<div class="container">
<h1>Title Goes Here</h1>
<div>
<div class="faqs">
<details class="faq faq--bordered faq--caret">
<summary class="faq__question">Question Goes Here</summary>
<div class="faq__answer">
<p>Answer Goes Here</p>
</div>
</details>
<details class="faq faq--bordered faq--caret">
<summary class="faq__question">How long does it take to buy a home?</summary>
<div class="faq__answer">
<p>From start (searching online) to finish (closing escrow), buying a home takes about 10 to 12 weeks.</p>
</div>
</details>
</div>
</div>
</div>
</section>

Example Faq Caret

<section class="block block--full-width block--small">
<div class="container">
<h1>Title Goes Here</h1>
<div>
<div class="faqs">
<details class="faq faq--caret">
<summary class="faq__question">Question Goes Here</summary>
<div class="faq__answer">
<p>Answer Goes Here</p>
</div>
</details>
<details class="faq faq--caret">
<summary class="faq__question">How long does it take to buy a home?</summary>
<div class="faq__answer">
<p>From start (searching online) to finish (closing escrow), buying a home takes about 10 to 12 weeks.</p>
</div>
</details>
</div>
</div>
</div>
</section>

Example Faq Default

<section class="block block--full-width block--small">
<div class="container">
<h1>FAQs</h1>
<div>
<div class="faqs">
<details class="faq">
<summary class="faq__question">What the first step of the home buying process?</summary>
<div class="faq__answer">
<p>Getting pre-approved for a mortgage is the first step of the home buying process.</p>
</div>
</details>
<details class="faq">
<summary class="faq__question">How long does it take to buy a home?</summary>
<div class="faq__answer">
<p>From start (searching online) to finish (closing escrow), buying a home takes about 10 to 12 weeks.</p>
</div>
</details>
</div>
</div>
</div>
</section>