• 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.

Subhead (H2 Tag)

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.

Highlighted Text

Intro Paragraphs

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.Anyonymous

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

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

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

Table

Tabs

Accordions

Columns

Form Elements

Modal Pop Ups

Click here to see the modal popup.

Certificates of Deposit

Special Offers

Responsive Videos

Center

Left

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh ipsum consequat nisl vel pretium lectus quam id. At quis risus sed vulputate odio. Quis enim lobortis scelerisque fermentum dui faucibus in. Mattis vulputate enim nulla aliquet porttitor. Ac orci phasellus egestas tellus rutrum tellus pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh ipsum consequat nisl vel pretium lectus quam. At quis risus sed vulputate odio. Quis enim lobortis scelerisque fermentum dui faucibus in.

Right

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh ipsum consequat nisl vel pretium lectus quam id. At quis risus sed vulputate odio. Quis enim lobortis scelerisque fermentum dui faucibus in. Mattis vulputate enim nulla aliquet porttitor. Ac orci phasellus egestas tellus rutrum tellus pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh ipsum consequat nisl vel pretium lectus quam. At quis risus sed vulputate odio. Quis enim lobortis scelerisque fermentum dui faucibus in.

Images - Sizes/Optimization

Homepage banners: 1920px x 900px

Homepage CTAs: 242px x 311px

Blog Feature: 970px x 426px

Subpage banners: 1920px x 682px

Sidebar CTAs: 290px x 290px

Content images don't need to be wider than 970px.

Optimize images here before uploading to site: https://kraken.io/web-interface