Style Guide

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


Colors

white

black

darkergrey

darkgrey

midgrey

lightgrey

darkblue

blue

lightblue

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.

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

darkergrey
btn btn--darkergrey
     darkergrey
btn btn--transparent--darkergrey

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

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

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

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

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

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

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

Info

We use cookies to personalize content and ads and to analyze our traffic.

We also share information about your use of our site with our advertising and analytics partners. See details.