Text Box Module

Best Practices

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
Massive wooden door
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.

So Many Options -- How Do I Choose?

The card, text-box module, navigation button, and “jumbotron” image with caption can perform similar roles on a page — such as providing attention-getting links on a home or landing page. Here are some points to consider when choosing the type of content for a job:

  • The card supports multiple structured text elements like title, subtext, and subtitle.  It also supports multiple sections. With the “make entire container clickable” option, it can function like a navigation button.  And it works well with or without images.
  • text-box module can perform the role of a card, but with only one section.  Note that there is a reusable version. You can now use icons instead of images but only in horizontal layout.
  • The navigation button is essentially a simple type of card, so it can be easier to work with when the more complex card is not needed.  As with the text box, you can use icons instead of images but in vertical as well as horizontal layout.
  • The jumbotron (image with text overlay) can provide a compelling visual for focusing visitors’ eyes on highlighted content. The text overlay can shift visitors’ attention to the message without hiding the image. A high-quality large image is essential.

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 Analyzer.

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 – 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.

Examples

Gray Text Box
Colorful door scene

The image has bold colors, so a subdued color works well for the content and header backgrounds. Gray works especially well because the  image has gray and black tones.

Same Shade

This text box uses variations of the main theme on a neutral (white) background.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Same Shade

This text box uses variations of the same shade (gray) but with a bit of accent color (the action button).

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.

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

Flower garden path
Large Title

Vertical text box with image on top. Accent border in primary color of main theme.

Flower garden path
Large Title

Vertical text box with image on top.  Accent border in secondary color of main theme. Lorem ipsum dolor sit amet.

Flower garden path
Large Title

Vertical text box with image on top.  Accent border in tertiary color of main theme.

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):

Header

Vertical card with action button on the left in colors of main theme. No title.

Header

Vertical card with action button on the left in colors of accent theme. No title.

Header

Vertical card with action text link on the left in grays.  No title.

Examples of different image padding:

Header

Vertical text box with no image padding.

Header

Vertical text box with standard image padding all sides.

Header

Vertical text box with large image padding all sides.