Style Guide

TYPEOGRAPHY

H1

This is an H1 heading.

This is an H1 heading.
RANCOR
This is some text inside of a div block.
H2

This is an H2 heading.

This is some text inside of a div block.
BANTHA
This is some text inside of a div block.
H3

This is an H3 heading.

WAMPA
This is some text inside of a div block.
H4

This is an H4 heading.

TAUNTAUN
This is some text inside of a div block.
H5
This is an H5 heading.
WOOKIEE
This is some text inside of a div block.
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 lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

EWOK
This is some text inside of a div block.
PARAGRAPH 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.

PORG
This is some text inside of a div block.
TEXT INVERSE
This is some text inside of a div block.
HIGHLIGHTED TEXT
This is some text inside of a div block.
ICONIC FONT TEXT
Copy and paste iconic fonts into this text for font icons like this: 
EAMES FONT TEXT
This is some text inside of a div block.
ALRIGHT FONT TEXT
This is some text inside of a div block.
CENTERED TEXT
This is some text inside of a div block.

COLORS

DARK
HL
MEDIUM
WHITE

RESPONSIVE MARGIN BOTTOM

MARGIN PORG
MARGIN EWOK
MARGIN WOOKIEE
MARGIN TAUNTAUN
MARGIN WAMPA
MARGIN BANTHA
MARGIN RANCOR

RESPONSIVE MARGIN RIGHT

MARGIN PORG
MARGIN EWOK
MARGIN WOOKIEE

BUTTONS

BUTTON ONE
Button One
BUTTON TWO
Button Two
BUTTON THREE
Button Three
BUTTON FOUR
Button Four
BUTTON FILTER
Button Text
BUTTON FILTER ACTIVE
Button Text
BUTTON UNDERLINE
Share
HIGHLIGHTED TEXT
This is a text link
REVERSE TEXT LINK
This is a text link

GRID

SPAN 1
SPAN 2
SPAN 3
SPAN 4
SPAN 5
SPAN 6
SPAN 7
SPAN 8
SPAN 9
SPAN 10
SPAN 11
SPAN 12

WIDTHS

WIDTH 10%
WIDTH 20%
WIDTH 30%
WIDTH 40%
WIDTH 50%
WIDTH 60%
WIDTH 70%
WIDTH 80%
WIDTH 90%
WIDTH 95%
WIDTH 100%

PIXEL MARGIN BOTTOM

margin-bottom: 5px
margin-bottom: 10px
margin-bottom: 20px
margin-bottom: 30px
margin-bottom: 40px
margin-bottom: 50px
margin-bottom: 60px

VERTICAL HEIGHT

Vertical Height: 10
Vertical Height: 20
Vertical Height: 30
Vertical Height: 40
Vertical Height: 50
Vertical Height: 60
Vertical Height: 70
Vertical Height: 80
Vertical Height: 90
Vertical Height: 100