Style Guide

Color Palette
#A3D574
rgb(163, 213, 116)
#6CB33F
rgb(108, 179, 63)
#006450
rgb(0, 100, 60)
#000104
rgb(0, 1, 4)
#0096d6
rgb(0, 150, 214)
#005596
rgb(0, 85, 150)
#555555
rgb(85, 85, 85)
#e7e7e7
rgb(231, 231, 231)
Typography

h1 Heading

h2 Heading

h3 Heading

h4 Heading

h5 Heading
h6 Heading

Cras sed tortor metus. Aliquam feugiat semper purus mattis auctor. Sed placerat tempor eros sed feugiat. In massa ipsum, venenatis sit amet ligula in, congue tincidunt risus. Proin et ornare tortor. Etiam egestas, ligula ac molestie malesuada, risus neque interdum elit, suscipit molestie risus ligula eu leo. Nulla facilisi. Curabitur pulvinar rhoncus laoreet. Proin id porta odio. Vivamus pulvinar bibendum est id imperdiet.

Maecenas faucibus velit sit amet lacus varius pharetra. Curabitur sapien erat, aliquet sit amet mi sit amet, commodo porta lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas lectus arcu, porttitor non erat non, condimentum ultrices magna. Mauris molestie malesuada nisi, et semper enim varius ut.
Grid
col-md-6
col-md-6
col-md-5
col-md-7
col-md-4
col-md-8
col-md-3
col-md-9
col-md-2
col-md-10
col-md-1
col-md-11
col-md-12
col-md-11, col-md-offset-1
col-md-10, col-md-offset-2
col-md-9, col-md-offset-3
col-md-8, col-md-offset-4
col-md-7, col-md-offset-5
col-md-6, col-md-offset-6
col-md-5, col-md-offset-7
col-md-4, col-md-offset-8
col-md-3, col-md-offset-9
col-md-2, col-md-offset-10
col-md-1, col-md-offset-11
Buttons

Large Buttons


Standard Buttons


Standard Anchor as Button

Default Primary Secondary Accent Call to Action Link Button

Small Buttons


Extra Small Buttons

Panels

Default

Maecenas faucibus velit sit amet lacus varius pharetra. Curabitur sapien erat, aliquet sit amet mi sit amet, commodo porta lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas lectus arcu, porttitor non erat non, condimentum ultrices magna. .panel-default

Default Borderless

Maecenas faucibus velit sit amet lacus varius pharetra. Curabitur sapien erat, aliquet sit amet mi sit amet, commodo porta lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas lectus arcu, porttitor non erat non, condimentum ultrices magna. .panel-default .panel-borderless

Default Borderless Clean

Maecenas faucibus velit sit amet lacus varius pharetra. Curabitur sapien erat, aliquet sit amet mi sit amet, commodo porta lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas lectus arcu, porttitor non erat non, condimentum ultrices magna. .panel-default .panel-borderless .panel-underline

Primary

Maecenas faucibus velit sit amet lacus varius pharetra. Curabitur sapien erat, aliquet sit amet mi sit amet, commodo porta lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas lectus arcu, porttitor non erat non, condimentum ultrices magna. .panel-primary

Primary Borderless

Maecenas faucibus velit sit amet lacus varius pharetra. Curabitur sapien erat, aliquet sit amet mi sit amet, commodo porta lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas lectus arcu, porttitor non erat non, condimentum ultrices magna. .panel-primary .panel-borderless

Primary Borderless Clean

Maecenas faucibus velit sit amet lacus varius pharetra. Curabitur sapien erat, aliquet sit amet mi sit amet, commodo porta lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas lectus arcu, porttitor non erat non, condimentum ultrices magna. .panel-primary .panel-borderless .panel-clean
Tables

Default

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Default with Borders

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Default with Borders and Stripes

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Primary with Borders and Stripes

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Secondary with Borders and Stripes

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Alerts
Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Warning! Best check yo self, you're not looking too good.
Oh snap! Change a few things up and try submitting again.
Icons

