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>
<button class="button button--large button--secondary">Secondary Button</button>
<button class="button button--large button--ghost">Ghost Button</button>
<button class="button button--small button--primary">Small Button</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>
Join our growing team, we're looking for exceptional agents
Our team is dedicated to putting our experience and local knowledge to work for you in all steps of your real estate transaction.
Learn MoreAgent 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 touchSubscribe 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>
Sign Up for free
Get the first to receive the latest listing updates, save favorites & much more by signing up. Or already have in account,Sign in.
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.
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>
Browse Other Communities
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>
At home or on the go, listings are always with you.
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 SearchingFAQ
Example Faq Bordered
<section class="block--light block--full-width block--small"> Getting pre-approved for a mortgage is the first step of the home buying process. From start (searching online) to finish (closing escrow), buying a home takes about 10 to 12 weeks.
<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>FAQs
What the first step of the home buying process?
How long does it take to buy a home?
Example Faq Bordered Caret
<section class="block--light block--full-width block--small"> Getting pre-approved for a mortgage is the first step of the home buying process. From start (searching online) to finish (closing escrow), buying a home takes about 10 to 12 weeks.
<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>FAQs
What the first step of the home buying process?
How long does it take to buy a home?
Example Faq Caret
<section class="block block--full-width block--small"> Getting pre-approved for a mortgage is the first step of the home buying process. From start (searching online) to finish (closing escrow), buying a home takes about 10 to 12 weeks.
<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>FAQs
What the first step of the home buying process?
How long does it take to buy a home?
Example Faq Default
<section class="block block--full-width block--small"> Getting pre-approved for a mortgage is the first step of the home buying process. From start (searching online) to finish (closing escrow), buying a home takes about 10 to 12 weeks.
<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>FAQs
What the first step of the home buying process?
How long does it take to buy a home?
Stats Banner
<div class="container">
<div class="stats-grid">
<div class="stats-heading">
<h3><strong>Who's Who in Luxury Real Estate</h3></strong>
</div>
<div class="stats-columns">
<div class="stats-item">
<strong>Number 1</strong>
<span>Portal for Luxury</span>
<span>Properties on the Web</span>
</div>
<div class="stats-item">
<strong>130K+</strong>
<span>Collective</span>
<span> Professionals</span>
</div>
<div class="stats-item">
<strong>$190B+</strong>
<span>Real Estate</span>
<span>Sold Annually</span>
</div>
</div>
</div>
</div>
</div>
Who We Are
Split Image Right
<div class="grid-column text-column">
<div class="content-wrapper">
<h2>Worldwide Luxury</h2>
<hr/>
<p>Here is where you have the option of providing content on your range of worldwide luxury properties for sale. You can find fantastic and unique architecture, contemporary designs and much more. There are modern bungalow style homes, beach homes and something luxurious for everyone with the budget available.</p>
<a href="Button Link Goes Here" class="button button--large button--primary">Button Text Goes Here</a>
</div>
</div>
<div class="grid-column image-column">
<img class="lazyload" style="transform: scaleX(-1);" src="/img/util/35mm_landscape.gif" data-src="Image Link Goes here" alt="Alt Text Goes Here" width="982" height="585"/>
</div>
</div>
Worldwide Luxury
Chicago Suburbs Scoop is our community media brand keeping Chicago suburbanites informed, connected, and in the know. With 10,000+ Facebook group members, 6,000+ YouTube subscribers, 6,000+ Instagram followers, and an email newsletter reaching 3,000+ subscribers, we've built one of the most engaged hyperlocal audiences in the Chicagoland area. From new restaurant openings and local business spotlights to neighborhood developments and community happenings, Chicago Suburbs Scoop covers it all. Our mission is simple: keep people connected to the community they love. Whether it's breaking news about a new development or a hidden gem worth knowing about, our followers count on us to be their trusted local source across every platform.
Follow
Split Image Left
<div class="grid-column text-column">
<div class="content-wrapper">
<h2>Waterfront Living</h2>
<hr/>
<p>Provide an option to showcase some of the finest seaside and waterfront living properties. Delivering the highest standards and specialist understanding in all property types, with a focus on waterfront properties. Explore our full portfolio below.</p>
<a href="/Button Link Goes Here/" class="button button--large button--primary">Button Text Goes Here</a>
</div>
</div>
<div class="grid-column image-column">
<img class="lazyload" src="/img/util/35mm_landscape.gif" data-src="Image Link Goes Here" alt="Alt Text Goes Here" width="982" height="650"/>
</div>
</div>
Chicago Suburbs Scoop
Chicago Suburbs Scoop is our community media brand keeping Chicago suburbanites informed, connected, and in the know. With 10,000+ Facebook group members, 6,000+ YouTube subscribers, 6,000+ Instagram followers, and an email newsletter reaching 3,000+ subscribers, we've built one of the most engaged hyperlocal audiences in the Chicagoland area. From new restaurant openings and local business spotlights to neighborhood developments and community happenings, Chicago Suburbs Scoop covers it all. Our mission is simple: keep people connected to the community they love. Whether it's breaking news about a new development or a hidden gem worth knowing about, our followers count on us to be their trusted local source across every platform.
Follow Us
Testimonial Slide
<div class="container slider" data-slick-type>
<!-- SLIDE 1 -->
<div>
<div class="testimonials__stars">
<svg width="10.595" height="10.071" viewbox="0 0 10.595 10.071">
<path id="md-star" d="M59.3,72.1l3.274,1.975-.866-3.726L64.6,67.84l-3.81-.327L59.3,64,57.81,67.513,54,67.84l2.89,2.505-.866,3.726Z" transform="translate(-54 -64)" fill="#f7ca45"></path>
</svg>
<svg width="10.595" height="10.071" viewbox="0 0 10.595 10.071">
<path id="md-star" d="M59.3,72.1l3.274,1.975-.866-3.726L64.6,67.84l-3.81-.327L59.3,64,57.81,67.513,54,67.84l2.89,2.505-.866,3.726Z" transform="translate(-54 -64)" fill="#f7ca45"></path>
</svg>
<svg width="10.595" height="10.071" viewbox="0 0 10.595 10.071">
<path id="md-star" d="M59.3,72.1l3.274,1.975-.866-3.726L64.6,67.84l-3.81-.327L59.3,64,57.81,67.513,54,67.84l2.89,2.505-.866,3.726Z" transform="translate(-54 -64)" fill="#f7ca45"></path>
</svg>
<svg width="10.595" height="10.071" viewbox="0 0 10.595 10.071">
<path id="md-star" d="M59.3,72.1l3.274,1.975-.866-3.726L64.6,67.84l-3.81-.327L59.3,64,57.81,67.513,54,67.84l2.89,2.505-.866,3.726Z" transform="translate(-54 -64)" fill="#f7ca45"></path>
</svg>
<svg width="10.595" height="10.071" viewbox="0 0 10.595 10.071">
<path id="md-star" d="M59.3,72.1l3.274,1.975-.866-3.726L64.6,67.84l-3.81-.327L59.3,64,57.81,67.513,54,67.84l2.89,2.505-.866,3.726Z" transform="translate(-54 -64)" fill="#f7ca45"></path>
</svg>
</div>
<div class="testimonials__testimonial-container">
<div class="testimonials__author-info">
<div class="testimonials__author-image">
<img class="lazyload" src="/img/util/35mm_landscape.gif" data-src="/thumbs/90x90/smart/img/testimonials_agent.png" alt="photo">
</div>
<span class="testimonials__author">James Webb</span>
<span class="testimonials__author-location">St. Petersburg, FL</span>
</div>
<div class="testimonials__testimonial">
<span class="testimonials__text">"This agent was amazing and provided excellent service, would recommend to anyone looking to buy a property in the Los Angeles region."</span>
</div>
</div>
</div>
<!-- END OF SLIDE 1 -->
<!-- SLIDE 2 -->
<div>
<div class="testimonials__stars">
<svg width="10.595" height="10.071" viewbox="0 0 10.595 10.071">
<path id="md-star" d="M59.3,72.1l3.274,1.975-.866-3.726L64.6,67.84l-3.81-.327L59.3,64,57.81,67.513,54,67.84l2.89,2.505-.866,3.726Z" transform="translate(-54 -64)" fill="#f7ca45"></path>
</svg>
<svg width="10.595" height="10.071" viewbox="0 0 10.595 10.071">
<path id="md-star" d="M59.3,72.1l3.274,1.975-.866-3.726L64.6,67.84l-3.81-.327L59.3,64,57.81,67.513,54,67.84l2.89,2.505-.866,3.726Z" transform="translate(-54 -64)" fill="#f7ca45"></path>
</svg>
<svg width="10.595" height="10.071" viewbox="0 0 10.595 10.071">
<path id="md-star" d="M59.3,72.1l3.274,1.975-.866-3.726L64.6,67.84l-3.81-.327L59.3,64,57.81,67.513,54,67.84l2.89,2.505-.866,3.726Z" transform="translate(-54 -64)" fill="#f7ca45"></path>
</svg>
<svg width="10.595" height="10.071" viewbox="0 0 10.595 10.071">
<path id="md-star" d="M59.3,72.1l3.274,1.975-.866-3.726L64.6,67.84l-3.81-.327L59.3,64,57.81,67.513,54,67.84l2.89,2.505-.866,3.726Z" transform="translate(-54 -64)" fill="#f7ca45"></path>
</svg>
<svg width="10.595" height="10.071" viewbox="0 0 10.595 10.071">
<path id="md-star" d="M59.3,72.1l3.274,1.975-.866-3.726L64.6,67.84l-3.81-.327L59.3,64,57.81,67.513,54,67.84l2.89,2.505-.866,3.726Z" transform="translate(-54 -64)" fill="#f7ca45"></path>
</svg>
</div>
<div class="testimonials__testimonial-container">
<div class="testimonials__author-info">
<div class="testimonials__author-image">
<img class="lazyload" src="/img/util/35mm_landscape.gif" data-src="/thumbs/90x90/smart/img/testimonials_agent.png" alt="photo">
</div>
<span class="testimonials__author">Mark Hoffsman</span>
<span class="testimonials__author-location">St. Petersburg, FL</span>
</div>
<div class="testimonials__testimonial">
<span class="testimonials__text">"This agent was amazing and provided excellent service, would recommend to anyone looking to buy a property in the Los Angeles region."</span>
</div>
</div>
</div>
<!-- END OF SLIDE 2 -->
</div>
<div class="slick-arrows">
<svg data-slick-prev="" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewbox="0 0 32 32" xml:space="preserve" class="testimonial_slide_prev icon slick-arrow" style="">
<path d="M24.7,15.3H-0.5v-1.8h25.2c-1.1-2-1.7-4.2-1.8-6.5c2.5,3.7,7.4,7.4,8.6,7.4 c-1.2,0-6.2,3.7-8.6,7.4C23,19.5,23.6,17.3,24.7,15.3z M31.5,14.3L31.5,14.3z M31.5,14.3L31.5,14.3z"></path>
</svg>
<div class="slick-counter">
<span data-slick-current>1</span> / <span data-slick-total>1</span>
</div>
<svg data-slick-next="" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewbox="0 0 32 32" xml:space="preserve" class="testimonial_slide_next icon slick-arrow" style="">
<path d="M24.7,15.3H-0.5v-1.8h25.2c-1.1-2-1.7-4.2-1.8-6.5c2.5,3.7,7.4,7.4,8.6,7.4 c-1.2,0-6.2,3.7-8.6,7.4C23,19.5,23.6,17.3,24.7,15.3z M31.5,14.3L31.5,14.3z M31.5,14.3L31.5,14.3z"></path>
</svg>
</div>
</section>
Discovery Community
<section class="discover-community no-margin">
<div class="discover-community__image teaser__image">
<div class="img" role="img" style="background-image: url('Image Link Goes Here');" aria-label="Alt Tag Goes Here">
<div class="discover-community__button">
<a href="/Page Link Goes Here/" class="button button--large">
<span class="img__title">Banner Text Goes Here</span>
<div class="button-end">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" xml:space="preserve" class="icon">
<path d="M24.7,15.3H-0.5v-1.8h25.2c-1.1-2-1.7-4.2-1.8-6.5c2.5,3.7,7.4,7.4,8.6,7.4 c-1.2,0-6.2,3.7-8.6,7.4C23,19.5,23.6,17.3,24.7,15.3z M31.5,14.3L31.5,14.3z M31.5,14.3L31.5,14.3z"></path>
</svg>
</div>
</a>
</div>
</div>
</div>
<div class="discover-community__body">
<div class="discover-community__body-container">
<h2 class="discover-community__title teaser__title -mar-top-0">Title Text goes Here</h2>
<ul class="discover-community__list">
<li data-commimage="Image Link Goes Here" data-commtitle="Banner Wording before "Area Homes" Goes Here">
<a href="/Page Link Goes Here/">Table Link Goes Here</a>
</li>
<li data-commimage="/img/discover-image.webp" data-commtitle="Bel Air Estates">
<a href="/bel-air/bel-air-estates-homes-for-sale.php">Bel Air Estates</a>
</li>
<li data-commimage="/img/discover--miami-1.webp" data-commtitle="Bel Air Glen">
<a href="/bel-air/bel-air-glen-homes-for-sale.php">Bel Air Glen</a>
</li>
<li data-commimage="/img/discover-image.webp" data-commtitle="Bel Air Park">
<a href="/bel-air/bel-air-park-homes-for-sale.php">Bel Air Park</a>
</li>
<li data-commimage="/img/discover--miami-1.webp" data-commtitle="Bel Air Ridge">
<a href="/bel-air/bel-air-ridge-homes-for-sale.php">Bel Air Ridge</a>
</li>
<li data-commimage="/img/discover-image.webp" data-commtitle="Lower Casiano">
<a href="/bel-air/lower-casiano-homes-for-sale.php">Lower Casiano</a>
</li>
<li data-commimage="/img/discover--miami-1.webp" data-commtitle="Moraga Drive">
<a href="/bel-air/moraga-drive-homes-for-sale.php">Moraga Drive</a>
</li>
<li data-commimage="/img/discover-image.webp" data-commtitle="Moraga Estates">
<a href="/bel-air/moraga-estates-homes-for-sale.php">Moraga Estates</a>
</li>
<li data-commimage="/img/discover--miami-1.webp" data-commtitle="North Beverly Glen">
<a href="/bel-air/north-beverly-glen-homes-for-sale.php">North Beverly Glen</a>
</li>
</ul>
</div>
</div>
</section>
