Utility Classes & Typography

Colors

This design set uses this color palette. To edit, go to Manage > Settings > Global Styles> Colors

primary
primary 2
primary 3
primary translucent
primary transparent
secondary
secondary 2
secondary 3
secondary
translucent
secondary transparent
black
white
gray 1
gray 2
black translucent
black transparent

Typography

This design set uses the standard CSS for headings, To update the headings, go to Manage > Stylesheet > Typography

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

This is a paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi bibendum ipsum est, at auctor quam eleifend sed. Mauris purus mauris, malesuada eget interdum quis, euismod quis augue. Cras auctor lacus ut arcu rhoncus, vitae egestas risus condimentum. Nullam id molestie erat. Aliquam et risus a nisl ultrices varius. Pellentesque vitae consequat ante. In nec nunc in ligula semper venenatis. Donec eu est sapien. Ut imperdiet mollis risus id commodo. Praesent suscipit sapien ut scelerisque pulvinar. Aenean mollis, ligula vel ullamcorper cursus, risus dolor interdum eros, non vehicula nisi nunc et felis.

Font Family & Font Weights

This design only uses the following font families and font weights. To edit, go to Manage > Settings > Global Styles> Fonts

Display Font: Raleway (used for headings)
Enabled font weights: regular, 700, 900

Text Font: Nunito (used for paragraphs & blurbs)
Enabled font weights & styles: regular, italic, 700, 700 italic

Other Typography Classes

This design set only uses the FS classes from the standard typography in the design set. To find all standard typography classes go to Manage > Stylesheet > Typography 

fs-1

fs-2

fs-3

fs-4

fs-4

fs-6

fs-7

Buttons and other Design Classes

btn (Primary button)

use case dark & light background section

ter-btn (tertiary button)

use case light background section

box-shadow

**boder radius used for boxes (10px)

text-highlight

use case pre-header

curved-seperator

use case highlight-heading

secondary button

use case dark background section

Global Reusables

Global Services Section

Components:
- h2
- paragraph text enlarged
- dynamic service divs using parent page id to populate the data

Eget urna, laoreet posuere sit id quam etiam id scelerisque. Sit non est gravida etiams.

Auctor cursus egestas sapien, eget. Ac orci amet, massa, aliquet massa scelerisque ipsum pellentesque.

Global Locations Section

Components:
- h2
- paragraph text enlarged
- dynamic location divs using parent page id to populate the data
- map using custom fields (if section is needed, ACF must be set accordingly kindly ask export file from manager)

Eget urna, laoreet posuere sit id quam etiam id scelerisque. Sit non est gravida etiams.

Auctor cursus egestas sapien, eget. Ac orci amet, massa, aliquet massa scelerisque ipsum pellentesque.

Global Team Section

Components:
- h2
- 4 col div with team member image, name & position each

Meet the team

Tessa Perrault

Curabitur ac ex quis lacus

John Minter

Curabitur ac ex quis lacus

Jonathan Speer

Curabitur ac ex quis lacus

Hilton Garza

Curabitur ac ex quis lacus

Global Stat Section (Static)

Components:
- 4 col stat boxes
- static stat h3
- paragraph text stat label

25+

Years of Experience

35

Amazing employees

10k+

Hours of maintenance

2k+

Projects done

Global Page Title

Components:
- section with background image
- h1 with page title dynamically pulled from post/page

Design Components

Global Testimonial Section

Components:
- h2
- paragraph text enlarged 
- 3 col div with icon, testimonial message, star rating and customer name
- CTA button linked to google reviews or testimonial page

Testimonials

Eat imagine you chiefly few facts complete. Be visitor females upsell inquiry. Latter law remark two.

Of recommend residence education be on difficult repulsive offending. Judge views.

IREN OYSTER

Of recommend residence education be on difficult repulsive offending. Judge views.

IREN OYSTER

Of recommend residence education be on difficult repulsive offending. Judge views.

IREN OYSTER

MORE TESTIMONIALS

Design Set Blocks

Dynamic Blog Post Section with Sticky Side Bar

Use Case: Single Blog Post Template
Components:
- CSS Code for styling content from default editor
- Date (dynamic)
- Fallback Image if Featured image is blank (**delete if not needed or add a new fallback image from site media library)
- Featured Image Dynamically pulled from post
- Post Content Dynamically pulled from default editor
- Sticky Sidebar Section
- Negative Margin to overlap page title section

February 8, 2022

This is content from the default editor

We offer free XXXX!

Lorem ipsum dolor sit amet, consectetur adipiscing elit

book appointment

Covering residential and commercial needs

KNOW MORE ABOUT OUR SERVICES

Intro text

Use Case: Can add to any inner page that is not using a template
Components: 
- h2
- paragraph text enlarged

Eget urna, laoreet posuere sit id quam etiam id scelerisque. Sit non est gravida etiams.

Auctor cursus egestas sapien, eget. Ac orci amet, massa, aliquet massa scelerisque ipsum pellentesque.

Intro text with image and buttons

Use Case: Can add to any inner page that is not using a template
Components: 
- image
- h2
- paragraph text
- 2 buttons

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc feugiat, sem vitae iaculis semper, justo risus pharetra dui, at lacinia leo erat vitae est. Donec nec turpis enim. Nunc nec magna ac lacus pellentesque euismod. Praesent sapien turpis, tincidunt ac leo sit amet, pharetra fringilla ex. Fusce fringilla pulvinar tellus, ut fringilla tortor euismod nec. Aliquam in interdum nunc. Praesent congue facilisis sem. Nulla elementum orci libero, sed congue mauris ultricies sed. Aliquam nec quam neque. Aliquam diam eros, porttitor feugiat urna ut, vestibulum iaculis felis.

FAQs Section

Use Case: Can add to FAQs page or  to any inner page or template
Components: 
- image div
- h2
- paragraph text
- accordions

Frequently asked questions.

Malesuada velit et ut malesuada amet tempor velit dui. Nullam amet commodo gravida gravida.

Curabitur non nulla sit amet nisl tempus?
Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.
Quam at scelerisque in velit nisl ultrices neque fames?
Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.
Curabitur arcu erat, accumsan id imperdiet et?
Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.
Vestibulum ac diam sit amet quam vehicula?
Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.

Page Banner

Use Case: Can add to any inner page or template
Components: 
- section with background image with overlay
- pre-heading
- h2
- cta button

About Us

Highly skilled certified XXXX guaranteed.

NEED HELP WITH XXX?

Hero Banner with CTA and Contact Form

Use Case: Added as a hero section
Components: 
- 2 column section
- div with background image
- contact form shortcode
- pre-heading
- h1
- cta button
- cta button with image and phone number

Your heating and cooling experts in Aurora, CO

Live in Comfort All Year Long

need help with XXXX?

Services Feature

Use Case: Featured in the homepage
Components: 
- 3 column service divs that can be linked to the individual service page
- section with background image
- contact form shortcode
- h2
- paragraph text enlarged
- cta button
- text link

We strive for excellence in everything we do.

Massa euismod laoreet faucibus cras non amet.

NEED HELP WITH XXX?view all services

About Us Feature 3 Columns with button

Use Case: Featured in the homepage
Components: 
- 3 columns
- h2
- paragraph text
- cta button for about page
- 2 USP feature divs with paragaph heading & curved separator each

Cras ultricies ligula sed magna dictum.

Pharetra sit pellentesque pellentesque pharetra viverra tempus quisque.

Learn more about us

Unique Selling Point 1

Unique Selling Point 2

database