Styleguide

This is the page for testing styles provided in the styleguide. This page can be used as a reference for adding the specific classes to achieve the items listed in the styleguide.

Please note: The items below do not contain everything in the styleguide, such as menu items, input text, and footer text. These items can be found in their respective locations on all pages.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

For the headers, simply select the Header block and the respective header. Every page will contain a Header 1 that is the page title, so avoid using H1 tags inside page content. Headers should be used for information organizational purposes, not for styling text in the page.

Body text

This is the default body text. It will appear anywhere a paragraph is used, such as these explanations!

  • List item 1
  • List item 2
  • List item 3

List items will be styled this way by default

this is an inline link

Links will be styled this way by default.

Callout 1

For callout 1, under Advanced on the right-hand side, add (without quotes) “callout1” to the Additional CSS class(es) box.

Note: Callout1 must be a <p> tag.

This is a stylized <a> tag in a paragraph.

Add (without quotes) “quotebutton” to the Additional CSS class(es) box.

These are set to be 100% width of the container (row) they are in. This is to allow flexibility for the content contained in the button. Additionally, they will stylize ANY <a> tag in the paragraph, so it’s best to use these in their own paragraph.

Reverse Button

This is a stylized <a> tag in a paragraph.

Add (without quotes) “reversebutton” to the Additional CSS class(es) box.

These are set to be 100% width of the container (row) they are in. This is to allow flexibility for the content contained in the button. Additionally, they will stylize ANY <a> tag in the paragraph, so it’s best to use these in their own paragraph.

Secondary Button

This is a stylized <a> tag in a paragraph.

Add (without quotes) “secondarybutton” to the Additional CSS class(es) box.

These are set to be 100% width of the container (row) they are in. This is to allow flexibility for the content contained in the button. Additionally, they will stylize ANY <a> tag in the paragraph, so it’s best to use these in their own paragraph.

Test H1 tag in use here, space between lines, etc.

Test H2 tag in use here, space between lines, etc.

Test H3 tag in use here, space between lines, etc.

Test H4 tag in use here, space between lines, etc.

Test H5 tag in use here, space between lines, etc.
Test H6 tag in use here, space between lines, etc.