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

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

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