Structure

page-wrapper
main-wrapper
container-medium-60
container-large-80
container-xlarge-85
page-padding
padding-section-small
padding-section-medium
padding-section-large

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.

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

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. Sample text helps you understand how real text may look 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.

body-font (All Paragraphs)

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-900
text-weight-black
text-800
text-weight-extra-bold
text-700
text-weight-bold
text-600
text-weight-semibold
text-500
text-weight-medium
text-400
text-weight-normal
text-300
text-weight-light
text-200
text-weight-extra-light
text-100
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-1
text-color-example
text-brand-2
text-color-example
text-brand-3
text-color-example
text-brand-4
text-color-example
text-brand-5
text-color-example

Background Colors

bg-brand-1
bg-brand-2
bg-brand-3
bg-brand-4
bg-brand-5

Spacings

Spacing wrapper

Its a div block with margin bottom
wrapper-0.5
wrapper-1
wrapper-2
wrapper-3
wrapper-4
wrapper-5
wrapper-6
wrapper-7
wrapper-8

Spacing block

Its a div block with padding top
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
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.