fa-adjust []

fa-adn []

fa-align-center []

fa-align-justify []

fa-align-left []

fa-align-right []

fa-ambulance []

fa-anchor []

fa-android []

fa-angle-double-down []

fa-angle-double-left []

fa-angle-double-right []

fa-angle-double-up []

fa-angle-down []

fa-angle-left []

fa-angle-right []

fa-angle-up []

fa-apple []

fa-archive []

fa-arrow-circle-down []

fa-arrow-circle-left []

fa-arrow-circle-o-down []

fa-arrow-circle-o-left []

fa-arrow-circle-o-right []

fa-arrow-circle-o-up []

fa-arrow-circle-right []

fa-arrow-circle-up []

fa-arrow-down []

fa-arrow-left []

fa-arrow-right []

fa-arrow-up []

fa-arrows []

fa-arrows-alt []

fa-arrows-h []

fa-arrows-v []

fa-asterisk []

fa-automobile (alias) []

fa-backward []

fa-ban []

fa-bank (alias) []

fa-bar-chart-o []

fa-barcode []

fa-bars []

fa-beer []

fa-behance []

fa-behance-square []

fa-bell []

fa-bell-o []

fa-bitbucket []

fa-bitbucket-square []

fa-bitcoin (alias) []

fa-bold []

fa-bolt []

fa-bomb []

fa-book []

fa-bookmark []

fa-bookmark-o []

fa-briefcase []

fa-btc []

fa-bug []

fa-building []

fa-building-o []

fa-bullhorn []

fa-bullseye []

fa-cab (alias) []

fa-calendar []

fa-calendar-o []

fa-camera []

fa-camera-retro []

fa-car []

fa-caret-down []

fa-caret-left []

fa-caret-right []

fa-caret-square-o-down []

fa-caret-square-o-left []

fa-caret-square-o-right []

fa-caret-square-o-up []

fa-caret-up []

fa-certificate []

fa-chain (alias) []

fa-chain-broken []

fa-check []

fa-check-circle []

fa-check-circle-o []

fa-check-square []

fa-check-square-o []

fa-chevron-circle-down []

fa-chevron-circle-left []

fa-chevron-circle-right []

fa-chevron-circle-up []

fa-chevron-down []

fa-chevron-left []

fa-chevron-right []

fa-chevron-up []

fa-child []

fa-circle []

fa-circle-o []

fa-circle-o-notch []

fa-circle-thin []

fa-clipboard []

fa-clock-o []

fa-cloud []

fa-cloud-download []

fa-cloud-upload []

fa-cny (alias) []

fa-code []

fa-code-fork []

fa-codepen []

fa-coffee []

fa-cog []

fa-cogs []

fa-columns []

fa-comment []

fa-comment-o []

fa-comments []

fa-comments-o []

fa-compass []

fa-compress []

fa-copy (alias) []

fa-credit-card []

fa-crop []

fa-crosshairs []

fa-css3 []

fa-cube []

fa-cubes []

fa-cut (alias) []

fa-cutlery []

fa-dashboard (alias) []

fa-database []

fa-dedent (alias) []

fa-delicious []

fa-desktop []

fa-deviantart []

fa-digg []

fa-dollar (alias) []

fa-dot-circle-o []

fa-download []

fa-dribbble []

fa-dropbox []

fa-drupal []

fa-edit (alias) []

fa-eject []

fa-ellipsis-h []

fa-ellipsis-v []

fa-empire []

fa-envelope []

fa-envelope-o []

fa-envelope-square []

fa-eraser []

fa-eur []

fa-euro (alias) []

fa-exchange []

fa-exclamation []

fa-exclamation-circle []

fa-exclamation-triangle []

fa-expand []

fa-external-link []

fa-external-link-square []

fa-eye []

fa-eye-slash []

fa-facebook []

fa-facebook-square []

fa-fast-backward []

fa-fast-forward []

fa-fax []

fa-female []

