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

Subtitle

subtitle-1

Subtitle 1

subtitle-2

Subtitle 2

subtitle-3

Subtitle 3

subtitle-4

Subtitle 4

Label

label-1

Label

Links

link-1

Label

link-2

Label

link-3

Label

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

Labels

label-style-1

Label 1

label-style-2

Label 2

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

Text nowrap

text-style-link

Text link

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-style-4lines

text-style-wrap-balance

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.

text-style-wrap-pretty

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.

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

Dark

background-color-black

text-color-black

AaBb

background-color-black-75%

text-color-black-75%

AaBb

background-color-black-50%

text-color-black-50%

AaBb

background-color-black-25%

text-color-black-25%

AaBb

background-color-black-10%

text-color-black-10%

AaBb

background-color-green-1

text-color-green-1

AaBb

background-color-green-2

text-color-green-2

AaBb

background-color-green-3

text-color-green-3

AaBb

background-color-green-4

text-color-green-4

AaBb

background-color-gold

text-color-gold

AaBb

Light

background-color-white

text-color-white

AaBb

background-color-white-75%

text-color-white-75%

AaBb

background-color-white-50%

text-color-white-50%

AaBb

background-color-white-25%

text-color-white-25%

AaBb

background-color-white-10%

text-color-white-10%

AaBb

background-color-beige-1

text-color-beige-1

AaBb

background-color-beige-2

text-color-beige-2

AaBb

background-color-beige-3

text-color-beige-3

AaBb

Spacing

Spacer

spacer

Utility

Visibility

hide

hide-tablet

hide-mobile-landscape

hide-mobile-portrait

show-tablet

show-mobile-landscape

show-mobile-portrait

overflow-visible

overflow-hidden

overflow-clip

overflow-scroll

overflow-auto

u-overflow-hidden-left

u-overflow-hidden-right

u-overflow-hidden-top

u-overflow-hidden-bottom

Layout

display-block

display-flex

display-inlineblock

display-inline

hide-if-empty

hide-if-empty-cms

Aspect ratio

aspect-ratio-square

aspect-ratio-portrait

aspect-ratio-landscape

aspect-ratio-widescreen

Border Radius

border-radius-large

border-radius-medium

border-radius-small

Others

icon-height-small

icon-height-medium

icon-height-large

icon-width-small

icon-width-medium

icon-width-large

icon-current-color

icon-full

Others

pointer-events-auto

pointer-events-none

layer

spacing-clean

align-center

z-index-1

z-index-2

z-index-3

Fade In

fade-in-0

fade-in-200

fade-in-400

fade-in-600

fade-in-800

fade-in-tablet-0

Elements

Form

multiple classes

Thank you!

Your submission has been received!

Oops! Something went wrong while submitting the form.

Buttons

Join Waitlist

Accordion

multiple classes

This is some text inside of a div block.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

This is some text inside of a div block.

Class Storage

multiple classes

Version: 3.0