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
• Text call-out with title
• Text wrapped around image (image optional)
  By far the most common element you'll use.
• In-Page Navigation
  A little expandable/collapsible panel that shows major sections of a webpage.

---

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.

Required Title for Fact Check Call-Out Element

Body text goes here for the fact check callout. Some styling tools are available:

• Bold
• Italics
• Underline
• Strikethrough (shouldn't really ever use this one, but it's here)

Tables and links are also supported.

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.

Required Title for Text Call-Out with Title

Body text goes here for the text call-out with title. Note that the body text is italicized by default; this cannot be altered. Some styling tools are available:

• Bold
• Underline
• Strikethrough (shouldn't really ever use this one, but it's here).

Tables and links are also supported.

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.

Text wrapped around image (image optional) instructions (NPS only) | Return to top of the page

---

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.

---

< Back to the element gallery index