Layout

Headers & Text

Lorem ipsum dolor sit amet

H1

Lorem ipsum dolor sit amet

H2

Lorem ipsum dolor sit amet

H3

Lorem ipsum dolor sit amet

H4

Lorem ipsum dolor sit amet

H5

Lorem ipsum dolor sit amet

H6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

Suspendisse cursus dolor nec libero placerat, et consectetur est aliquet. Etiam lacus nisl, sodales a convallis quis, placerat ac neque. Aenean tempus varius sem vitae dapibus.

Default - Body / Paragraphs / Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

Suspendisse cursus dolor nec libero placerat, et consectetur est aliquet. Etiam lacus nisl, sodales a convallis quis, placerat ac neque. Aenean tempus varius sem vitae dapibus.

Large - Body / Paragraphs / Text

Lorem ipsum dolor sit amet

Block Quote

This is some text inside of a div block.

Label

Text Link

Lorem ipsum
Dolor sit
Amet consectetur

ordered List & List items

Lorem ipsum
Dolor sit
Amet consectetur

Unordered List & List items

Image

Blog Post Headers

This is an H1

This is an H2

This is an H3

This is an H4

This is an H5

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

H1

Buttons & Other CTA's

Button - DEFAULT (NOT TO BE USED)

Button - Full Width Button

Primary Button

Secondary Button

Tertiary Button

Primary Button - Inverse

Secondary Button - Inverse

Tertiary Button - Inverse

Forms

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Form Field

Form Field

Colors

Brand Primary

This is the default text color inside of this background color

Martinique

This is the default text color inside of this background color

Pale Sky

This is the default text color inside of this background color

Cloud

Brand Secondary

This is the default text color inside of this background color

Persimmon

This is the default text color inside of this background color

Leaf

This is the default text color inside of this background color

Dogwood

This is the default text color inside of this background color

Sky Light

Layout / Structure

Columns

NOTE: Each column should have an inner "wrapper-div" with a class of .section-inner-wrap to inherit the proper spacing.

1-Column

Some Content Goes Here

2-Column

Column 1

Column 2

3-Column

Column 1

Column 2

Column 3

Stacking

Stack columns:

No stack (Doesn't stack at any breakpoint)

Column 1

Column 2

On tablet & mobile, .stacked-tablet-mobile

Column 1

Column 2

Only on mobile, .stacked-mobile

Column 1

Column 2

2 - Column Layout

Column Order

Reverse the order in which columns appear at different breakpoints. This may be useful when you want the elements on the page to be a specific order on desktop but be displayed in reverse order on mobile.

Reverse display order:

On all breakpoints, .reverse

1

2

Only on desktop, .reverse-desktop

1

2

Only on tablet, .reverse-tablet

1

2

Only on mobile, .reverse-mobile

1

2

On desktop & tablet, .reverse-desktop-tablet

1

2

On tablet & mobile, .reverse-tablet-mobile

1

2

3 - Column Layout

Element Visibility

Set breakpoint visibility

Hide element on a specific breakpoints

.hidden-desktop

CONTENT

.hidden-tablet

CONTENT

.hidden-mobile

CONTENT

Hide element on multiple breakpoints

.hidden-desktop-tablet

CONTENT

.hidden-tablet-mobile

CONTENT

Element visibility

Content Width

Set width of content wrappers.

Set content width

.w-100

CONTENT

.w-80

CONTENT

.w-75

CONTENT

.w-50

CONTENT

.w-25

CONTENT

.w-20

CONTENT

Element visibility

Complex Components & Snippets

Address Input

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Address Input

Our valuations are 40% more accurate than other leading estimates.

<div class="shortcode---address-input">
  <h5 class="shortcode---header">
	  <!-- Replace the text below -->	
  	Get a Free Valuation
    <!---------------------------->
  </h5>
  
  <p class="shortcode---description">
	  <!-- Replace the text below -->
  	Our valuations are 40% more accurate than other leading estimates.
    <!---------------------------->
  </p>
  
  <!-- Address Input Form -->
  <div class="intake-address-input-form-wrap w-form">
    <form 
    	id="wf-form-AddressInputForm" 
    	name="wf-form-AddressInputForm" 
      data-name="AddressInputForm" 
      class="address-input-form">
      
      <input 
      	class="form-control address-input w-input" 
        maxlength="256" 
        name="name" 
        data-name="Name" 
        placeholder="Enter home address..." 
        type="text" 
        id="AddressInput">
        
      <input 
      	type="submit" 
        data-wait="" 
        class="button button-icon-forward button-primary w-button" 
        value=" ">
    </form>
  </div>
</div>

Our valuations are 40% more accurate than other leading estimates.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.