Style Guide

NOTE: The following CSS selectors will not work in emails.

Colors

white

black

orange

purple

blue

green

yellow

light-grey

grey

dark-grey

Usage

CSS Class	Description
.color--$color .all--color--$color	Overrides text color of object
.background--$color	Applies specified background color to element

Headings

H1 - Page Header

The quick brown fox jumps over the lazy dog.

H2 - Section Header

The quick brown fox jumps over the lazy dog.

H3 - Page or Section Subheader

The quick brown fox jumps over the lazy dog.

H4 - Content Header

The quick brown fox jumps over the lazy dog.

H5 - Content Subheader

The quick brown fox jumps over the lazy dog.

H6 - Content Subheader

The quick brown fox jumps over the lazy dog.

P - Paragraph Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dolor ipsum, cursus vitae dapibus sit amet, tristique vitae mi. Mauris eros magna, aliquam a faucibus at, gravida vel dui. Quisque sit amet dapibus libero. Integer quis nisi non arcu lobortis sodales.

Button Colors

white
btn btn--white white
btn btn--transparent--white

black
btn btn--black black
btn btn--transparent--black

orange
btn btn--orange orange
btn btn--transparent--orange

purple
btn btn--purple purple
btn btn--transparent--purple

blue
btn btn--blue blue
btn btn--transparent--blue

green
btn btn--green green
btn btn--transparent--green

yellow
btn btn--yellow yellow
btn btn--transparent--yellow

light-grey
btn btn--light-grey light-grey
btn btn--transparent--light-grey

grey
btn btn--grey grey
btn btn--transparent--grey

dark-grey
btn btn--dark-grey dark-grey
btn btn--transparent--dark-grey

Button Modifiers

Narrow Button btn btn--wide btn--$color

Wide Button btn btn--wide btn--$color

Large Button btn btn--large btn--$color

Small Button btn btn--small btn--$color

Pill Button btn btn--pill btn--$color

Additional Modifiers

CSS Class

Description

.all--$selector

Prepend any of the "btn" CSS clases with "all--" to apply their styles to HubSpot CTAs or HubSpot form submit buttons within the selector. Use this when CSS selectors cannot be directly applied to the desired element.

(Example: Apply class "all--btn all--btn--orange" to an element which contains a HubSpot form to make the form's submit button into an orange button.)