Styles

The PNW CMS implementation leverages purpose-built modules for specific types of content. These modules provide a flexible framework for building many different types of pages. A rich text editor that is similar to popular desktop word processing software is used within many modules, including the Visual Editor module.

Text formats and styles are applied within the rich text editor. An important distinction is the style or look of text versus the underlying structure and hierarchy of a page.

• Heading tags are indicators used in HTML to help structure your webpage from an accessibility and SEO point of view. Heading tags range from H1 to H6 and form a hierarchical structure to your page. Heading tags are pre-styled to match the PNW design, including padding, font size, font weight and text color. Heading tags can be applied to text within the rich text editor by highlighting text and selecting the desired heading from the first drop-down in the toolbar.
• Text styles and formats do not change the HTML structure of the content and are used simply to change the look or display of the content. These can also be easily applied within the rich text editor, using the Formats drop-down box. The options available within the Formats drop-down vary based on the content selected. For example, regular paragraph text has different style options than links.

Heading 2 Example

The H1 or Heading 1 is reserved for the page title and should not be used within the body of the page.

Heading 3 Example

Heading 4 Example

Heading 5 Example

Heading 6 Example

Text Style Examples

Large paragraph for introductory text.

Small paragraph text.

Title

The Title style is useful when a subheading is needed for readability purposes, but not structural or hierarchical purposes.

Subtitle

The Subtitle style is useful to complement the Title or as a standalone style that helps with readability and does not impact the page hierarchy.

All Caps

All Caps is another style that is useful to complement the Title or as a standalone style that helps with readability and does not impact the page hierarchy.

Link Styles

button gold

button Blue

CTA link

Gold link

Combinations

Sometimes it is necessary to set the H tag based on a heading’s hierarchical position on the page, but the default style of the heading is not ideal in terms of readability or aesthetic. In these cases, styles and formats can be applied to heading tags without altering the underlying structure of the page.

Heading 2 with Title Style

Heading 2 with Subtitle Style

Heading 2 with All Caps Style

Heading 3 with Subtitle Style

Heading 3 with all caps style