Intro

Cards typically serve as previews, offering users a glimpse of more detailed information and functionality. To facilitate navigation, users can interact with the card itself.

We distinguish between navigation for the entire card (“card navigation”) and navigation elements within the card content. This article focuses on card navigation and the associated interaction states.

You have several options for guiding users from a card to an application, page, or view: you can make the entire card interactive, use an interactive header, or include a button that leads to the navigation destination. Deciding which option (navigation pattern) to use depends on the card's complexity and the need for consistency among cards within the same group.

Examples of card navigation options – indicated by the cursor position on hover

The navigation pattern within a group of cards should be consistent, allowing users to easily find interactive areas without having to search for them.

There are several ways to enable and indicate the navigation for the card:

  1. Whole card is interactive: For simple cards with a compact piece of information, such as tile-like or button-like cards.
  2. Interactive header: For cards with multiple interactive UI elements in the content, such as interactive list items. Using an interactive header makes the card navigation more obvious, as the clickable area would otherwise be too small to hit the card itself.
  3. Tertiary button (link) in the footer: A button in the footer clearly indicates a navigation option, such as View More.

You can decide on the navigation pattern for a set of cards on a page and optimize the card design accordingly.

Different options for navigating from a card to an application, page, or view

Guidelines

Cards with Extensive Interactive Elements

Do

For cards featuring large, extensive interactive elements, like an interactive list or chart:

  • Use an interactive header for card navigation.
  • Alternatively, use a button in the footer for card navigation.

Interactive list items on a card with an interactive header

Don't

Don’t make the whole card interactive if it contains extensive interactive elements.

Unlike the interactive elements inside the card, the card header – potentially the only area triggering card navigation – won’t have its own hover state.

Interactive list items on an interactive card

Pattern Consistency

Do

Ensure the navigation pattern for a set of cards within a layout is consistent.

Two sets of cards, each with a consistent navigation pattern

Don't

Don't mix different navigation patterns within a set of cards.

Inconsistent use of navigation options within a set of cards

Card Mix – With and Without Card Navigation

Do

When dealing with a mix of cards – some with navigation options and some without – use a button or link in the card footer for navigation.

This approach indicates navigation clearly and consistently, so users don't have to hover over each card or header to find interactive areas.

Example of a set of cards where only a few have a navigation option

Don't

Don't combine interactive cards (or cards with interactive headers) with non-interactive cards.

Users won't be able to easily recognize which card areas offer navigation options.

Example of a set of cards where only a few have a navigation option

Components

Implementation

Specifications

Components

Implementation