Styleguide

Styleguide Table of Contents

Page Layouts Navigation

Colors

Primary Colors

Variable: $orange
Hex: #EE913F
Class: .orange

Variable: $green
Hex: #73AD4F
Class: .green

Variable: $green-lt
Hex: #B2E571
Class: .green-lt

Variable: $gray-dk
Hex: #333333
Class: .gray-dk

Variable: $blue-lt
Hex: #97B1C3
Class: .blue-lt

Variable: $blue
Hex: #30497B
Class: .blue

Variable: $blue-dk
Hex: #00305A
Class: .blue-dk

Variable: $off-white
Hex: #ECF0F1
Class: .off-white

Grays

Variable: $off-white
Hex: #ECF0F1
Class: .off-white

Variable: $gray-md
Hex: #D4D4D4
Class: .gray-md

Variable: $gray-2
Hex: #a3a3a3
Class: .gray-2

Variable: $gray-lt
Hex: #EAEAEA
Class: .gray-lt

Variable: $gray
Hex: #b7b7b7
Class: .gray

Variable: $gray-dk
Hex: #333333
Class: .gray-dk

Secondary Colors

Utility Navigation Background

Variable: $black-lt
Hex: #2e2e2d
Class: .black-lt

Utility Navigation Hover Background

Variable: $black
Hex: #1e1e1d
Class: .black

Variable: $gray
Hex: #b7b7b7
Class: .gray

Orange Hover Background / Color

Variable: $orange-alt
Hex: #EE7D32
Class: .orange-alt

Error Text / Field Color

Variable: $error
Hex: #d64d4d
Class: .error

Typography

Page Header

Heading One

Heading Two

Heading Three

Heading Four

Heading Five
Heading Six

Fancy Heading for Event Dates & Locations

"Uptius et omnimus sin et autenest ped molupta eriberum earcil mos explab idunt facea voluptiae parcidion eaquia dolum explignim.”- Blockquote

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, a default link style totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Bold text quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Italic text et vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias.

Lists

Unordered Lists

  • A list item
  • A list item
  • Parent of nested list
    • A nested list item
    • Parent of nested list
      • A nested list item
      • A nested list item
      • A nested list item
    • A nested list item
  • A list item

Ordered Lists

  1. A list item
  2. A list item
  3. Parent of nested list
    1. A nested list item
    2. Parent of nested list
      1. A nested list item
      2. A nested list item
      3. A nested list item
    3. A nested list item
  4. A list item
Click me

a.btn.orange-bg

Click me!

a.btn.blue-bg

Click mei'm awesome!

a.btn.double

click me

a.link-caret

Icons

.fa-chevron-right
Unicode: f054

.fa-chevron-left
Unicode: f053

.fa-angle-right
Unicode: f105

.fa-angle-left
Unicode: f104

.fa-external-link
Unicode: f08e

.fa-caret-right
Unicode: f0da

.fa-caret-left
Unicode: f0d9

.fa-caret-down
Unicode: f0d7

.fa-info-circle
Unicode: f05a

.fa-download
Unicode: f019

.fa-times
Unicode: f00d

.fa-asterisk
Unicode: f069

.fa-twitter
Unicode: f099

.fa-youtube
Unicode: f167

.fa-search
Unicode: f002

Forms

denotes a required field. [ p.req-stmt ]

Text Inputs

This is a required field

Textareas

This is a required field

Selects

This is a required field

Fancy Checkboxes - Inline

Fancy Checkboxes - Error

This is a required field

Fancy Checkboxes - Columns (default)

Fancy Radio - Inline

Fancy Radio - Error

This is a required field

Fancy Radio - Columns (default)

Pagination

1 2 3