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.

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

heading-style-h1

H1 HTML tag*

H1 text block*

heading-style-h2

H2 HTML tag*

H2 text block*

heading-style-h3

H3 HTML tag*

H3 text block*

heading-style-h4

H4 HTML tag*

H4 text block*

heading-style-h5

H5 HTML tag*

H5 text block*

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

Text Link

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

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 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 link

text-style-quote

Block quote

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.

Sample text is being used as a placeholder.
Sample text is being used as a placeholder.
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 Text

button

Button Text

button

is-green

Button Text

button

is-large

Button Text

button

is-light

Button Text

button

is-border

Button Text

button

is-border

Button Text

Version: 3.0