One team, no handoffs
Start a project

Style Guide

This style guide page contains styles and components that are to be used throughout a website.

layout classes

Defined and flexible core layout we can use on all or most pages.

page-wrapper
main-wrapper
max-width-1col
max-width-2col
max-width-3col
max-width-4col
max-width-5col
max-width-6col
max-width-7col
max-width-8col
max-width-9col
max-width-10col
max-width-11col
max-width-12col
max-width-3xsmall
max-width-2xsmall
max-width-xsmall
max-width-small
max-width-medium
max-width-semi-large
max-width-large
max-width-xlarge
max-width-2xlarge
max-width-3xlarge
max-width-4xlarge
max-width-5xlarge
max-width-6xlarge
container-max
container-min
padding-global
padding-section

Headings

The different heading styles used throughout the site.

heading-style-h0

Sample text is being used as a placeholder.

H1

Sample text helps you understand how real text may look. Sample text is being used as a placeholder.

heading-style-h1

Sample text helps you understand how real text may look. Sample text is being used as a placeholder.

H2

Sample text is being used as a placeholder. Sample text helps you understand how real text may look.

heading-style-h2

Sample text is being used as a placeholder. Sample text helps you understand how real text may look.

H3

Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.

heading-style-h3

Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.

H4

Sample text is being used as a placeholder. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present.

heading-style-h4

Sample text is being used as a placeholder. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present.

H5
Sample text is being used as a placeholder. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look.
heading-style-h5
Sample text is being used as a placeholder. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look.
H6
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look.
heading-style-h6
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look.

Other HTML Tags

HTML tags define default text styles.

All paragraphs

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

All links
All Links
All quotes
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website.
All Ordered Lists
  1. Sample text is being used as a placeholder for real text that is normally present.
  2. Sample text is being used as a placeholder for real text that is normally present.
  3. Sample text is being used as a placeholder for real text that is normally present.
All Unordered Lists
  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.

Typography Classes

The different typography classes used throughout the site.

Text Sizes

text-size-10xlarge

Sample text.

text-size-9xlarge

Sample text.

text-size-8xlarge

Sample text as a placeholder.

text-size-7xlarge

Sample text as a placeholder.

text-size-6xlarge

Sample text is being used as a placeholder.

text-size-5xlarge

Sample text is being used as a placeholder.

text-size-4xlarge

Sample text is being used as a placeholder.

text-size-3xlarge

Sample text is being used as a placeholder for real text that is normally present.

text-size-2xlarge

Sample text is being used as a placeholder for real text that is normally present.

text-size-xlarge

Sample text is being used as a placeholder for real text that is normally present.

text-size-large

Sample text is being used as a placeholder for real text that is normally present.

text-size-medium

Sample text is being used as a placeholder for real text that is normally present.

text-size-regular

Sample text is being used as a placeholder for real text that is normally present.

text-size-small

Sample text is being used as a placeholder for real text that is normally present.

text-size-xsmall

Sample text is being used as a placeholder for real text that is normally present.

text-size-2xsmall

Sample text is being used as a placeholder for real text that is normally present.

text-size-3xsmall

Sample text is being used as a placeholder for real text that is normally present.

text-size-4xsmall

Sample text is being used as a placeholder for real text that is normally present.

Text Styles

text-style-strikethrough

text-style-strikethrough

text-style-italic

text-style-italic

text-style-muted

text-style-muted

text-style-allcaps

text-style-allcaps

text-style-nowrap

text-style-nowrap

text-style-link

text-style-link

text-style-quote

Sample text is being used as a placeholder.

text-style-eyebrow

Sample text is being used as a placeholder.

Text Weights

text-weight-bold
text-weight-bold
text-weight-semibold
text-weight-semibold
text-weight-medium
text-weight-medium
text-weight-normal
text-weight-normal

Text Alignments

text-align-left
text-align-left
text-align-center
text-align-center
text-align-right
text-align-right

Rich Texts

text-rich-text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Sample text with a link is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text.

  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  1. Sample text is being used as a placeholder for real text that is normally present.
  2. Sample text is being used as a placeholder for real text that is normally present.
  3. Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.
image placeholder

Button Components

The different types of buttons used throughout the website.

Button
Dark
View open roles
View open roles
Button
Light
View open roles
View open roles
Button
Ghost
View open roles
View open roles
Submit Button
Dark
Submit Button
Light
Footer Link
Brand Identity
Customize
Customize
Figma
Figma
Help
Help
Buy Now
Buy Now