Card (Vertical and Horizontal)

Overview

Card is a Visual Composer component with one or more sections of content. It is a highly structured container element in that the types of possible subcomponents are predefined (card header, section image, etc.), but WCMS users have a lot of flexibility in choosing the subcomponents and in styling and laying them out. A card can contain links, or the entire card can be clickable.

A card can be horizontal or vertical in orientation (the position of each image relative to its text). Card sections can be stacked or side-by-side.  The example above is a horizontal card with stacked sections. More examples are provided on this page.

Usage

Cards 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 cards with images

Be careful about adding a card 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.  (These options are in the Advanced tab for card settings.) 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.”
• Cards allow several types of text, but rarely is there a need for all in the same card. For example, a single-section card typically does not need both a header and a section title.
• Use subtitle or subtext to provide date or source information.

Colors

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

Layout

• Be careful not to create too many card styles and layouts on a page.
• Use borders and shading consistently across a page to provide a cohesive look and feel.
• For cards with multiple sections, use a header to ensure visual cohesiveness, particularly with large cards or cards with three or more sections.
• When using images in cards, 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 more suggestions on cards, as well as general best practices that can be applied to cards.

Linking

• Do not use the “Make Entire Card Clickable” option for cards with multiple sections.
• The WCMS allows links on card headers, but we do not recommend this approach. For single-section cards, make the entire card clickable or use an action button or link. For multi-section cards, use action buttons or links.
• Follow CDC policy when linking to non-HTML files and external sites.

The card to the right illustrates three best practices:  use of single shade (in this case with one accent detail), use of call-to-action verb (“Read”), and use of subtext to provide the date in a consistent format.