Style Guide

This is a template designed to demonstrate the site's global settings set within the Theme Settings. The following sections will showcase the global text, buttons, and form styling as well the modules and sections available in the theme.

This Style Guide template should NOT be used for creating a page.

Typography

H1: The Quick Brown Fox Jumps Over The Lazy Dog.

H2: The Quick Brown Fox Jumps Over The Lazy Dog.

H3: The Quick Brown Fox Jumps Over The Lazy Dog.

H4: The Quick Brown Fox Jumps Over The Lazy Dog.

H5: The Quick Brown Fox Jumps Over The Lazy Dog.
H6: The Quick Brown Fox Jumps Over The Lazy Dog.

Subeadline: The Quick Brown Fox Jumps Over The Lazy Dog.

Eyebrow: The Quick Brown Fox Jumps Over The Lazy Dog.

Body: The Quick Brown Fox Jumps Over The Lazy Dog.

Link: The Quick Brown Fox Jumps Over The Lazy Dog.

Light Background

Efficiency And Optimization

Subheadline text goes here lorem ipsum dolor.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis.

  • Bullet Lorem Ipsum
  • Bullet Lorem Ipsum
  • Bullet Lorem Ipsum
  • Bullet Lorem Ipsum

Drop Us a Line

Dark Background

Efficiency And Optimization

Subheadline text goes here lorem ipsum dolor.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis.

  • Bullet Lorem Ipsum
  • Bullet Lorem Ipsum
  • Bullet Lorem Ipsum
  • Bullet Lorem Ipsum

Drop Us a Line

Modules

The following are all the modules available in this theme, in their default state (not including modules that do not render visible content)

Button

Custom call to action buttons.

Call to Action Box

A styled box that includes call to action text and button.

Framework Will Help You Grow Your Business With Little Effort.

Case Study Slider

A full width two-column slider of case studies with image in one column and text in the other.

Case Study

How Framework Helped Company One Business Grow

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita

Case Study

How Framework Helped Company Two Business Grow

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita

Case Study

How Framework Helped Company Three Business Grow

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita

Case Study

How Framework Helped Company Four Business Grow

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita

Collapsible Text

List of collapsible items for condensing content.

YOU MAY NEED TO KNOW

Frequently Asked Questions

Lorem ipsum dolor sit amet, consectetuer adipiscing elit?

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas auguae, eu vulputate magna eros eu erat. Aliquam erat volutpat.

Donec nec justo eget felis facilisis fermentum?

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas auguae, eu vulputate magna eros eu erat. Aliquam erat volutpat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit?

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas auguae, eu vulputate magna eros eu erat. Aliquam erat volutpat.

Donec nec justo eget felis facilisis fermentum?

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas auguae, eu vulputate magna eros eu erat. Aliquam erat volutpat.

Comparison Table

A table to compare features of different products or product levels.

Plan Features

What's The Best Fit

Basic (Most Popular) Standard Enterprise
Feature Comparison Item Lorem
Feature Comparison Item
Feature Comparison Item Lorem
Feature Comparison Item Limited Monthly Unlimited
Feature Comparison Item Lorem Limited Monthly Unlimited

Counter

Animated numerical stats that count up to the desired number.

Cups of coffee consumed yearly

%

Remote company

Team members

Average Wordle score

Feature Cards

A set of cards with image, text, and link to feature services, products, etc.

A Modern, Flexible Drag And Drop Theme

Lorem ipsum dolor sit amet dolor, elit consectetuer adipiscing elit. Nullam malesuada erat ut.

Clean Professional Design

Lorem ipsum dolor sit amet dolor, elit consectetuer adipiscing elit. Nullam malesuada erat ut.

Generate More Leads

Lorem ipsum dolor sit amet dolor, elit consectetuer adipiscing elit. Nullam malesuada erat ut.

Feature Items

A set of featured items such as benefits, services, etc. Each item can include an icon, text, and CTA.

Hero - Contact

A hero including location and contact information.

Fill Out Form Below

Contact Us

Need to Talk to One of Our Experts?

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore.

Office Location
301 Lamberton Drive | West Palm Beach, FL | 33401-4851

Office Hours:
Mon-Fri 9am-5pm

Phone:
561.867.5309

Hero - Two Column

Two column hero with options to add text on one side and an image, form, or video on the other side. Set this module's section's Content Alignment to Full Width
Placeholder Image

Built For You. All In One.

Driving Leads for SaaS and Tech Companies

Stand out from the crowd today, with a design framework that almost makes it too easy to create beautiful content.

Logos

A row of logos. Can be turned into a slider by setting a number in the layout's "Number of logos to show at a time" field that is lower than the number of logos you upload.

Add Some Cool Logos

  • Slack
  • Google
  • Slack
  • Slack
  • Google

Pricing Boxes

Informational boxes for product pricing.

Find the Right Plan

Pricing Plans

Starter

Perfect for Starters


Free

For a Lifetime

Professional

Best For Large Teams


$99.99

Yearly

Progress Bar

Adds a bar below the header showing the scroll progress of the page. (Example will show attached to the bottom of the header navigation instead of below this text.)

Resource Listing

Filterable and searchable listing of resources.

Social Follow

Icon links to social media pages.

Social Sharing

Icon links to share page to social media.

Tabbed Content

Images that can be clicked through using a tab list of captions.

Growth Driven

Tabbed Module For Beautiful Content Creation

Team Listing

List out team members with their name, title, social links, and profile image.

The Team

Meet Our Experts

