Style Guide

Style Guide

The H1 header tag is usually reserved for the title of a page, and will most likely be the largest text on a page. Only use one H1 tag and use a keyword. There are other H tags as well (H2, H3, H4, etc.). Each of these is a subhead of the one before it. Unless your content goes really, really deep, you will probably only use H1, H2, and possibly H3 tags. It’s important that these tags clearly define what your content is about, as search engines use H tags to help determine your ranking. These tags also help make your website ADA compliant, as H tags are used by screen readers to quickly guide visually impaired users from topic to topic.

H2 Subhead (default)

This is what paragraph of text will look like. This is a link, hover your mouse over links to see what the link hover state looks like. Here are examples of bold text and italic text.

H2 Subhead (small)

This is what paragraph of text will look like. This is a link, hover your mouse over links to see what the link hover state looks like. Here are examples of bold text and italic text.

Subhead (H3)

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor inc idint ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.

Subhead (H3)

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor inc idint ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.

Subhead (H3)

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor inc idint ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.

Uppercase Text

Small text lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut doloret magna aliqua. Ut enim ad minim veniam quis nostrud exercitation.


Highlighted Text

Big Text

It was the best of lines, it was the worst of lines. This is an introductory paragraph. If you want to express an idea before getting into your page content, this text styling is perfect to get that message across.

Quotes

Quotes are perfect for breaking up large amounts of text. You might think your content is so compelling that your visitors will surely read everything you write, but a typical visitor will usually just scan a page unless there is something compelling to make them stop and read.

"People read quotes just like you did now. Use it to your advantage. This is just an example.

Adding testimonials to your content is a great way to give a boost to what your selling. If the person you quote is someone your potential customers can identify with, the testimonial can help convince them that your product or service is what you are claiming it to be.

Images

This is an image caption. Don't write too much.

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor inc idint ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae.

Lists

Unordered Lists

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor inc idint ut labore et dolore magna aliqua. Ut enim ad minim veniam.

  • Unordered list item one. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    • This is a nested list item.
  • The second unordered list item
  • An unordered list item

Ordered Lists

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor inc idint ut labore et dolore magna aliqua. Ut enim ad minim veniam.

  1. Ordered list item one
  2. The second ordered list item
    1. A bullet under an ordered list item
  3. Ordered list item three

Call Out Boxes

Call Out Box
Call Out Box with Image

Table

Heading 1 Heading 2 Heading 3 Heading 4
Cell Content Cell Content Cell Content Cell Content
Cell Content Cell Content Cell Content Cell Content
Cell Content Cell Content Cell Content Cell Content

Tabs

     

Tab 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pellentesque, felis nec sollicitudin condimentum, tortor nibh tincidunt urna, ut efficitur risus leo ac purus. Phasellus quam metus, dignissim at tincidunt at, sollicitudin eu mauris.

Tab 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pellentesque, felis nec sollicitudin condimentum, tortor nibh tincidunt urna, ut efficitur risus leo ac purus. Phasellus quam metus, dignissim at tincidunt at, sollicitudin eu mauris.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pellentesque, felis nec sollicitudin condimentum, tortor nibh tincidunt urna, ut efficitur risus leo ac purus. Phasellus quam metus, dignissim at tincidunt at, sollicitudin eu mauris.

Tab 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pellentesque, felis nec sollicitudin condimentum, tortor nibh tincidunt urna, ut efficitur risus leo ac purus. Phasellus quam metus, dignissim at tincidunt at, sollicitudin eu mauris.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pellentesque, felis nec sollicitudin condimentum, tortor nibh tincidunt urna, ut efficitur risus leo ac purus. Phasellus quam metus, dignissim at tincidunt at, sollicitudin eu mauris.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pellentesque, felis nec sollicitudin condimentum, tortor nibh tincidunt urna, ut efficitur risus leo ac purus. Phasellus quam metus, dignissim at tincidunt at, sollicitudin eu mauris.

Tab 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pellentesque, felis nec sollicitudin condimentum, tortor nibh tincidunt urna, ut efficitur risus leo ac purus. Phasellus quam metus, dignissim at tincidunt at, sollicitudin eu mauris.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pellentesque, felis nec sollicitudin condimentum, tortor nibh tincidunt urna, ut efficitur risus leo ac purus. Phasellus quam metus, dignissim at tincidunt at, sollicitudin eu mauris.


Accordions

Accordion 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pellentesque, felis nec sollicitudin condimentum, tortor nibh tincidunt urna, ut efficitur risus leo ac purus. Phasellus quam metus, dignissim at tincidunt at, sollicitudin eu mauris.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pellentesque, felis nec sollicitudin condimentum, tortor nibh tincidunt urna, ut efficitur risus leo ac purus. Phasellus quam metus, dignissim at tincidunt at, sollicitudin eu mauris.

Accordion 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pellentesque, felis nec sollicitudin condimentum, tortor nibh tincidunt urna, ut efficitur risus leo ac purus. Phasellus quam metus, dignissim at tincidunt at, sollicitudin eu mauris.

Accordion 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pellentesque, felis nec sollicitudin condimentum, tortor nibh tincidunt urna, ut efficitur risus leo ac purus. Phasellus quam metus, dignissim at tincidunt at, sollicitudin eu mauris.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pellentesque, felis nec sollicitudin condimentum, tortor nibh tincidunt urna, ut efficitur risus leo ac purus. Phasellus quam metus, dignissim at tincidunt at, sollicitudin eu mauris.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pellentesque, felis nec sollicitudin condimentum, tortor nibh tincidunt urna, ut efficitur risus leo ac purus. Phasellus quam metus, dignissim at tincidunt at, sollicitudin eu mauris.

Two Column

Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur excepteur sint occaecat.

Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur excepteur sint occaecat.

Form Styles



Buttons


Primary Button Secondary Button


Modals

Open my Modal!