H1 – Content Styles

How To | Style Guide | Content Styles | Accessibility Tips | Page Blocks

H2 – This header type is intended as the section header for the subsequent page blocks (following the “Hero” page block)

ALl-CAPS “Pretitle”

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 ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Example paragraph text style. This is what your standard paragraphs will look like throughout the entire site. Certain areas may have special styles, but this is your standard copy size. Paragraph links are styled like this so that they are easy for users to find. 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.

Here’s a horizontal rule:

Below this paragraph you’ll find examples of all the other styles you’ll have at your disposal. You also have a style guide page that lists all important information on image sizes, fonts, and colors.

Here’s what a bulleted list looks like:

This is a bulleted list.
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 highly encourage the use of lists to make your content easier for the user to scan and digest quickly.
Most users on the web are task-oriented, so the easier the better.
Long paragraphs can be cumbersome and intimidating. Be sure to remember the medium, and don’t write copy the same way you would for print!

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)

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.

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

Images can not only be attached using the sidebar feature on the right, but they can also be inserted into the center content area like the image to the right has been. You have the ability to align the image to the right or the left, or insert an image that is the full width of the content area, having no text on the left or right of it. Don’t forget to put a bit of padding on it, so the text doesn’t butt right up next to it.

“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 manually applied in the WYSIWYG as well and we encourage using it. Essentially, adding the block-quote style in just indents the text and adds the background box you see here.

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

These interior styles are also available when creating content for other pages, like writing a blog post, a news article, etc. These same styles will apply to your headers and body copy. For the most part, the same can be said for any open content areas in the sidebar, home page, contact page, and so on.

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.

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 the Help button located in the top left of Mighty-Site to reference all of our help docs or contact support. Thanks so much and happy creating!

Here are 2 Call-to-Action buttons that you can use:

CTA Primary on Light

CTA Secondary Button Styl on Light

Page Link Looks like this

Iconography Options

Find more icons for your site here.

These are filtered to be Sharp + Solid. The area of code needed is between the quotation marks (i.e. fa-sharp fa-solid fa-caret-right).

Global / Primary Btn Caret 
Header / Portal Donor Btn 
Header / Portal Advisor Btn 
Header / Main Menu Down Caret 
Mega Menu / Advisor Insights Icon 
Blurb / Independent 
Blurb / Forward Thinking 
Blurb / Lightbulb 
Blurb / Piggy Bank 
Blurb / Long Haul Timeline 
Blurb / Quotes 
Blurb / Tax Benefits 
Blurb / User Checkmark 
Blurb / Chart Looking Up 
Blurb / Gift Box 
Blurb / Philanthropic Timeline 
Blurb / Security 
Blurb / Thumbs up 
Blurb / Compass direction 
Blurb / Sending or Submitting 
Mega / Briefcase 
Mega / Art Palette 
Mega / Earth Americas 
Mega / Compassion 
Mega / Globe Worldwide
Mega / Seedling Growth 
Mega / Info Paper
Mega / Phone Call Contact 
Mega / Seedling In Hand 
Mega / Knowledge Learn
Mega / Safe Secure 
Footer / Location Header / Get In Touch Btn 
Mobile Menu / Close X 
Mobile Menu / Plus Sign 
Mobile Menu / Minus Sign 
Footer / Copyright

Icon Style: Sharp + Brands
Footer / Linkedin 
Footer / Twitter 
Footer / Facebook