Style Guide

H2 Heading

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

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.

H3 Heading

The H1 header tag is usually reserved for the title of a page and will most likely be the largest text on a page. 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 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.

This is a Link. Hover over the link to watch it change.

Bold Text, Italic Text, Small Text

H4 Heading

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.

H5 Heading

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.

H6 Heading

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.

 

Calls to Action

Boxed Image Section

To add this, click on the + icon in the toolbar and select Snippets. Next, find Image Section - Boxed and click.  This box is only setup to show 3 lines of text at a time until the site breaks to mobile view. Here is the extra text that may not be seen on desktop.

Learn More

Image Callouts

Image Call to Action

Default image being used above is 1024x1024. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Learn More

Image Call to Action

Default image being used above is 1024x1024. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Learn More

Image Call to Action

Default image being used above is 1024x1024. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Learn More

   

Business Solutions Lists

Sample Title

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

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

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

Another Sample Title

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

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

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

 

Highlighted Text Elements

Testimonials

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.

Quote (Short)

People read quotes just like you did now. Use it to your advantage.

- Damian Wayne

Adding testimonials to your content is a great way to give a boost to what you’re 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.

Quote (Long)

If I have a long testimonial that goes on and on, I’ll use this long quote so my testimonial doesn’t take up half the page. But then again, if I don’t have much page content then maybe the standard short quote will help fill out the space.

- Damian Wayne

 

Columns

Two-Column

Lorem ipsum dolor sit amet con sectetur adipiscing elit. Suspendisse fringilla lec tus ac Leo auctor, eget egestas dui con sequat. Pellen tesque porttitor mollis.

Two-Column

Lorem ipsum dolor sit amet con sectetur adipiscing elit. Suspendisse fringilla lec tus ac Leo auctor, eget egestas dui con sequat. Pellen tesque porttitor mollis.

Three-Column

Lorem ipsum dolor sit amet con sectetur adipiscing elit. Suspendisse fringilla lec tus ac Leo auctor, eget egestas dui con sequat. Pellen tesque porttitor mollis.

Three-Column

Lorem ipsum dolor sit amet con sectetur adipiscing elit. Suspendisse fringilla lec tus ac Leo auctor, eget egestas dui con sequat. Pellen tesque porttitor mollis.

Three-Column

Lorem ipsum dolor sit amet con sectetur adipiscing elit. Suspendisse fringilla lec tus ac Leo auctor, eget egestas dui con sequat. Pellen tesque porttitor mollis.

Four-Column

Lorem ipsum dolor sit amet con sectetur adipiscing elit. Suspendisse fringilla lec tus ac Leo auctor, eget egestas dui con sequat. Pellen tesque porttitor mollis.

Four-Column

Lorem ipsum dolor sit amet con sectetur adipiscing elit. Suspendisse fringilla lec tus ac Leo auctor, eget egestas dui con sequat. Pellen tesque porttitor mollis.

Four-Column

Lorem ipsum dolor sit amet con sectetur adipiscing elit. Suspendisse fringilla lec tus ac Leo auctor, eget egestas dui con sequat. Pellen tesque porttitor mollis.

Four-Column

Lorem ipsum dolor sit amet con sectetur adipiscing elit. Suspendisse fringilla lec tus ac Leo auctor, eget egestas dui con sequat. Pellen tesque porttitor mollis.

Tables, Tabs, Accordions, Lists

Tables

Heading Heading Heading
Table Cell Table Cell Table Cell
Table Cell Table Cell Table Cell
Table Cell Table Cell Table Cell

Tabs

Tab 1

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

Tab 2

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

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

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

Tab 3

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

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

 

Accordions

Accordion Title

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

Accordion Title

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

Accordion Title

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

 

Unordered List

  • Unordered List Item. 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.
  • Second Unordered List Item. 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 exercitati.
    • Tertiary Unordered List Item. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    • Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  • Third Unordered List Item. 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

 

Ordered List

  1. Ordered List Item
  2. Second Ordered List Item
    1. Tertiary Ordered List Item
  3. Third Ordered List Item

 

Speedbumps

Speedbumps are external link warnings that let website visitors know that they clicked on a link to a third-party website; and therefore, will be leaving your website.

Your site has two different speedbumps ready to use: One for external links and one for PDFs that may contain external links.

Here's how to manually use them:

  1. By default, any external link on your site, will automatically activate the Speedbump when clicked unless we decided to override this in Speedbump javascript file at go-live. However, if you have an external link that isn't activating the Speedbump once clicked, then while in Edit mode, click on the link and then click on the Link Classes icon in the toolbar (next to the Link icon) and select Speedbump. Hit Save and you should be good to go.
    1. Here is a link to an external site (Google) which will automatically activate the Speedbump once clicked.
  2. To override the already automatic Speedbump for external links, while in Edit mode, click on the link and then click on the Link Classes icon in the toolbar (next to the Link icon) and select No Speedbump.
    1. Here is a link to an external site (Google) that should open a Speedbump automatically, but was overridden with No Speedbump.
  3. To add a Speedbump to a link that points to a PDF that includes external links, while in Edit mode, click on the link and then click on the Link Classes icon in the toolbar (next to the Link icon) and select PDF Speedbump.
    1. Here is a PDF Speedbump link.