MENU

Text

Following web best practices, it's important to add text in a meaningful way that cleary communicates your message to your audience.

Below you'll learn how to use titles, heading styles, calls-to-action and more, to help audiences easily consume the content.

Text Component

The text component allows you to choose heading styles (H1, H2, H3, H4 and H4), paragraph styles (intro, paragraph and quote) and bullets and number lists. The text component is also used for links and buttons. For more information on links or buttons, see links section.

Intro Text is slightly larger and is used to present a summary of your page content and capture the attention of the user.  Introduction text should only be used at the start of the page content or start of section content.

The paragraph text is smaller than the intro and is used for all content that is not a heading style, intro text or quote style. 

The footnote text is smaller than paragraph and used for footnotes

  • This is a sample bullet list
  • This is a sample bullet list
  • This is a sample bullet list
  1. This is a sample numbered list
  2. This is a sample numbered list
  3. This is a sample numbered list

 Design Guidelines

There are three types of paragraph text you can use in your content: 

  • Introduction text - slightly larger and is used to present a summary of your page content and capture the attention of the user.  Introduction text should only be used at the start of the page content or start of section content.
  • Paragraph text - for regular paragraph text.
  • Footnote text - smaller text that acts as a footnote to your content.  

 How to

1. Add Text component – to add text component from the sidekick (under general) onto your page

2. Edit Text component

a. Edit the text component to add text 

b. Type in any text you wish to add to your page, as headings or paragraphs

Tip: If copying text from a word document, always paste the content into a text editor program such as text edit or note pad, and then copy it to your text component. This will strip out any formatting that Word may have added to your text

3. To change the text formats

a. Select from the text format dropdown list

  • Heading styles (H1, H2, H3, H4, H5)
  • Paragraph 

b. Add in CSS class style

Styles:

Intro - Type “intro” into the CSS Class field to style as an intro paragraph. The entire paragraph will be converted into an intro style.

Footnote - Reduces the font size to 12px and adds a dividing horizontal line above.

Quote – adding "quote" to CSS Class converts to a quote style, see quote style for proper usage.

Note: News page templates automatically convert the first paragraph style to introduction text. Ensure you write your news stories with this in mind.

References