Style Guide

Monochromatic Color

  • Black

    #222
  • Gray 400

    #4a484a
  • Grey 350

    #737373
  • Grey 300

    #8e8e8e
  • Grey 100

    #eee
  • Grey 000

    #f7f7f7
  • White

    #fff

Alert Color

  • Info

    #3c8227
  • Info Hover

    #218f00
  • Success

    #3c8227
  • Success Hover

    #218f00
  • Warning

    #ef6c00
  • Warning Hover

    #f57c00
  • Error

    #d84315
  • Error Hover

    #e64a19

Social Media Colors

  • Facebook

    #1877f2
  • Twitter

    #1b95e0
  • Google

    #ebebeb
  • LinkedIn

    #0077b5
  • Yahoo

    #410093

Font Families

Serif: The quick brown fox jumps over the lazy dog

font-family: 'Playfair Display', TimesNewRoman, Times New Roman, Times, Baskerville, Georgia, serif;'

Sans Serif: The quick brown fox jumps over the lazy dog

font-family: 'Poppins', Arial, "Helvetica Neue", Helvetica, sans-serif;'

h1 Headline Example

h1 {
font-family: 'Playfair Display', Georgia, serif;
text-transform: uppercase;
font-size: 3.5rem;
line-height: 1.1;
margin-top: 64px;
margin-bottom: 40px;
}

h2 Headline Example

h2 {
font-family: 'Playfair Display', Georgia, serif;
font-size: 2.625rem;
line-height: 1.2;
letter-spacing: -1px;
margin-top: 64px;
margin-bottom: 32px;
}

h3 Headline Example

h3 {
font-family: 'Playfair Display', Georgia, serif;
font-size: 2.125rem;
line-height: 1.3;
letter-spacing: -1px;
margin-top: 48px;
margin-bottom: 24px;
}

h4 Headline Example

h4 {
font-family: 'Playfair Display', Georgia, serif;
text-transform: uppercase;
font-size: 1.875rem;
line-height: 1.2;
margin-top: 48px;
margin-bottom: 24px;
}
h5 Headline Example
h5 {
font-family: 'Playfair Display', Georgia, serif;
text-transform: uppercase;
font-size: 1.625rem
line-height: 1.3;
margin-top: 48px;
margin-bottom: 24px;
}
h6 Headline Example
h6 {
font-family: 'Poppins', Arial, Helvetica, sans-serif;'
text-transform: uppercase;
font-weight: 700;
font-size: 0.8125rem;
line-height: 1.5;
letter-spacing: 1px;
margin-top: 16px;
margin-bottom: 16px;
}

Unordered List

  • List Item one
  • List Item two
  • List Item three

Ordered List

  1. List Item one
  2. List Item two
  3. List Item three

Highlight

Element with class="highlight". This condo has it all! Features include superb hardwoods, exercise pool, Large eat-in Island & two wood burning fireplaces plus potential for a mortgage helper on the lower level.

Important

Element with class="important". This condo has it all! Features include superb hardwoods, exercise pool, Large eat-in Island & two wood burning fireplaces plus potential for a mortgage helper on the lower level.

Buttons

Layouts

Two Column

Sub Heading One

Heading Column One

This content is an example of content that could be placed for different column or grid layouts.

Sub Heading Two

Heading Column Two

This content is an example of content that could be placed for different column or grid layouts.

Three Column

Sub Heading One

Heading Column One

This content is an example of content that could be placed for different column or grid layouts.

Sub Heading Two

Heading Column Two

This content is an example of content that could be placed for different column or grid layouts.

Sub Heading Three

Heading Column Three

This content is an example of content that could be placed for different column or grid layouts.

Four Column

Sub Heading One

Heading Column One

This content is an example of content that could be placed for different column or grid layouts.

Sub Heading Two

Heading Column Two

This content is an example of content that could be placed for different column or grid layouts.

Sub Heading Three

Heading Column Three

This content is an example of content that could be placed for different column or grid layouts.

Sub Heading Four

Heading Column Four

This content is an example of content that could be placed for different column or grid layouts.

Two by Two Grid

Sub Heading One

Grid Heading Column One

This content is an example of content that could be placed for different column or grid layouts.

Sub Heading Two

Grid Heading Column Two

This content is an example of content that could be placed for different column or grid layouts.

Sub Heading Three

Grid Heading Column Three

This content is an example of content that could be placed for different column or grid layouts.

Sub Heading Four

Grid Heading Column Four

This content is an example of content that could be placed for different column or grid layouts.

Snippets Call to action

Join CTA

Are you an agent?

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 More

Agent CTA

Replace this photo with your own

Contact us today to help you with your next home

Get in touch

Subscribe CTA

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

Start searching for your dream home now.

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

Start Search

List of Communities CTA

Seller's CTA

What's your home worth?

Get a FREE Comparative Market Analysis in today's market.

Search CTA

Technology to fit you

At home or on the go, listings are always with you.

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

Start Searching

Responsive Table

Table headline oneTable headline twoTable headline threeTable headline four
Table body content Table body content Table body content Table body content
        .table--bordered Add this class table element to display a border bottom.
        .table--scroll Add this class to a div element as the parent of the table element. To modify a
        table to display a horizontal scroll.
    

FAQ

#example-faq#