Text Box (ASAP)
Basic component for adding text to a page. Allows for text styling and hyperlinks.
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.
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.
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
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 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).
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