Text Box (ASAP)

Basic component for adding text to a page. Allows for text styling and hyperlinks.

Also known as: Rich Text Editor, RTE

Production Examples

Desktop/Tablet

Example of using the Text Box as a title.

Example of using the Text Box with Image component to create comparison columns on a content page.

Example of using the Text Box to communicate an offer, centered in the row.

More Production Examples

When Do I Use This?

On vertical or category pages, a text box commonly sits above component rows as a title for each section. In addition, It can be used standalone to communicate a message such as a phone number, promo code, or offer.

The Text Box component can be used at full width or in conjunction with a bootstrap row to limit it to columns. The styling options of a text box include headline sizes down to details text.

If you need to add text to a page, it is generally preferred to place text in HTML text by using this component, or another component that includes live HTML text. Live text (vs text in an image) better scales to the user's device, is accessible for people with disabilities, is more easily maintained, and is crawl-able for SEO.

Usage Guidelines

1. Don't use Text Box to recreate a component that already exists

Many of our existing components already include appropriately styled and functioning (wrapping) text. Additionally, each instance of this component adds page weight (load) because all content is coded as custom text styling.

Content Card component includes room for copy and a text link

Odd sizing and alignment issues result from attempting to recreate Content Card using the Image and Text Box components

2. Follow copywriting and capitalization standards

Use line length best practices when possible. For body copy, use between 45 and 75 characters. As for headings, use around 6 words (see research below). See copywriting guidelines

Follows standards

Headline should be Sentence Case. On Line 2 and 3 TVs, DVDs and brand names do not follow standards. CTAs should be lower case unless capitalization is appropriate.

3. Use the preset styles as much as possible, and for their intended purposes.

e.g. Use "link text" for link text; "homepage headline" for homepage headlines.

This example uses a homepage headline correctly.

This example uses a very large preset like "homepage headline" for a link.

Rationale

This component was built as one of the most basic buildling blocks of the ASAP platform. Its goal is to meet any need for HTML text for which existing components do not solve. Text colors and sizes roughly follow sitewide standards, which is based on many best practices (see Typography standards).

Research

Article: Readability: the Optimal Line Length

Various sources suggest 50-75 characters per line for body copy.

view full study

Article: The Ideal Length of Everything Online, Backed by Research

"We tend to absorb only the first three words and the last three words of a headline". Includes caveats.

view full study

Post a New Comment

Your feedback will help us improve this page. If you have a comment about the content of this page, use the form below, and the Patterns Team will get back to you within a business day.

For general questions or assistance, email the Patterns Team directly.