Style System
Getting Started

Welcome to your project's style system. The system we are using is the Client-first. Read the docs if you have any questions about it.

Documentation
Structure
Core
page-wrapper
main-wrapper
padding-global
Containers
container-small
container-medium
container-large
Max Width
max-width-xxsmall
max-width-xsmall
max-width-small
max-width-medium
max-width-large
max-width-xlarge
max-width-xxlarge
max-width-full-mobile
max-width-full-tablet
max-width-full
Typography
Headings
H1
heading-style-h1

H1 HTML tag*

H1 text block*
H2
heading-style-h2

H2 HTML tag*

H2 text block*
H3
heading-style-h3

H3 HTML tag*

H3 text block*
H4
heading-style-h4

H4 HTML tag*

H4 text block*
H5
heading-style-h5
H5 HTML tag*
H5 text block*
H6
heading-style-h6
H6 HTML tag*
H6 text block*
Other HTML tags
All Paragraphs

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

All Links
All Unordered Lists
  • Sample text is being used as a placeholder.
  • Sample text is being used as a placeholder.
  • Sample text is being used as a placeholder.
All Ordered Lists
  1. Sample text is being used as a placeholder.
  2. Sample text is being used as a placeholder.
  3. Sample text is being used as a placeholder.
All Block Quotes
Block Quote
Text sizes
text-size-large
Text large
text-size-medium
Text medium
text-size-regular
Text regular
text-size-small
Text small
text-size-tiny
Text tiny
Text styles
text-style-strikethrough
Text strikethrough
text-style-italic
Text italic
text-style-muted
Text muted
text-style-allcaps
Text allcaps
text-style-nowrap
Text nowrap
text-style-link
text-style-quote
Block quote
text-style-2lines
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 text-style-2lines
text-style-3lines
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. 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.
Text weights
text-weight-xbold
Text xbold
text-weight-bold
Text bold
text-weight-semibold
Text semibold
text-weight-medium
Text medium
text-weight-normal
Text normal
text-weight-light
Text light
Text alignment
text-align-left
Text left
text-align-center
Text center
text-align-right
Text right
Rich text
text-rich-text

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Caption text
  • Sample text is being used as a placeholder.
  • Sample text is being used as a placeholder.
  • Sample text is being used as a placeholder.
  1. Sample text is being used as a placeholder.
  2. Sample text is being used as a placeholder.
  3. Sample text is being used as a placeholder.
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Colors
Primary
background-color-dark-blue
text-color-dark-blue
AaBb
background-color-white
text-color-white
AaBb
background-color-green
text-color-green
AaBb
background-color-light-green
text-color-light-green
AaBb
Secondary
background-color-secondary-green
text-color-secondary-green
AaBb
background-color-secondary-blue
text-color-secondary-blue
AaBb
Spacing
Section
padding-section-small
padding-section-medium
padding-section-large
Spacer
spacer-tiny
spacer-xxsmall
spacer-xsmall
spacer-small
spacer-medium
spacer-large
spacer-xlarge
spacer-xxlarge
spacer-huge
spacer-xhuge
spacer-xxhuge
spacer-custom1
spacer-custom2
spacer-custom3
Utility
Visibility
hide
hide-tablet
hide-mobile-landscape
hide-mobile-portrait
overflow-visible
overflow-hidden
overflow-scroll
overflow-auto
Layout
display-block
display-flex
display-inlineblock
display-inline
Others
pointer-events-on
pointer-events-off
layer
div-square
spacing-clean
align-center
z-index-1
z-index-2
Elements
Form
multiple classes
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Buttons
button
+
is-small
button
is-green
button
+
is-large
button
+
is-light
button
+
is-border
button
+
is-border
Version: 3.0