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.
Header 1 Key Phrase and Page Title
Header 2 is used as Subheads. Header 2 is used as Subheads.
Header 3 is also used as a subhead and can be full sentences.
Header 4 is used for product or service titles and items that we want larger than h5.
Header 5 is for very important statements that can come before buttons to other pages and such.
Header 6 is not quite the small size of paragraph text, and is often of a different color to set it apart.
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.
For callout, under Advanced on the right-hand side, add (without quotes) “callout” to the Additional CSS class(es) box.
For callout, under Advanced on the right-hand side, add (without quotes) “callout” to the Additional CSS class(es) box.
Note: Callout must be a <p> tag.
Body text is what is used in paragraph format and can go on and on and on and on but should be clear in message. Body text is what is used in paragraph format and can go on and on and on and on but should be clear in message.
This is the default body text. It will appear anywhere a paragraph is used, such as these explanations!
Links will be styled this way by default.
- List item 1
- List item 2
- List item 3
List items will be styled this way by default
This is a custom block
Primary Button
Simply select the Custom Block with the button style you’d like to use, enter the text and the link you want, and done!
This is a custom block
Secondary Button
Simply select the Custom Block with the button style you’d like to use, enter the text and the link you want, and done!
Primary
#FF808B
Dark Grey
#53565A
Light Grey
#EAEEF3
Secondary
#FFB1BB
Grey
#BDBDBD
Mid Gray
#848A91
Primary Light
#FFE6E8
