How To / Content Styles

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.

Page Header 1 Example Text

This is intro size paragraph text, it is slightly bigger than the default paragraph size but otherwise the styles are the same. Torquem detraxit hosti et quidem faciunt, ut ratione voluptatem ipsam causam non provident, similique sunt. 

Button Styles

Below is a look at the different button style options for the site. With an example of how each one looks if the link is set to open in a new tab.

Pre-title Example

Header 2 is Used as the Title for Most of Your Page Blocks 

Body copy uses Work Sans for increased legibility. This is intro size paragraph text, it is slightly bigger than the default paragraph size but otherwise the styles are the same. Here’s an example link in the intro paragraph.

Here is a horizontal rule:


On this page you’ll find examples of all the styles you’ll have at your disposal. Once your site is complete, you’ll also have a technical page that lists all important information on image sizes, fonts, and colors.

  • This is a bulleted list created in a text editor widget.
  • You can also do a numbered list (bullets will change to numbers).
  • You can also create lists inside of a list.
    • Just like this!
  • We encourage using lists to make your content easier to scan and digest.
  • Most users on the web are task-oriented, so the easier the better.
  • Long paragraphs can be cumbersome and intimidating. Be sure to remember you’re writing for the web, it’s not the same as writing for print.
  1. This is a numbered list created in a text editor widget.
  2. You can also do a bulleted list (numbers will change to bullets).
  3. You can also create lists inside of a list.
    1. Just like this!
  4. We encourage using lists to make your content easier to scan and digest.
  5. Most users on the web are task-oriented, so the easier the better.
  6. Long paragraphs can be cumbersome and intimidating. Be sure to remember you’re writing for the web, it’s not the same as writing for print.

Here’s another paragraph just as an example of what one would look like following a bulleted list, which can occur in a page block, blog post, or case study.

Header 3 is used as the Title for Sub-Sections

It’s important to also mention that this is just a reference page. We would never encourage you to use all of these styles on one page, all at once. Rather, this is your guide to all things possible. This page is your point of reference for all the tools in your toolbox.

Header 4 Styles can be Great for Callouts

Images can also be inserted into the WYSIWYG area. You have the ability to align an image to the right or left, or insert an image that is the full width of the content area, having no text on the left or right of it.

Block quotes can be used to call out quotes or cite important information. Applying the blockquote style to any piece of text will add the border on the left and indent the text. If your quote has an author to cite, you can add their name, optionally bold it, at the end and put en em dash before. this will make it look like a proper quote without the need for any special additional styles.

It’s also worth noting that the blockquote can be multiple paragraphs. It could contain bulleted lists, multiple headers, whaterver is needed. Making text italic might also make sense, depending on the context.

– Orbit Media Studios

Header 5 Style May be Needed in Blogs and Longer Format Content

We hope you’ll come back to this page when you’re working on new content, or editing existing content. Of course, if you have any questions along the way, use our Knowledge Base to reference all of our help docs or contact support.

Same for H6, Likely Unnecessary for Page Blocks

You also have two calls to action available with your WYSIWYG content styles, a button and a CTA Link. Here’s an example button and example CTA Link, which we also like to think of as a “button jr” as it’s a great way to draw more attention to a link than using a standard inline paragraph link. But it’s less important then a full-blown button.

It’s important to also mention that this is just a reference page. We would never encourage you to use all of these styles on one page, all at once. Rather, this is your guide to all things possible. This page is your point of reference for all the tools in your tool-box. 

Page Header 1 Example Text

This is intro size paragraph text, it is slightly bigger than the default paragraph size but otherwise the styles are the same. Torquem detraxit hosti et quidem faciunt, ut ratione voluptatem ipsam causam non provident, similique sunt. 

Button Styles

Below is a look at the different button style options for the site. With an example of how each one looks if the link is set to open in a new tab.

Pre-title Example

Header 2 is Used as the Title for Most of Your Page Blocks 

Body copy uses Work Sans for increased legibility. This is intro size paragraph text, it is slightly bigger than the default paragraph size but otherwise the styles are the same. Here’s an example link in the intro paragraph.

Here is a horizontal rule:


On this page you’ll find examples of all the styles you’ll have at your disposal. Once your site is complete, you’ll also have a technical page that lists all important information on image sizes, fonts, and colors.

  • This is a bulleted list created in a text editor widget.
  • You can also do a numbered list (bullets will change to numbers).
  • You can also create lists inside of a list.
    • Just like this!
  • We encourage using lists to make your content easier to scan and digest.
  • Most users on the web are task-oriented, so the easier the better.
  • Long paragraphs can be cumbersome and intimidating. Be sure to remember you’re writing for the web, it’s not the same as writing for print.
  1. This is a numbered list created in a text editor widget.
  2. You can also do a bulleted list (numbers will change to bullets).
  3. You can also create lists inside of a list.
    1. Just like this!
  4. We encourage using lists to make your content easier to scan and digest.
  5. Most users on the web are task-oriented, so the easier the better.
  6. Long paragraphs can be cumbersome and intimidating. Be sure to remember you’re writing for the web, it’s not the same as writing for print.

Here’s another paragraph just as an example of what one would look like following a bulleted list, which can occur in a page block, blog post, or case study.

Header 3 is used as the Title for Sub-Sections

It’s important to also mention that this is just a reference page. We would never encourage you to use all of these styles on one page, all at once. Rather, this is your guide to all things possible. This page is your point of reference for all the tools in your toolbox.

Header 4 Styles can be Great for Callouts

Images can also be inserted into the WYSIWYG area. You have the ability to align an image to the right or left, or insert an image that is the full width of the content area, having no text on the left or right of it.

Block quotes can be used to call out quotes or cite important information. Applying the blockquote style to any piece of text will add the border on the left and indent the text. If your quote has an author to cite, you can add their name, optionally bold it, at the end and put en em dash before. this will make it look like a proper quote without the need for any special additional styles.

It’s also worth noting that the blockquote can be multiple paragraphs. It could contain bulleted lists, multiple headers, whaterver is needed. Making text italic might also make sense, depending on the context.

– Orbit Media Studios

Header 5 Style May be Needed in Blogs and Longer Format Content

We hope you’ll come back to this page when you’re working on new content, or editing existing content. Of course, if you have any questions along the way, use our Knowledge Base to reference all of our help docs or contact support.

Same for H6, Likely Unnecessary for Page Blocks

You also have two calls to action available with your WYSIWYG content styles, a button and a CTA Link. Here’s an example button and example CTA Link, which we also like to think of as a “button jr” as it’s a great way to draw more attention to a link than using a standard inline paragraph link. But it’s less important then a full-blown button.

It’s important to also mention that this is just a reference page. We would never encourage you to use all of these styles on one page, all at once. Rather, this is your guide to all things possible. This page is your point of reference for all the tools in your tool-box.