Style Guide

The purpose of this HTML is to help determine what default settings are with CSS and to make sure that all possible HTML Elements are included in this HTML so as to not miss any possible Elements when designing a site.


Theme Colors

#92d16c
#b2d0e7
#f4fcff
#e0eef8

Graphics

H1: Barlow Semibold
The quick brown fox jumps over the lazy dog

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sapien lacus, maximus vel augue vitae, consectetur hendrerit augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Nam rhoncus risus mauris, eget ultrices felis feugiat eu. Pellentesque sed sapien nunc. Donec non scelerisque arcu. Vivamus feugiat dapibus justo.

H2: Barlow Semibold
The quick brown fox jumps over the lazy dog

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sapien lacus, maximus vel augue vitae, consectetur hendrerit augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Nam rhoncus risus mauris, eget ultrices felis feugiat eu. Pellentesque sed sapien nunc. Donec non scelerisque arcu. Vivamus feugiat dapibus justo.

H3: Barlow Semibold
The quick brown fox jumps over the lazy dog

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sapien lacus, maximus vel augue vitae, consectetur hendrerit augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Nam rhoncus risus mauris, eget ultrices felis feugiat eu. Pellentesque sed sapien nunc. Donec non scelerisque arcu. Vivamus feugiat dapibus justo.

H4: Barlow Semibold
The quick brown fox jumps over the lazy dog

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sapien lacus, maximus vel augue vitae, consectetur hendrerit augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Nam rhoncus risus mauris, eget ultrices felis feugiat eu. Pellentesque sed sapien nunc. Donec non scelerisque arcu. Vivamus feugiat dapibus justo.

H5: Barlow Semibold
The quick brown fox jumps over the lazy dog

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sapien lacus, maximus vel augue vitae, consectetur hendrerit augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Nam rhoncus risus mauris, eget ultrices felis feugiat eu. Pellentesque sed sapien nunc. Donec non scelerisque arcu. Vivamus feugiat dapibus justo.

H6: Barlow Semibold
The quick brown fox jumps over the lazy dog

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sapien lacus, maximus vel augue vitae, consectetur hendrerit augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Nam rhoncus risus mauris, eget ultrices felis feugiat eu. Pellentesque sed sapien nunc. Donec non scelerisque arcu. Vivamus feugiat dapibus justo.


Paragraph

Body: Open Sans

Lorem ipsum dolor sit amet, test link adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattislus.

This is a link.

Buttons

Blockquote

To be, or not to be, that is the question: Whether ’tis nobler in the mind to suffer The slings and arrows of outrageous fortune, Or to take arms against a sea of troubles And by opposing end them.

Shakespeare

List Types

Definition List

Definition List Title
This is a definition list division.

Ordered List

  1. List Item 1
  2. List Item 2
  3. List Item 3

Unordered List

  • List Item 1
  • List Item 2
  • List Item 3

Misc Stuff – abbr, acronym, pre, code, sub, sup, etc.

Lorem superscript dolor subscript amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. cite. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. NBA Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. AVE

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. 
Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. 
Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. 
Donec sed tellus eget sapien fringilla nonummy. NBA 
Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.  
AVE

Tables

Table Header 1Table Header 2Table Header 3
Division 1Division 2Division 3
Division 1Division 2Division 3
Division 1Division 2Division 3
This is the table caption
Table Header 1Table Header 2Table Header 3
Division 1Division 2Division 3
Division 1Division 2Division 3
Division 1Division 2Division 3
This is the table caption

Forms

Reference for what a form looks like.

"*" indicates required fields

Checkbox field
Radio buttons
Name field
Address section

Accordions

Accordion One

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu rhoncus augue, euismod aliquam dui. Integer scelerisque felis sit amet sem egestas efficitur.

Accordion Two

tristique, odio leo tincidunt mauris, sed lacinia felis ipsum eu lacus. Etiam tincidunt quam in aliquet convallis. Integer leo turpis

Block Pattern: Grouped Accordions

Grouped Accordion – One

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu rhoncus augue, euismod aliquam dui. Integer scelerisque felis sit amet sem egestas efficitur.

Grouped Accordion – Two

tristique, odio leo tincidunt mauris, sed lacinia felis ipsum eu lacus. Etiam tincidunt quam in aliquet convallis. Integer leo turpis