Product card

The card title is a heading and will appear within the page’s semantic heading structure. Use this modifier if the product card is part of the page’s content structure, such as within a specialty landing page.

The card title is not a heading and will not appear within the page’s semantic heading structure. The title’s font size options will match existing heading sizes. Use this modifier if the product card appears within a group of other product cards, such as on an eCommerce search results page.

Tags are used to identify the product’s product family or to indicate a new or featured product. See tag for more information.

The shadow decorative treatment adds a shadow around the product card to emphasize its presence on the page. If the product card has a link or action, the shadow will darken as the user hovers or presses on that link or action.

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 product card when the user hovers or presses on the link or CTA.

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

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

• 50% split
  • The 50% split image size means that the image takes up the same height as the product card content
• 1:1
  • The image aspect ratio 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 product card.

The default style will have no border or block color.

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

Product cards contain a single product and its description. They operate as an entry point to the product’s detail page.

Cards are not the best if the user is more likely to compare content between cards. Lists outperform cards in these use cases. Cards can be overwhelming when the user is viewing a large number of cards on a large viewport. Make sure to give the user different views, such as a list view, when displaying product information.

Cards are used in conjunction with these components:

• Card group
• Content card
• Image
• Link
• Tag

A card is simply a container to hold product information. Product cards can appear as part of a content hierarchy or as part of a collection of other products.

Card titles should follow the page’s semantic heading structure when displaying product cards within a content hierarchy, such as within a campaign or medical specialty page. Card titles can be non-semantic if the cards appear as part of a collection other product cards, such as within the eCommerce interface or on a search results page.

The card title will always be linked. State the product’s name clearly to avoid confusion. No inline links should be added to the card’s description, as the card should function as an entry point for one page.

Key takeaways

Cards are:

• Ideal for chunking content together
• Ideal for when the user is browsing, not searching
• Ideal for homogenous content
• Inadequate for having things stand out
• Inadequate for compressing information
• Harder to scan than lists
• Limited in responsiveness

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.