Text Box Module

Overview

Like a card, a text-box module is a flexible but structured content element with multiple optional subcomponents such as header, title, image, subtext, etc. It can be horizontal or vertical in orientation. It can contain links, or the entire card can be clickable.  The main difference between a text box and a card is that the text box can contain only one section.

Horizontal Text Box

Standard-Size Title

Subtitle

Description: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Subtext

Action Button

As powerful as the card can be, if a module needs only one section, a text-box module offers one key advantage:  You can create a reusable text-box module for use on multiple pages.  (To create a reusable card, you must insert it into a Visual Composer module.)

More examples are available at the bottom of this page.

Usage

Text boxes can be especially effective for one of more of the following purposes:

• To group related information together, such as related topics on a landing page
• To highlight key points or a subsection of content
• To add visual interest, particularly text boxes with images

Be careful about adding a text box to a page that already has multiple boxed elements of different designs.

Heading Level

By default the title and header for cards and text boxes do not have a heading tags such as H2, H3, etc.  (The HTML div tag is used instead.)  In order to more accurately represent the structure of a web page for search engine optimization, consider assigning heading tags as needed.  (For Visual Composer text boxes, these options are in the Advanced tab of the Settings pop-up.  For reusable text boxes, the options are towards the bottom of the Settings pop-up.) Note that these heading assignments do not affect the title/header display.  They are only for indicating the logical level of the content.

Text

• Each text element should do its job in as few words as possible. Use “call to action” verbs like “Learn more” and “Find out about.”
• Text boxes allow several types of text, but rarely is there a need for all in the text box. For example, a text box rarely needs both a header and a title.

Colors

• Use neutral colors (white / gray) as the background color for the majority of your text boxes.  This is particularly true of larger text boxes.
• Use colored backgrounds sparingly to draw attention or highlight key content.
• Avoid using too many colors in a single text box. Most containers such as the text box look best with a single color (using different shades) or a single color with a small accent (such as a button).
• Avoid low-contrast text boxes.  For more information, see the Color Contrast Analyzerexternal icon.

Layout

• Be careful not to create too many text box styles and layouts on a page.
• Use borders and shading consistently to provide a cohesive look and feel.
• When you use images, make certain you follow the general guidelines for stand-alone images (effective alt text, accessible color contrast, etc.).
• Refer to the training presentation UX Best Practices ppt icon[PPT – 14 MB] for general best practices that can be applied to cards.

Linking

• The WCMS allows links on text box headers, but we do not recommend this approach. Use an action button or text link instead.
• Follow CDC policy when linking to non-HTML files and external sites.

Text boxes in the same row with “Make all modules equal height” checked:

Icon- and image-based text boxes with entire box made clickable (titles of different sizes, no headers):

Note that you can include an action button and make the entire text box clickable:

You can control the action control’s position (left, right, or center) and type (button or text link):

Examples of different image padding: