Text Elements

What Are These Elements?

The Text Elements group in the Element Gallery contains three elements. Links to instructions (on the Digital Community Site) are below. An example of each element is then shown lower on the page.

Fact Check Call-Out Element

Below is the fact check call-out element. Note the default display of a little checkbox/checkmark and the shaded background; these aspects of the element cannot be modified.
Fact check call-out instructions (NPS only) | Return to top of the page

Text Call-Out with Title Element

Below is the call-out with title element. Note the italicized, lighter font and the automatic horizontal rule (or line) that shows up above the required title line, as well as below the text.
Text call-out with title instructions (NPS only) | Return to top of the page

Text Wrapped Around Image (Image Optional)

Below is the standard text element.

There is no title field for this element, but you have access to several layers of heading styles:
  • Heading 2

  • Heading 3

  • Heading 4

Note: Headings should be used in sequence to help screen readers correctly interpret their heirarchy in the page—i.e., a heading 4 should not follow a heading 2, there should be a heading 3 in between them.

You also have access to a variety of text styling buttons, such as:
  • Bold (Pro tip: Do not use bold to act as headers for subsections within your text! Use one of the provided heading styles, as demonstrated above. This improves the readability of your page, both for sighted visitors and for people who are blind and using a screen reader to skim the page by just looking for headers).
  • Italics
  • Underline
  • Strikethrough
  • Subscript
  • Superscript
There are also some tools to set your text apart / make it stand out, such as:

Quotation style. This is great for a multi-line quote, especially if it's within a fairly long run of text.

  1. Numbered list (and bulleted list, as displayed above many times). Numbered and un-numbered lists improve readability of your content, so make liberal use of them when applicable!
  2. Numbered list item 2
  3. Numbered list item 3
Paragraph indentation. This can be a nice way to visually set apart some text, but without adopting the full-on quotation style shown above. Adding white space to dense text helps your readers.

There are also buttons to add tables or insert links into your text.

In-Page Navigation Element

This is a simple element that acts like a table of contents for a particularly lengthy page.

This element works by showing all text tagged or styled as Heading 2. Therefore, to make use of it, you must have at least one (or, as a best practice, at least 2) pieces of text styled as a Heading 2.

Last updated: March 29, 2018