Style Guide

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

Colors

white

black

blue

navy

green

orange

turquoise

default

lightgrey

midgrey

darkgrey

lightblue

darkblue

middleblue

purple

yellow

opaque

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

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

navy
btn btn--navy navy
btn btn--transparent--navy

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

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

turquoise
btn btn--turquoise turquoise
btn btn--transparent--turquoise

default
btn btn--default default
btn btn--transparent--default

lightgrey
btn btn--lightgrey lightgrey
btn btn--transparent--lightgrey

midgrey
btn btn--midgrey midgrey
btn btn--transparent--midgrey

darkgrey
btn btn--darkgrey darkgrey
btn btn--transparent--darkgrey

lightblue
btn btn--lightblue lightblue
btn btn--transparent--lightblue

darkblue
btn btn--darkblue darkblue
btn btn--transparent--darkblue

opaque
btn btn--opaque opaque
btn btn--transparent--opaque

middleblue
btn btn--middleblue middleblue
btn btn--transparent--middleblue

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

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

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.)