CTOEC Design Style Guide

Use this page as reference to know which styles on CTOEC.org are correct. Each asset in WordPress is represented, along with specs to ensure consistency across the site. Since these styles are already set in the stylesheet, deviation should be minimal — but this guide should make it clear if anything goes awry.

Heading Styles

Heading styles are numbered from H1 to H6, with H1 being the largest and H6 being the smallest. Make sure you use these headings in sequence when building a page to ensure your content is accessible (e.g.; H2 should only follow H1, H3 should follow H2, etc)

Heading 1

Heading 1 (H1) only appears once per page, and is the name of the page itself. It is either situated in a “Featured Image” header image (if added to the page), or in large text at the top of the body content.

Heading 2

Heading 2 (H2) should be used as the title of each main section on a page. If it’s important enough to put in a “On this page” block at the top of the page, it should be an H2.

Heading 3

Heading 3 (H3) should be used as subsections within H2 sections.

Most content will likely only need 3 levels of headings, but H4-H6 are available if content needs to be broken down further.

Heading 4

Heading 5
Heading 6

Callout boxes

This is a horizontal callout box with no icon

Use these when you want content to be ordered vertically on the page. They should be used for important content you want a user to read, and could be used in lieu of bullets if you want more visual elements on the page.

This is a horizontal callout box with an icon selected

Use these when you want content to be ordered vertically on the page. They should be used for important content you want a user to read, and could be used in lieu of bullets if you want more visual elements on the page.

This is a vertical “card” callout box without an icon

Use these when you want content to be ordered horizontally on the page. They should be used for important content you want a user to read, and could be used in lieu of bullets if you want more visual elements on the page.

This is a vertical “card” callout box with an icon

There is a plus sign near the bottom of the callout box entry box — pressing this will add another set of fields to fill out. This will add another vertical box next to your original. You can have up to 2 callout boxes in a single row. Adding another set of fields will place a box underneath the first two.

Third box

See? This is another box in the group. Cool huh?


Last updated May 14, 2021