Style Guide
This project utilize Client-first as style system. You can read the docs here.
Structure
Core
page-wrapper
main-wapper
padding-global
Container
container-tiny
container-xxsmall
container-xsmall
container-small
container-medium
container-large
container-full
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
Heading
Heading 1
heading-style-h1
h1
h1
Heading 2
heading-style-h2
h2
h2
Heading 3
heading-style-h3
h3
h3
Heading 4
heading-style-h4
h4
h4
Heading 5
heading-style-h5
h5
h5
Heading 6
heading-style-h6
h6
h6
Other elements
Paragraph
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum.
Block Quote
"The Block quote element lets you add and style a quotation to make it stand out from the rest of your text."
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.
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.
Link
Text size
text-size-large
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
text-size-medium
Lorem ipsum dolor sit amet, consectetur adipiscing elit nullam suscipit rhoncus.
text-size-small
Lorem ipsum dolor sit amet, consectetur adipiscing elit nullam suscipit rhoncus.
Text style
text-style-label
label
text-style-label
small
label Small
text-style-strikethrough
Strikethrough
text-style-italic
Italic
text-style-muted
Muted
text-style-all-caps
All caps
text-style-nowrap
nowrap
text-style-link
Link
text-style-quote
Block quote
Text Weight
text-weight-xbold
Xbold
text-weight-bold
Bold
text-weight-semibold
Semibold
text-weight-medium
Medium
text-weight-normal
Normal
text-weight-light
Text light
Text Alignment
text-align-left
Left
text-align-center
Center
text-align-right
Right
Rich Text
text-rich-text
Heading 1
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.
- 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
background-color-dark
text-color-dark
AaBb
background-color-dark-grey
text-color-dark-grey
AaBb
background-color-grey
text-color-grey
AaBb
background-color-white
text-color-white
AaBb
Spacing
Section
padding-section-small
padding-section-medium
padding-section-large
padding-section-xLarge
Spacer
spacer-tiny
spacer-xxsmall
spacer-xsmall
spacer-small
spacer-medium
spacer-large
spacer-xlarge
spacer-xxlarge
spacer-huge
spacer-xhuge
spacer-xxhuge
spacer-custom-1
spacer-custom-2
spacer-custom-3
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-inline-block
display-inline
Aspect ratio
aspect-ratio-square
aspect-ratio-portrait
aspect-ratio-landscape
aspect-ratio-widescreen
Others
pointer-events-auto
pointer-events-none
layer
spacing-clean
align-center
z-index-1
z-index-2