fa-fighter-jet []

fa-file []

fa-file-archive-o []

fa-file-audio-o []

fa-file-code-o []

fa-file-excel-o []

fa-file-image-o []

fa-file-movie-o (alias) []

fa-file-o []

fa-file-pdf-o []

fa-file-photo-o (alias) []

fa-file-picture-o (alias) []

fa-file-powerpoint-o []

fa-file-sound-o (alias) []

fa-file-text []

fa-file-text-o []

fa-file-video-o []

fa-file-word-o []

fa-file-zip-o (alias) []

fa-files-o []

fa-film []

fa-filter []

fa-fire []

fa-fire-extinguisher []

fa-flag []

fa-flag-checkered []

fa-flag-o []

fa-flash (alias) []

fa-flask []

fa-flickr []

fa-floppy-o []

fa-folder []

fa-folder-o []

fa-folder-open []

fa-folder-open-o []

fa-font []

fa-forward []

fa-foursquare []

fa-frown-o []

fa-gamepad []

fa-gavel []

fa-gbp []

fa-ge (alias) []

fa-gear (alias) []

fa-gears (alias) []

fa-gift []

fa-git []

fa-git-square []

fa-github []

fa-github-alt []

fa-github-square []

fa-gittip []

fa-glass []

fa-globe []

fa-google []

fa-google-plus []

fa-google-plus-square []

fa-graduation-cap []

fa-group (alias) []

fa-h-square []

fa-hacker-news []

fa-hand-o-down []

fa-hand-o-left []

fa-hand-o-right []

fa-hand-o-up []

fa-hdd-o []

fa-header []

fa-headphones []

fa-heart []

fa-heart-o []

fa-history []

fa-home []

fa-hospital-o []

fa-html5 []

fa-image (alias) []

fa-inbox []

fa-indent []

fa-info []

fa-info-circle []

fa-inr []

fa-instagram []

fa-institution (alias) []

fa-italic []

fa-joomla []

fa-jpy []

fa-jsfiddle []

fa-key []

fa-keyboard-o []

fa-krw []

fa-language []

fa-laptop []

fa-leaf []

fa-legal (alias) []

fa-lemon-o []

fa-level-down []

fa-level-up []

fa-life-bouy (alias) []

fa-life-ring []

fa-life-saver (alias) []

fa-lightbulb-o []

fa-link []

fa-linkedin []

fa-linkedin-square []

fa-linux []

fa-list []

fa-list-alt []

fa-list-ol []

fa-list-ul []

fa-location-arrow []

fa-lock []

fa-long-arrow-down []

fa-long-arrow-left []

fa-long-arrow-right []

fa-long-arrow-up []

fa-magic []

fa-magnet []

fa-mail-forward (alias) []

fa-mail-reply (alias) []

fa-mail-reply-all (alias) []

fa-male []

fa-map-marker []

fa-maxcdn []

fa-medkit []

fa-meh-o []

fa-microphone []

fa-microphone-slash []

fa-minus []

fa-minus-circle []

fa-minus-square []

fa-minus-square-o []

fa-mobile []

fa-mobile-phone (alias) []

fa-money []

fa-moon-o []

fa-mortar-board (alias) []

fa-music []

fa-navicon (alias) []

fa-openid []

fa-outdent []

fa-pagelines []

fa-paper-plane []

fa-paper-plane-o []

fa-paperclip []

fa-paragraph []

fa-paste (alias) []

fa-pause []

fa-paw []

fa-pencil []

fa-pencil-square []

fa-pencil-square-o []

fa-phone []

fa-phone-square []

fa-photo (alias) []

fa-picture-o []

fa-pied-piper []

fa-pied-piper-alt []

fa-pied-piper-square (alias) []

fa-pinterest []

fa-pinterest-square []

fa-plane []

fa-play []

fa-play-circle []

fa-play-circle-o []

fa-plus []

fa-plus-circle []

fa-plus-square []

fa-plus-square-o []

fa-power-off []

