Content card

The link appears at the bottom of the card as a link. There can only be one link or call to action per card. This is the preferred modifier when adding a link or action to a content card.

This modifier can’t be combined with the linked title modifier.

The link and the content card title are combined. The title will be underlined to show that the card is actionable. The user can navigate to the link by clicking anywhere on the card itself. Use this modifier if the addition of a separate CTA or link would be too repetitive of the card title, and then only if the CTA is a link.

This modifier can’t be combined with the link modifier.

Choose from available tag styles. See tag for more information.

The shadow decorative treatment adds a shadow around the content card to make the card stand out in the page. If the card has a link or action, the shadow will darken as the user hovers or presses on that link or action. This is the more common treatment, as it can be used whether the card is actionable or not.

This modifier can’t be combined with the gradient modifier.

The brand gradient decorative treatment adds an animated brand gradient bar at the bottom of the content card as the user hovers or presses on the link or CTA. Only use this style if the card is actionable.

This modifier can’t be combined with the shadow modifier.

Icons can be paired with content card's content to illustrate the card’s concept, and they have a set width of 64 x 64 px. See decorative icons for options.

Images can be paired with content cards for more visual interest and better page scanning. There are two aspect ratio options for the card image. See image for more information.

• 16:9
  • The image aspect ratio is fixed at 16:9. The image’s height is dependent on the card’s width.
• 1:1
  • The image aspect is fixed at 1:1. The image will be square, meaning the height and width are equal. The image size depends on the width of the card. This aspect ratio is generally used for product images and product cards.

The default style will have no border or block color.

The border style will apply a border, padding, and white background to the card.

Content cards contain one idea or topic. They often operate as an entry point to a different page with more information on that topic.

Cards organize similar but distinct content together by creating visual groups. This helps with scanning and promotes browsing.

Cards are used in conjunction with a few components:

• Card group
• Image
• Link
• Product card
• Tag

A card is simply a container to hold page content. This is why the card titles must follow the page’s semantic heading structure.

Cards focus the user on a single topic and lead the user to more information about that topic. For this reason, it’s important to include only one CTA in a card. No inline links should be added to the card’s description, as the card should function as an entry point for one page or action.

Key takeaways

Cards are:

• Good for chunking content together
• Good for when the user is browsing, not searching
• Good for homogenous content
• Bad for having things stand out
• Bad for compressing information
• Harder to scan than lists
• Responsive to a point

Study links

Primary sources (Boston Scientific user research)

No sources

Secondary sources

• Nielsen Norman Group — Cards: UI-Component Definition
• UX Planet — Using Card-Based Design To Enhance UX
• RubyGarage — Applying a Card-Based Design to User Interfaces: Best Practices

This component passes AAA WCAG standards. However, changes made by the content owner or implementer could impact accessibility compliance. Be sure to follow code standards and content guidelines to ensure that this component is fully accessible.

For more information, see the WAI-ARIA Authoring Practices for navigation and Deque’s screen reader keyboard shortcuts and gestures documentation.