Sam Malone

CEO & Founder

Diane Chambers

VP of Operations

Carla Tortelli

Senior Developer

Woody Boyd

Support

Testimonials Slider

A full width two-column slider of testimonials with image in one column and quote text in the other.

Be a Winner

What Our Clients Are Saying

A clean, professional design that helped us generate more leads!

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.

Frankie Frankes
CEO of Company

A clean, professional design that helped us generate more leads!

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.

Frankie Frankes
CEO of Company

A clean, professional design that helped us generate more leads!

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.

Frankie Frankes
CEO of Company

Testimonials Static

Simple testimonials in columns.

Be a Winner

What Our Clients Are Saying

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea

Frankie Franks
CEO of Company

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea

Frankie Franks
CEO of Company

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea

Frankie Franks
CEO of Company

Text and Image Columns

Quickly create two columns with text and an image.

Get Started

With Framework, It's Getting Easier To Make Your Business Look Good

Grow Your Business
Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

The Complete Design Solution
Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Beautiful Content in Minutes
Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Theme Form

A form module with extra options not available in HubSpot's default module.

Drop Us a Line

Theme Image

An image module with extra styling options not available in HubSpot's default module.

Theme Rich Text

A rich text module with extra styling options not available in HubSpot's default module.

Use Platform

Efficiency And Optimization

Subheadline text goes here lorem ipsum dolor.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis.

  • Bullet Lorem Ipsum
  • Bullet Lorem Ipsum
  • Bullet Lorem Ipsum
  • Bullet Lorem Ipsum

Full Width Two Columns

Two columns that span the entire width of a section. Includes text and an image with left or right placement.

Let's Get Started

Built For You. All in One.

Ready to Generate More Leads?

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore.
  • Lorem ipsum dolor sit amet consectetuer
  • Lorem ipsum dolor sit amet consectetuer
  • Lorem ipsum dolor sit amet consectetuer

Sections

The following are all the saved sections available in this theme (not including blog-specific sections).

Call to Action Banner

Full width section calling out text and call to action button.

We're Always Looking For New Talent

Let's make a difference together!

Callout Text

An eyebrow and heading with 20px top and bottom padding to standout from the rest of the text around it.

Where are we now

Callout text for some highlights on the project sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Checkmark List

Text block with a list styled with checkmark image bullets.

The Results

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

  • 95% lorem ipsum dolor sit amet consectetuer

  • Lorem ipsum dolor sit amet +10 consectetuer

  • Over 150% Lorem ipsum dolor sit amet consectetuer

  • Lorem ipsum dolor sit amet consectetuer

FAQ with Left Header

A set of boxed-in FAQ items with a left side header.

We Have Answers

Frequently Asked Questions

Here are some of the most frequently asked questions we receive and their answers, all gathered in one place.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit?

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas auguae, eu vulputate magna eros eu erat. Aliquam erat volutpat.

Donec nec justo eget felis facilisis fermentum?

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas auguae, eu vulputate magna eros eu erat. Aliquam erat volutpat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit?

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas auguae, eu vulputate magna eros eu erat. Aliquam erat volutpat.

Donec nec justo eget felis facilisis fermentum?

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas auguae, eu vulputate magna eros eu erat. Aliquam erat volutpat.

Hero - Case Study

Hero for a case study page with title, social share, image, and counter.

Case Study

How Framework Helped Company Name Business Grow

%

Impressive stat goes here

Impressive stat goes here

Impressive stat goes here

+

Impressive stat goes here

Hero - Overhanging Content

Hero with simple heading and boxed in two column content that overhangs the hero.

Meet the Minds

About Our Company

Our Story

We Enable All People To Be Engaged At Work

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis.

Manual Related Resources

Manually added set of three related resources.

Project Info

Project info like company name/website and services provided.

Company Name

Services we provided:

  • Lorem ipsum dolor
  • Aliquam tincidunt
  • Vestibulum auctor dapibus
  • Nunc dignissim risus

companywebsite.com

Quote

A standout block of text for calling out a quote.

Framework is a modern, flexible and powerful theme that helped us create a unique and memorable website to share our message with the world.

Frankie Franks
CEO of Company

Recent Posts

A showcase of recent blog posts.

Simple Text with Image

Simple text block followed by an image.

The Solution

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Simple Text

Simple text block with a heading.

Project Overview

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Subscription Banner - Accent Background

Banner with a header and form for calling out a subscription with alternate accent background.

Don't Miss Another Update

Join our newsletter to stay in the know

Subscription Banner - Medium Light Background

Banner with a header and form for calling out a subscription.

Don't Miss Another Update

Join our newsletter to stay in the know

Testimonials Slider

A testimonial slider with background image.

Be a Winner

What Our Clients Are Saying

A clean, professional design that helped us generate more leads!

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.

Frankie Frankes
CEO of Company

A clean, professional design that helped us generate more leads!

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.

Frankie Frankes
CEO of Company

A clean, professional design that helped us generate more leads!

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.

Frankie Frankes
CEO of Company

Testimonials Static

A set of three static testimonials on a light background.

Be a Winner

What Our Clients Are Saying

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea

Frankie Franks
CEO of Company

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea

Frankie Franks
CEO of Company

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea

Frankie Franks
CEO of Company

Two Column - Image Right

Two columns with text on the left and image on the right.

Use Platform

A Modern, Flexible Theme That Lets You Create Beautiful Content In Just Minutes

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis.

Two Columns Text

Two columns with text topped by an image.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.