Navigation Button

Best Practices

Overview

With only a title, description, and graphic (all of which are optional), the navigation button is like a simple version of the card. But unlike the card, the entire container is always clickable (assuming a target link is provided).  Another key difference is that an icon can go in the graphic slot in vertical or horizontal layout. (Note that you can also use icons with text boxes but only in horizontal layout.)

Like the card, the orientation can be vertical or horizontal (although the graphic is always on the left for horizontal layout and top for vertical layout), and there are many ways in which colors, borders, and button elements can be combined, as illustrated above.  More examples are available on this page.

Usage

On content pages, use navigation buttons singly or in small groups to direct visitors to related content.

On home or landing pages, use organized groups of navigation buttons to direct visitors to lower-level pages.

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.

General Guidelines

  • Keep text as brief as possible.
  • For buttons in the same row, check the row property “Make all modules equal height” for a cleaner display. (See examples on this page.)
  • Use call-to-action phrases like “learn more” or “find out how.”
  • When linking to external sites or non-HTML files, follow CDC’s linking policies.

Colors and Layout

  • Keep button styles consistent on a page.  Avoid mixing styles as much as possible (icon vs. graphic, vertical vs. horizontal orientation, etc.).
  • Considering using background row shading to visually group related buttons.
  • Use neutral colors (white / gray) as the background color for the majority of buttons. Colored backgrounds should be used sparingly to draw attention or to highlight key content.
  • Avoiding using too many colors. Most buttons looks best with a single color (using different shades) or a single color with a small accent (such as an accent border or accent-colored icons).
  • Avoid low-contrast buttons.  (This guidance applies to text-only and icon buttons as well as buttons with images.) For more information, visit the Color Contrast Analyzer.
  • When using images in cards, follow the general guidelines for stand-alone images (effective alt text, etc.).
  • Preview the page in all viewports.

Examples

Buttons in the same row (with NO height constraint on row):

Buttons in a row constrained to the same height:

Buttons with bottom container margin suppressed for each button (Advanced tab):

Buttons with NO suppression of bottom container margin: