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

Horizontal button with padded image. Darkest gray background. No title.

Title

Text-only horizontal button with background in white and standard border with shadow.

Title

Vertical button with standard-size icon in secondary color of main theme.

Go to Examples
See examples on this page that illustrate key options.

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

Top of Page

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

Button Title

Vertical button with standard image padding all sides. White background. Standard border with shadow.

Button Title

Vertical button with no image padding. Darker gray background. No standard border.

Button Title

Vertical button with Large image padding all sides. Lightest gray background. Shadow with no standard border.

Buttons in a row constrained to the same height:

Button Title

Vertical button with medium-size icon. Lightest gray background with icon in primary color of main theme.

Button Title

Vertical button with medium-size icon. Lightest gray background with icon in primary color of main theme. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Button Title

Vertical button with medium-size icon. Lightest gray background with icon in primary color of main theme. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

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

Buttons with NO suppression of bottom container margin:

Button Title