fa-print []

fa-puzzle-piece []

fa-qq []

fa-qrcode []

fa-question []

fa-question-circle []

fa-quote-left []

fa-quote-right []

fa-ra (alias) []

fa-random []

fa-rebel []

fa-recycle []

fa-reddit []

fa-reddit-square []

fa-refresh []

fa-renren []

fa-reorder (alias) []

fa-repeat []

fa-reply []

fa-reply-all []

fa-retweet []

fa-rmb (alias) []

fa-road []

fa-rocket []

fa-rotate-left (alias) []

fa-rotate-right (alias) []

fa-rouble (alias) []

fa-rss []

fa-rss-square []

fa-rub []

fa-ruble (alias) []

fa-rupee (alias) []

fa-save (alias) []

fa-scissors []

fa-search []

fa-search-minus []

fa-search-plus []

fa-send (alias) []

fa-send-o (alias) []

fa-share []

fa-share-alt []

fa-share-alt-square []

fa-share-square []

fa-share-square-o []

fa-shield []

fa-shopping-cart []

fa-sign-in []

fa-sign-out []

fa-signal []

fa-sitemap []

fa-skype []

fa-slack []

fa-sliders []

fa-smile-o []

fa-sort []

fa-sort-alpha-asc []

fa-sort-alpha-desc []

fa-sort-amount-asc []

fa-sort-amount-desc []

fa-sort-asc []

fa-sort-desc []

fa-sort-down (alias) []

fa-sort-numeric-asc []

fa-sort-numeric-desc []

fa-sort-up (alias) []

fa-soundcloud []

fa-space-shuttle []

fa-spinner []

fa-spoon []

fa-spotify []

fa-square []

fa-square-o []

fa-stack-exchange []

fa-stack-overflow []

fa-star []

fa-star-half []

fa-star-half-empty (alias) []

fa-star-half-full (alias) []

fa-star-half-o []

fa-star-o []

fa-steam []

fa-steam-square []

fa-step-backward []

fa-step-forward []

fa-stethoscope []

fa-stop []

fa-strikethrough []

fa-stumbleupon []

fa-stumbleupon-circle []

fa-subscript []

fa-suitcase []

fa-sun-o []

fa-superscript []

fa-support (alias) []

fa-table []

fa-tablet []

fa-tachometer []

fa-tag []

fa-tags []

fa-tasks []

fa-taxi []

fa-tencent-weibo []

fa-terminal []

fa-text-height []

fa-text-width []

fa-th []

fa-th-large []

fa-th-list []

fa-thumb-tack []

fa-thumbs-down []

fa-thumbs-o-down []

fa-thumbs-o-up []

fa-thumbs-up []

fa-ticket []

fa-times []

fa-times-circle []

fa-times-circle-o []

fa-tint []

fa-toggle-down (alias) []

fa-toggle-left (alias) []

fa-toggle-right (alias) []

fa-toggle-up (alias) []

fa-trash-o []

fa-tree []

fa-trello []

fa-trophy []

fa-truck []

fa-try []

fa-tumblr []

fa-tumblr-square []

fa-turkish-lira (alias) []

fa-twitter []

fa-twitter-square []

fa-umbrella []

fa-underline []

fa-undo []

fa-university []

fa-unlink (alias) []

fa-unlock []

fa-unlock-alt []

fa-unsorted (alias) []

fa-upload []

fa-usd []

fa-user []

fa-user-md []

fa-users []

fa-video-camera []

fa-vimeo-square []

fa-vine []

fa-vk []

fa-volume-down []

fa-volume-off []

fa-volume-up []

fa-warning (alias) []

fa-wechat (alias) []

fa-weibo []

fa-weixin []

fa-wheelchair []

fa-windows []

fa-won (alias) []

fa-wordpress []

fa-wrench []

fa-xing []

fa-xing-square []

fa-yahoo []

fa-yen (alias) []

fa-youtube []

fa-youtube-play []

fa-youtube-square []