Style Guide

Typography
HTML Headings Tags
HTML tags define default Heading styles.
All H1 Headings

Heading 1

All H2 Headings

Heading 2

All H3 Headings

Heading 3

All H4 Headings

Heading 4

Other HTML Tags
HTML tags define default text styles.
All Paragraphs

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 lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

All Links
All Links
All Block Quotes
Block Quote
Text Sizes
Text sizes classes when typography size doesn't match the default HTML tag.
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-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-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-italic
text-style-italic
text-style-quote
text-style-quote
Text Alignment
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
Rich Text
text-rich-text

Heading 1

Heading 2

Heading 3

This is a block quote

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
Color Palette
is-black
is-white
is-blue
is-gray
Background Color
Manage recurring background colors.
background-color-black
background-color-white
background-color-blue
background-color-gray
Text Color
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
UI Elements
Buttons
button
Button
button-circle-blue
Button
Buttons With Icons
button-icon
View Project
Button ArrowButton Arrow
button-icon-2
Hello@example.com
Form Elements
field-label
form-input
form-input
is-text-area
form-input
is-select-input
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.