Typography

Heading One

This is a "lead" paragraph. To use this styling, use the .lead class. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ipsum urna, suscipit sit amet interdum eget, malesuada eu odio. Proin dui metus, elementum at luctus vitae, consequat ac massa. Suspendisse vel urna vel purus aliquam gravida.

Fusce lobortis, nulla sit amet euismod eleifend, nibh lectus scelerisque ante, ac congue ex tellus in dui. Mauris vel quam id mauris tincidunt tempor.

Heading Two

Lorem ipsum dolor sit amet, feugiat delicata liberavisse id cum, no quo maiorum intellegebat, liber regione eu sit. Mea cu case ludus integre, vide viderer eleifend ex mea. His at soluta regione diceret, cum et atqui placerat petentium. Per amet nonumy periculis ei. Deleniti apeirian temporibus eam cu, ad mea ipsum sadipscing, sed ex assum omnium contentiones. Nobis suavitate moderatius has eu, epicuri ancillae pericula ei nam, ferri ipsum quaeque est ea.

Heading Three

Heading Four

Heading Five

Heading Six

Font - "proxima-nova"

FONT WEIGHTS

Regular - 500
Semi Bold - 600
Bold - 700
Extra Bold - 800

Lists

Unordered Lists

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

<ul><li>List Item</li><li>List Item</li><li>List Item</li><li>List Item</li></ul>

Ordered Lists

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa

Phasellus iaculis neque
Purus sodales ultricies
Vestibulum laoreet porttitor sem
Ac tristique libero volutpat at

Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

hr Borders

Basic HR

<hr> Dotted HR

<hr>

Colours

Blue - #b5e1e1

Yellow - #FDB813

Orange - #f15c22

Green - #afbd21

Brown - #4f3c26

Red - #ab3817

Teal - #56b7b4

Dark Teal - #0c5d72

Darker Blue - #1f3344

Tints:

#b5e1e1

#bae3e3

#bfe5e5

#c4e7e7

#c9e9e9

#ceebeb

#FDB813

#fdbd23

#fdc132

#fdc642

#fecb52

#fed062

#F15C22

#f26731

#f3723f

#f47d4e

#f5875d

#f6926c

#afbd21

#becd24

#cada2b

#cedd3b

#d2e04b

#d6e25c

#4f3c26

#61492f

#725737

#846440

#967248

#a77f51

Page Elements

Left Content Box

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Right Content Box

Content Column 1

Content Column 2

Images

Sponsors – Logos should be centered inside a 250 x 140px container.
Events & Activity Thumbnails – 800 x 600 px
Homepage Featured Teal Buttons – 800 x 453 px

Buttons & Links

Links

This is a Fancy Link
This is a bold Fancy Link .fancy-link

Event Filter Buttons

FILTER BY:

Red Button Small Red Button Red Button
.red-btn .red-btn .sm-btn .red-btn .lg-btn
Orange Button Small Orange Button Large Orange Button
.orange-btn .orange-btn .sm-btn .orange-btn .lg-btn

Icons

.icon-tw

.icon-fb

.icon-insta

Tables

.default-table

Heading	Heading	Heading	Heading
Table Content	Table Content	Table Content	Table Content
Table Content	Table Content	Table Content	Table Content
Table Content	Table Content	Table Content	Table Content
Table Content	Table Content	Table Content	Table Content

.hours-table

Heading	Heading	Heading	Heading
Table Content	Table Content	Table Content	Table Content
Table Content	Table Content	Table Content	Table Content
Table Content	Table Content	Table Content	Table Content
Table Content	Table Content	Table Content	Table Content

.schedule-table

Heading	Heading	Heading	Heading
Table Content	Table Content	Table Content	Table Content
Table Content	Table Content	Table Content	Table Content
Table Content	Table Content	Table Content	Table Content
Table Content	Table Content	Table Content	Table Content

Accordion

This is an accordion

This is a simple accordion implementation, that's uses minimal markup and roughly 8 lines of jQuery. It can be easily hacked to use different behavior. Chevrons are font awesome but easily replaced with anything.

Another Tab

This is a play on an ultra lightweight accordion menu.

News Releases

Vivamus facilisisnibh scelerisque laoreet.

Columns / Grids

2 Column Layout

3 Column Layout

4 Column Layout

Columns

.col-6

.col-4

.col-3

Website Styleguide