Structure
page-wrapper
main-wrapper
container-xsmall-65
container-small-70
container-medium-75
container-large-80
container-xlarge-85
page-padding
padding-section-small
padding-section-medium
padding-section-large
padding-section-xlarge
Variables
padding-section-elastic
Headings
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.
HTML Tags
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.
Text Classes
Text Sizes
paragraph-xxl

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

paragraph-xl

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

paragraph-l

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

paragraph-m

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

paragraph-normal

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

paragraph-s

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

paragraph-xs

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

Text Weights
text-weight-black
text-weight-black
font-weight-extrabold
text-weight-extra-bold
font-weight-bold
text-weight-bold
font-weight-semibold
text-weight-semibold
font-weight-medium
text-weight-medium
font-weight-normal
text-weight-normal
font-weight-light
text-weight-light
font-weight-extra-light
text-weight-extra-light
font-weight-thin
text-weight-thin
Text Unique
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 Alignments
text-left
text-align-left
text-center
text-align-center
text-right
text-align-right
Colors
Text Colors
text-brand-black
text-brand-1
text-brand-pink
text-brand-2
text-brand-violet
text-brand-3
text-grey-light
text-brand-4
text-shader-1
text-brand-5
text-shader-2
text-white
text-shader-3
text-shader-3
text-shader-4
text-brand-6
text-shader-4
text-brand-6
Background Colors
brand-1
brand-2
brand-3
brand-4
brand-5
white
Spacings
Spacing wrapper
wrapper-0.5
wrapper-1
wrapper-2
wrapper-3
wrapper-4
wrapper-5
wrapper-6
wrapper-7
wrapper-8
Spacing block
spacer-0.5
spacer-1
spacer-2
spacer-3
spacer-4
spacer-5
spacer-6
spacer-7
spacer-8
Common Classes
Flex box vertical
flex-vertical-1
flex-vertical-1.5
flex-vertical-2
flex-vertical-2.5
flex-vertical-3
flex-vertical-3.5
Flex box horizontal
flex-horizontal-1
flex-horizontal-1.5
flex-horizontal-2
flex-horizontal-2.5
flex-horizontal-3
flex-horizontal-3.5
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.