Card (Vertical and Horizontal)

Best Practices

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.

Horizontal Card with Stacked Sections
door1
Section A 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

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
  • Building in the WCMS
    See key tips and guidelines for working with cards in the WCMS.
  • Text Box Module
    The text box module offers the same benefits as single-section cards, but with a couple of advantages.
  • Example Home Page
    Cards and text boxes can be a useful tools for building effective landing and home pages.
  • TP4 UX Best Practices [PPT - 14 MB]
    For general guidance on colors, layouts, and overall presentation, see this overview of TP4 best practices.

Be careful about adding a card 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.  (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.

Examples

Vertical Card with Side-by-Side Sections
Colorful door

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.

Colorful door

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.

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.

Same Shade

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

  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
Same Shade with Accent

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

  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
Same Shade - Icon Color

This card uses the same shade (Teal) translated into the action button and the icon color.

  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
Same Shade with Accent Icon Color

This card uses variations of the same shade (gray) but with a bit of accent color (the action button and icon color).

  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
Spring flowers
Section Title

Vertical stacked card with section images on top.  Accent border in primary color of main theme.

Spring flowers
Section Title

Vertical stacked card with section images on top. Accent border in primary color of main theme.

Fall forest
Section Title

Vertical stacked card with section images on top.  Accent border in secondary color of main theme.

Fall leaves
Section Title

Vertical stacked card with section images on top. Accent border in secondary color of main theme.

Winter snow
Section Title

Vertical stacked card with section images on top.  Accent border in tertiary color of main theme.

Winter trees
Section Title

Vertical stacked card with section images on top. Accent border in tertiary color of main theme.

Spring flowers
Section Title

Horizontal stacked card. Lightest gray background, no border.

Spring flowers
Section Title

Horizontal stacked card. Lightest gray background, no border.

Fall forest
Section Title

Horizontal stacked card. Shadow, no standard border.

Fall leaves
Section Title

Horizontal stacked card. Shadow, no standard border.

Card Header
Example Image
Section Title

Three-section card in side-by-side layout. Card header and bottom accent border in primary color of main theme. No standard border.

Section Subtext
Example Image
Section Title

Three-section card in side-by-side layout. Card header and bottom accent border in primary color of main theme. No standard border.

Section Subtext
Example image
Section Title

Three-section card in side-by-side layout. Card header and bottom accent border in primary color of main theme. No standard border.

Section Subtext
Card Header

Single-section vertical card with image on the bottom and a “more” button on the left. No section title.

Mountains
Card Header

Single-section vertical card with image on the bottom and a text action link on the left. No section title.

Example image
Card Header

Single-section vertical card with image on the bottom and a “more” button on the right. No section title.

Winter Road
Card Header
Section Title

Vertical card with two stacked sections. Lightest gray content background with card header in secondary color of main theme. No standard border. Shadow effect.

Example image
Section Title

Vertical card with two stacked sections. Lightest gray content background with card header in secondary color of main theme. No standard border. Shadow effect.

Example image