Content Styles

Showcases the different typography, color, and button styles used across the site. Used for an easy reference to understand heading hierarchy and its relation to body copy.

H1 – This header type is intended for the Hero page block. Lorem ipsum dolor sit amet, consectetur adipiscing elit

Paragraph Text with class “.intro-text” applied. 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.

H2 – This header type is intended as the section header for the subsequent page blocks

Paragraph Text. This is what the gernal paragraph text stlying looks like. You also have the ability to bold text as well as emphasize text. You can also insert links to download things in your content, ‘Example Document Title’ (PDF), like this. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt:

This is a bulleted list. We want to demonstrate how this could look for page layouts, and give the designer and copywriter something that they can copy & paste to generate these Page Layouts quicker
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqu
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.

This is sample content
1. This is sample content
2. This is sample content
3. This is sample content
4. This is sample content
This is sample content
1. This is sample content
2. This is sample content
This is sample content
1. This is sample content
2. This is sample content
3. This is sample content
This is sample content

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.

H3 – We must be mindful of heading sequence. H3s are used if you have a need for a sub-header (that falls under the H2 section header)

H4 – We must be mindful of heading sequence. H4s are used if you have a need for a sub-header that falls under the H3 header

H5 – Use this same styling for Pre-Title. We must be mindful of heading sequence.

Paragraph Text. This is what the gernal paragraph text stlying looks like. 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. 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.

You can also indent blocks of copy using the blockquote feature and they will look like this. Because we’re not sure this feature will always be used for actual quotes, we’re aren’t adding in any quote marks or things of that nature. If you’re actually quoting someone, you can type in the quote marks manually. “Just like this.” This feature can span multiple paragraphs. By default it will not be italic, like this example is. That style is maunally applied in the WYSIWYG as well and we encourage using it. Essentially, adding the blockquote style in just indents the text and adds the line you see on the left-hand side.

H6 – We must be mindful of heading sequence. H6s are used if you have a need for a sub-header that falls under the H5 header. We may not use this header type too often, but we should always account for this.

This is a numbered list. We want to demonstrate how this could look for page layouts, and give the designer and copywriter something that they can copy & paste to generate these Page Layouts quicker
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.

Primary Button Secondary Button Reverse Button Yellow Button CTA Button

Optional Pre-Title

H2 – We often see this kind of pairing in our Page Layouts

Paragraph Text – So, we wanted to provide this pairing so that a designer could quickly copy & paste this pairing into a particular page layout. 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.

Small Text – This could be used for captions. 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.

H1 – This header type is intended for the Hero page block. Lorem ipsum dolor sit amet, consectetur adipiscing elit

H2 – This header type is intended as the section header for the subsequent page blocks

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt:

This is a bulleted list. We want to demonstrate how this could look for page layouts, and give the designer and copywriter something that they can copy & paste to generate these Page Layouts quicker
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqu
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.

H3 – We must be mindful of heading sequence. H3s are used if you have a need for a sub-header (that falls under the H2 section header)

H4 – We must be mindful of heading sequence. H4s are used if you have a need for a sub-header that falls under the H3 header

H5 – Use this same styling for Pre-Title. We must be mindful of heading sequence.

You can also indent blocks of copy using the blockquote feature and they will look like this. Because we’re not sure this feature will always be used for actual quotes, we’re aren’t adding in any quote marks or things of that nature. If you’re actually quoting someone, you can type in the quote marks manually. “Just like this.”
This feature can span multiple paragraphs. By default it will not be italic, like this example is. That style is maunally applied in the WYSIWYG as well and we encourage using it. Essentially, adding the blockquote style in just indents the text and adds the line you see on the left-hand side.

H6 – We must be mindful of heading sequence. H6s are used if you have a need for a sub-header that falls under the H5 header. We may not use this header type too often, but we should always account for this.

This is a numbered list. We want to demonstrate how this could look for page layouts, and give the designer and copywriter something that they can copy & paste to generate these Page Layouts quicker
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.

Optional Pre-Title

H2 – We often see this kind of pairing in our Page Layouts

H1 – This header type is intended for the Hero page block. Lorem ipsum dolor sit amet, consectetur adipiscing elit

H2 – This header type is intended as the section header for the subsequent page blocks

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt:

This is a bulleted list. We want to demonstrate how this could look for page layouts, and give the designer and copywriter something that they can copy & paste to generate these Page Layouts quicker
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqu
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.

H3 – We must be mindful of heading sequence. H3s are used if you have a need for a sub-header (that falls under the H2 section header)

H4 – We must be mindful of heading sequence. H4s are used if you have a need for a sub-header that falls under the H3 header

H5 – Use this same styling for Pre-Title. We must be mindful of heading sequence.

You can also indent blocks of copy using the blockquote feature and they will look like this. Because we’re not sure this feature will always be used for actual quotes, we’re aren’t adding in any quote marks or things of that nature. If you’re actually quoting someone, you can type in the quote marks manually. “Just like this.”
This feature can span multiple paragraphs. By default it will not be italic, like this example is. That style is maunally applied in the WYSIWYG as well and we encourage using it. Essentially, adding the blockquote style in just indents the text and adds the line you see on the left-hand side.

H6 – We must be mindful of heading sequence. H6s are used if you have a need for a sub-header that falls under the H5 header. We may not use this header type too often, but we should always account for this.

This is a numbered list. We want to demonstrate how this could look for page layouts, and give the designer and copywriter something that they can copy & paste to generate these Page Layouts quicker
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.

Optional Pre-Title