Style Guide

Typography

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
Heading Classes

.Heading Style H1

.Heading Style H2

.Heading Style H3

.Heading Style H4

.Heading Style H5

.Heading Style H6

Text Sizes

.Text Size Large

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.

.Text Size Medium

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.

.Text Size Regular

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.

.Text Size Small

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.

.Text Size Tiny

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.

Text Weights
.Weight XBold
.Weight Bold
.Weight Semibold
.Weight Medium
.Weight Normal
.Weight Light
Text Styles
.Text Italic
.Text Allcaps - Lorem ipsum
.Text Quote
Text Alignment
.Text Left
.Text Center
.Text Right
.Rich Text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
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.

This is a link inside of a rich text

  • List item
  • List item
  • List item
  1. List item
  2. List item
  3. List item
Caption goes here
Colors
Color Palette
.Is Black
.Is White
.Is Gray
Background Color
.Background Black
.Background White
.Background Gray
Text Color
.Text White
.Text Black
.Text Gray
Structure Classes
.Page Wrapper
.Main Wrapper
.Container Small
.Container Medium
.Container Large
.Padding Global
.Section Padding Small
.Section Padding Medium
.Section Padding Large
.Button Group
Max Widths
.Max Width Full
.Max Width XLarge
.Max Width Large
.Max Width Medium
.Max Width Small
Paddings Direction Classes
.Padding Bottom
.Padding Top
.Padding Vertical
.Padding Horizontal
.Padding Left
.Padding Right
Padding Size Classes
.Padding 0
.Padding Tiny
.Padding XXSmall
.Padding XSmall
.Padding Small
.Padding Medium
.Padding Large
.Padding XLarge
.Padding XXLarge
.Padding Huge
.Padding XHuge
Margin Direction Classes
.Margin Bottom
.Margin Top
.Margin Vertical
.Margin Horizontal
.Margin Left
.Margin Right
Margin Size Classes
.Margin 0
.Margin Tiny
.Margin XXSmall
.Margin XSmall
.Margin Small
.Margin Medium
.Margin Large
.Margin XLarge
.Margin XXLarge
.Margin Huge
.Margin XHuge
Utility Classes
.Hide
This element is hidden
.Hide Tablet
.Hide Mobile Portrait
.Hide Mobile Landscape
.Align Center