Style Guide
Typography
Text Sizes
Text sizes classes when typography size doesn't match the default HTML tag.
Text sizes classes when typography size doesn't match the default HTML tag.
heading-h1
Heading 1
heading-h2
Heading 2
heading-h3
Heading 3
heading-h4
Heading 4
text-3xl
The quick brown fox jumps over the lazy dog
text-2xl
The quick brown fox jumps over the lazy dog
text-xl
The quick brown fox jumps over the lazy dog
text-xl-2
The quick brown fox jumps over the lazy dog
text-lg
The quick brown fox jumps over the lazy dog
text-lg-2
The quick brown fox jumps over the lazy dog
text-base
The quick brown fox jumps over the lazy dog
text-sm
The quick brown fox jumps over the lazy dog
text-sm-1
The quick brown fox jumps over the lazy dog
text-xs
The quick brown fox jumps over the lazy dog
Text Weights
Text weight classes when typography weight doesn't match the default HTML tag.
Text weight classes when typography weight doesn't match the default HTML tag.
text-weight-xbold
text-weight-xbold (800)
text-weight-bold
text-weight-bold (700)
text-weight-semibold
text-weight-semibold (600)
text-weight-medium
text-weight-medium (500)
text-weight-normal
text-weight-normal (400)
Text Styles
Text style classes when typography style doesn't match the default HTML tag.
Text style classes when typography style doesn't match the default HTML tag.
text-style-italic
text-style-italic
text-style-quote
text-style-quote
text-style-uppercase
text-style-uppercase
text-style-lowercase
text-style-lowercase
text-style-link
Text Linktext-style-no_wrap
text-style-no_wrap
Text Alignment
Text alignment classes when typography alignment doesn't match the default HTML tag.
Text alignment classes when typography alignment doesn't match the default HTML tag.
text-align-left
text-align-left
text-align-center
text-align-center
text-align-right
text-align-right
Colors
Color Palette
Color Palette
is-black
is-white
Background Color
Manage recurring background colors.
Manage recurring background colors.
background-color-black
background-color-white
Text Color
Manage recurring text colors.
Manage recurring text colors.
text-color-white
text-color-white
text-color-black
text-color-black
text-color-black-900
text-color-black-900
text-color-black-800
text-color-black-800
text-color-black-700
text-color-black-700
text-color-black-600
text-color-black-600
text-color-black-500
text-color-black-500
text-color-black-400
text-color-black-400
text-color-black-300
text-color-black-300
text-color-black-200
text-color-black-200
text-color-black-100
text-color-black-100
text-color-black-50
text-color-black-50
text-color-white-50%
text-color-white-50%
Link Components
Buttons
Form Elements
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Common class
display-none
display-block
overflow-hidden
image-100
