Style Guide
Global Headings
H1
Heading
H2
Heading
H3
Heading
H4
Heading
H5
Heading
H6
Heading
Heading Sizes
heading-xhuge
Heading-xhuge
heading-huge
Heading-huge
heading-xlarge
Heading-xlarge
heading-large
Heading-large
heading-medium
Heading-medium
heading-small
Heading-small
heading-xsmall
Heading-xsmall
Text Sizes
text-size-large
Phaesellus a nulla in neque lacinia posuere.
text-size-medium
Phaesellus a nulla in neque lacinia posuere.
text-size-small
Phaesellus a nulla in neque lacinia posuere.
text-size-tiny
Phaesellus a nulla in neque lacinia posuere.
Text Weights
text-weight-bold
Phaesellus a nulla in neque lacinia posuere.
text-weight-medium
Phaesellus a nulla in neque lacinia posuere.
text-weight-normal
Phaesellus a nulla in neque lacinia posuere.
text-weight-light
Phaesellus a nulla in neque lacinia posuere.
Text Styles
text-style-italic
Phaesellus a nulla in neque lacinia posuere.
text-style-strikethrough
Phaesellus a nulla in neque lacinia posuere.
text-style-muted
Phaesellus a nulla in neque lacinia posuere.
text-style-quote
Block Quote
text-style-link
text-style-allcaps
text-style-nowrap
Text Colors
text-color-lightgrey
Phaesellus a nulla in neque lacinia posuere.
text-color-black
Phaesellus a nulla in neque lacinia posuere.
text-color-white
Phaesellus a nulla in neque lacinia posuere.
text-color-grey
Phaesellus a nulla in neque lacinia posuere.
Text Aligns
text-align-left
Phaesellus a nulla in neque lacinia posuere.
text-align-center
Phaesellus a nulla in neque lacinia posuere.
text-align-right
Phaesellus a nulla in neque lacinia posuere.
Rich Text
text-rich-text
Rich text heading
Rich text heading
Rich text heading
Rich text heading
Rich text heading
Rich text heading
quote
- list item
- list item
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-black
#000000 - background
background-color-white
#ffffff – text
background-color-button
Form Example
form example
Margins
Direction Classes
margin-bottom
margin-top
margin-vertical
margin-horizontal
margin-left
margin-right
Size Classes
margin-0
margin-tiny
margin-xxsmall
margin-xsmall
margin-small
margin-medium
margin-large
margin-xlarge
margin-xxlarge
margin-huge
margin-xhuge
margin-xxhuge
margin-custom1
margin-custom2
margin-custom3
Paddings
Direction Classes
padding-bottom
padding-top
padding-vertical
padding-horizontal
padding-left
padding-right
Size Classes
padding-0
padding-tiny
padding-xxsmall
padding-xsmall
padding-small
padding-medium
padding-large
padding-xlarge
padding-xxlarge
padding-huge
padding-xhuge
padding-xxhuge
padding-custom1
padding-custom1
padding-custom1
Max Widths
max-width-full
max-width-full-tablet
max-width-full-mobile-portrait
max-width-full-mobile-landscape
max-width-xxlarge
max-width-xlarge
max-width-large
max-width-medium
max-width-small
max-width-xsmall
max-width-xxsmall