How To /
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.
Heading 1 Page and Article Title Example Text
Intro paragraph style, for optional1, larger copy. Works great in certain blocks and long format copy. Should only be a few lines long.
Optional Pre-Title
Heading 22 Large and Easy to Read Header Typography
Intro paragraph style, for optional, larger copy. Example of link in intro and a tooltip in intro paragraph.
Source Sans regular for the body copy, light and thin weights do not render well on reversed out backgrounds3 and semibold is too heavy for paragraphs of text. Here’s an example on an inline text link and some bold text and italicized text, all common occurences throughout copy. Text is 19px base size for increased legibility and accessibility reasons. Tooltip text can also be added in any WYSIWYG content as well.
This is an “extra info” box that can be applied to any paragraph to wrap it in a dotted container and add an i icon.
- Bullets are the same style as paragraph text
- To keep things simple and consistent
- Bullets are fantastic for web copy
- Just keep in mind, they add height, so brevity is key
We generally will not have blocks of copy this long in our page blocks but it’s good to show multiple type elements in one block like this when comparing backgrounds and type styles.
Large Header 3 Still Small Enough4 to Work with Header 2
Lorem ipsum dolor sit amet, consectetur external link example adipiscing elit. Nam tempus aliquam lorem. Nullam arcu nisl, bibendum vitae iaculis at, faucibus ut dui.
- Checkmark style bullets via formats dropdown
- Used in Key Takeaways and other article blocks
- Here’s a long bullet just to show an example. Lorem ipsum dolor sit amet, consectetur adipiscing. Nam tempus aliquam lorem. Nullam arcu nisl, bibendum vitae iaculis at, faucibus ut dui. Proin vitae sem urna. In nec tincidunt justo.
- Easy toggle to convert any bulleted list into checkmarks
- Can contain links, of course!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tempus aliquam lorem. Nullam arcu nisl, bibendum vitae iaculis at, faucibus ut dui. Proin vitae sem urna. In nec tincidunt justo.
Primary Button Secondary ButtonLorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tempus aliquam lorem. Nullam arcu nisl, bibendum vitae iaculis at, faucibus ut dui. Proin vitae sem urna. In nec tincidunt justo.
Header 4, Just Larger than P5 Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tempus aliquam lorem. Nullam arcu nisl, bibendum vitae iaculis at, faucibus ut dui. Proin vitae sem urna. In nec tincidunt justo.
Blockquotes can be used to call out important information or quotes. Applying the blockquote text style to any piece of copy will add the border on the left and also indent the text. A blockquote can be multiple paragraphs. It could contain bulleted lists, multiple headers, whatever is needed.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tempus aliquam lorem. Nullam arcu nisl, bibendum vitae iaculis at, faucibus ut dui. Proin vitae sem urna. In nec tincidunt justo.
Header 5 Header Style
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tempus aliquam lorem. Nullam arcu nisl, bibendum vitae iaculis at, faucibus ut dui. Proin vitae sem urna. In nec tincidunt justo.
Header 6 Header Style
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tempus aliquam lorem. Nullam arcu nisl, bibendum vitae iaculis at, faucibus ut dui. Proin vitae sem urna. In nec tincidunt justo.
Heading 1 Page and Article Title Example Text
Intro paragraph style, for optional1, larger copy. Works great in certain blocks and long format copy. Should only be a few lines long.
Optional Pre-Title
Heading 22 Large and Easy to Read Header Typography
Intro paragraph style, for optional, larger copy. Example of link in intro and a tooltip in intro paragraph.
Source Sans regular for the body copy, light and thin weights do not render well on reversed out backgrounds3 and semibold is too heavy for paragraphs of text. Here’s an example on an inline text link and some bold text and italicized text, all common occurences throughout copy. Text is 19px base size for increased legibility and accessibility reasons. Tooltip text can also be added in any WYSIWYG content as well.
This is an “extra info” box that can be applied to any paragraph to wrap it in a dotted container and add an i icon.
- Bullets are the same style as paragraph text
- To keep things simple and consistent
- Bullets are fantastic for web copy
- Just keep in mind, they add height, so brevity is key
We generally will not have blocks of copy this long in our page blocks but it’s good to show multiple type elements in one block like this when comparing backgrounds and type styles.
Large Header 3 Still Small Enough4 to Work with Header 2
Lorem ipsum dolor sit amet, consectetur external link example adipiscing elit. Nam tempus aliquam lorem. Nullam arcu nisl, bibendum vitae iaculis at, faucibus ut dui.
- Checkmark style bullets via formats dropdown
- Used in Key Takeaways and other article blocks
- Here’s a long bullet just to show an example. Lorem ipsum dolor sit amet, consectetur adipiscing. Nam tempus aliquam lorem. Nullam arcu nisl, bibendum vitae iaculis at, faucibus ut dui. Proin vitae sem urna. In nec tincidunt justo.
- Easy toggle to convert any bulleted list into checkmarks
- Can contain links, of course!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tempus aliquam lorem. Nullam arcu nisl, bibendum vitae iaculis at, faucibus ut dui. Proin vitae sem urna. In nec tincidunt justo.
Primary Button Secondary ButtonLorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tempus aliquam lorem. Nullam arcu nisl, bibendum vitae iaculis at, faucibus ut dui. Proin vitae sem urna. In nec tincidunt justo.
Header 4, Just Larger than P5 Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tempus aliquam lorem. Nullam arcu nisl, bibendum vitae iaculis at, faucibus ut dui. Proin vitae sem urna. In nec tincidunt justo.
Blockquotes can be used to call out important information or quotes. Applying the blockquote text style to any piece of copy will add the border on the left and also indent the text. A blockquote can be multiple paragraphs. It could contain bulleted lists, multiple headers, whatever is needed.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tempus aliquam lorem. Nullam arcu nisl, bibendum vitae iaculis at, faucibus ut dui. Proin vitae sem urna. In nec tincidunt justo.
Header 5 Header Style
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tempus aliquam lorem. Nullam arcu nisl, bibendum vitae iaculis at, faucibus ut dui. Proin vitae sem urna. In nec tincidunt justo.
Header 6 Header Style
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tempus aliquam lorem. Nullam arcu nisl, bibendum vitae iaculis at, faucibus ut dui. Proin vitae sem urna. In nec tincidunt justo.
Heading 1 Page and Article Title Example Text
Intro paragraph style, for optional1, larger copy. Works great in certain blocks and long format copy. Should only be a few lines long.
Optional Pre-Title
Heading 22 Large and Easy to Read Header Typography
Intro paragraph style, for optional, larger copy. Example of link in intro and a tooltip in intro paragraph.
Source Sans regular for the body copy, light and thin weights do not render well on reversed out backgrounds3 and semibold is too heavy for paragraphs of text. Here’s an example on an inline text link and some bold text and italicized text, all common occurences throughout copy. Text is 19px base size for increased legibility and accessibility reasons. Tooltip text can also be added in any WYSIWYG content as well.
This is an “extra info” box that can be applied to any paragraph to wrap it in a dotted container and add an i icon.
- Bullets are the same style as paragraph text
- To keep things simple and consistent
- Bullets are fantastic for web copy
- Just keep in mind, they add height, so brevity is key
We generally will not have blocks of copy this long in our page blocks but it’s good to show multiple type elements in one block like this when comparing backgrounds and type styles.
Large Header 3 Still Small Enough4 to Work with Header 2
Lorem ipsum dolor sit amet, consectetur external link example adipiscing elit. Nam tempus aliquam lorem. Nullam arcu nisl, bibendum vitae iaculis at, faucibus ut dui.
- Checkmark style bullets via formats dropdown
- Used in Key Takeaways and other article blocks
- Here’s a long bullet just to show an example. Lorem ipsum dolor sit amet, consectetur adipiscing. Nam tempus aliquam lorem. Nullam arcu nisl, bibendum vitae iaculis at, faucibus ut dui. Proin vitae sem urna. In nec tincidunt justo.
- Easy toggle to convert any bulleted list into checkmarks
- Can contain links, of course!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tempus aliquam lorem. Nullam arcu nisl, bibendum vitae iaculis at, faucibus ut dui. Proin vitae sem urna. In nec tincidunt justo.
Primary Button Secondary ButtonLorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tempus aliquam lorem. Nullam arcu nisl, bibendum vitae iaculis at, faucibus ut dui. Proin vitae sem urna. In nec tincidunt justo.
Header 4, Just Larger than P5 Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tempus aliquam lorem. Nullam arcu nisl, bibendum vitae iaculis at, faucibus ut dui. Proin vitae sem urna. In nec tincidunt justo.
Blockquotes can be used to call out important information or quotes. Applying the blockquote text style to any piece of copy will add the border on the left and also indent the text. A blockquote can be multiple paragraphs. It could contain bulleted lists, multiple headers, whatever is needed.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tempus aliquam lorem. Nullam arcu nisl, bibendum vitae iaculis at, faucibus ut dui. Proin vitae sem urna. In nec tincidunt justo.
Header 5 Header Style
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tempus aliquam lorem. Nullam arcu nisl, bibendum vitae iaculis at, faucibus ut dui. Proin vitae sem urna. In nec tincidunt justo.
Header 6 Header Style
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tempus aliquam lorem. Nullam arcu nisl, bibendum vitae iaculis at, faucibus ut dui. Proin vitae sem urna. In nec tincidunt justo.