Skip to content

Typography & Components

Header Typography

h1

h1.secondary

h1.accent

h2

h2.secondary

h2.accent

h2 linked

h2.secondary linked

h2.accent linked

h3

h3.secondary

h3.accent

h3 linked

h3.secondary linked

h3.accent linked

h4

h4.secondary

h4.accent

h4 linked

h4.secondary linked

h4.accent linked

h5
h5.secondary
h5.accent
linked
h5.secondary linked
h5.accent linked
h6
h6.secondary
h6.accent
h6 linked
h6.secondary linked
h6.accent linked

Text Styles

Body Text:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae purus maximus, blandit neque vehicula, vehicula augue. Morbi finibus arcu urna. Mauris non risus vitae metus cursus semper vel eget nunc. Morbi non tortor eget tortor dapibus ultricies. Aenean et dolor tristique, auctor enim eget, sagittis neque. Nam sodales turpis at lacinia fermentum. Aenean massa sapien, gravida vitae nibh ac, venenatis facilisis ligula. Mauris quis tempor ex. Nullam porta tortor gravida nibh aliquet maximus. Nullam massa libero, pulvinar ac porta sit amet, ultricies quis nunc. Ut eros nisl, vulputate id molestie et, lobortis a tellus.

Blockquote Text:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae purus maximus, blandit neque vehicula, vehicula augue. Morbi finibus arcu urna.

 

Link Styles

Default Link
Secondary Link
Emphasized Link
Secondary Emphasized Link

 

Button Styles

Button

Button Secondary

Button Transposed

Button Transposed Secondary

Button Outline

Button Outline Secondary

Button Transposed Outline

Button Transposed Outline Secondary

Default Modules

HubSpot provides built-in modules that allow you to drag and drop them into your website pages for an additional layer of customization. I've dropped them all below as "out of the box" so you can visualize what those would look like on a website page. 

Rich Text Section

Tell The Reader More

The headline and subheader tells us what you're offering, and the form header closes the deal. Over here you can explain why your offer is so great it's worth filling out a form for.

Remember:

  • Bullets are great
  • For spelling out benefits and
  • Turning visitors into leads.

Sample Section Heading

A more subdued section subheading.

One line of text: Below you will find an example of the divider. By default, it is set to 1px thick and 50% wide.
placeholder_200x200
placeholder_200x200
placeholder_200x200

Sample Form
  • There are no suggestions because the search field is empty.

Growth Theme Modules

The Growth Theme comes with a few Theme-Specific Modules that will allow you a little more flexibility in your website pages. I've dropped them all here as "out of the box" so you can visualize what those would look like on a website page. 

Accordion title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tempor arcu non commodo elementum.

Accordion title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tempor arcu non commodo elementum.

Image Gallery with columns (4 columns shown below)

A group of coworkers talking in a recreational space

A caption that describes the image.

A group of coworkers talking in a recreational space

A caption that describes the image.

A group of coworkers talking in a recreational space

A caption that describes the image.

A group of coworkers talking in a recreational space

A caption that describes the image.

A group of coworkers talking in a recreational space

A caption that describes the image.

A group of coworkers talking in a recreational space

A caption that describes the image.

  • Fully Customizable List

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tempor arcu non commodo elementum.

  • With Ordered and Unordered Options

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tempor arcu non commodo elementum.

  • And Customizable Icons

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tempor arcu non commodo elementum.

OFFER CARD: Drive people to your products and services

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tempor arcu non commodo elementum.

Learn more

Pricing Card Module: Product

$50/month

Some key features
  • Lorem ipsum dolor sit amet, consectetur
  • Lorem ipsum dolor sit amet, consectetur
  • Lorem ipsum dolor sit amet, consectetur
Buy starter now

Service Card Module

Summarize the service you provide. Add a message about the value that you can provide to your customers.

square-image-placeholder-1

Speaker Card Module

Works best in multiple Column Layout

A place where you can put your speaker/employee/partner biography. You can also add an image to this card (as shown above). 

I recommend this module in at least a 2-column layout so that the images render correctly. 

square-image-placeholder-1

Speaker Name

Employee #2 Title

A place where you can put your speaker/employee/partner biography. You can also add an image to this card (as shown above). 

I recommend this module in at least a 2-column layout so that the images render correctly. 

Employee Name

Job Title, Department

Another biography space for this employee or speaker.

I've gone ahead and removed this card's image.

Just to show you that the text does change when a new tab is selected...

"This is the testimonial module - where you can showcase how much your clients and customers love the work you do!"
A photo of Shaun Benson, Marketing Manager, Agriflora Inc.
You can also add a name and photo if you want, image is optional. 
"Here's that testimonial module again - simplified."
This one has no image. We could take it one step further and remove this content / Name box as well. 
"One step further."