Best practices
Product cards are reserved for listing products only, with restricted content to avoid cluttering the interface and making it difficult for users to scan the products. Information should be easy to digest and relevant so users can identify which product to review in more detail. Text and visual elements are placed in a way that indicates hierarchy, and product images should never be covered by any elements.
Unlike other types of cards, the Product card should never contain call to action elements (the icon button potentially used to favourite a product is an exception) as users normally need more detailed information before placing anything in a basket.
On mobile, never use the portrait layout in any other case than inside carousels.
When to use
- When you need to group many products in a digestible form.
- When you need to offer a short entry point that is linked to more detailed content.
- Use Product cards to lay out single or multiple sets product information in the same region of the page. These cards may include a text description, colour options, and price. Product cards have similar widths, but heights should accommodate varying content and have the same height in a row.
When not to use
- When displaying a preview of anything other than products (articles, categories, ads, etc)
- When more detailed product information is needed. Use a table instead.
Anatomy
- Product image
- Brand/Text label (optional)
- Title
- Description (optional)
- Short label (optional) – For specific product information e.g category, type, availability, etc
- Colour options (optional)
- Badge (optional)
- Favourite action (optional)
- Larger label (optional) – E.g for indicating cost, refundability, etc
Behaviour
A part from the Icon button that can be used to favourite a product, there are not other interactive elements on the card besides the entire card surface. Clicking/tapping anywhere on the card surface will take the user to the product details page.
Interaction
The product card supports an icon button that adjusts size on touch screens. It inherits all button states from the Icon button component and an additional “selected” state, specifically for the product card.
Responsive behaviour
The width is fixed so product cards do not “fill” out available space horizontally. Consider this when using in Carousels, where the layout supports rows of three and four elements.
Mobile
As the the grid layout becomes a list on smaller devices, cards take on a landscape format to better accommodate the contents.
Variants
When used inside the Carousel, the cards instead keep their portrait format as the layout of the Carousel allows for more space and needs cards to be partially visible horizontally.
States
A soft shadow under the card when hovered, together with the cursor transformation, indicates that a card can be clicked. Product cards can also show a focused state, making keyboard navigation clear and consistent with other interactive elements.
Content guidelines
- Use only existing elements and avoid adding more information on the cards
- The description is limited to two lines, truncating any overflowing text. Always make sure the description is available in full on the details page.
- Avoid repetitive information, such as product name.
- Besides product image and title, consider keeping any irrelevant elements hidden to keep visual clutter down to a minimum.
|
✅ Do |
🛑 Don’t |
|---|---|
|
Use existing badge variants to promote single key attributes or states (e.g free sample or new) |
Don’t re-design badges or over use them. They exist to draw attention but will stop to stand out if displayed too generously. |
|
✅ Do |
🛑 Don’t |
|---|---|
|
Provide minimum and relevant product details for better scanability. |
Repeat information in multiple places on the card – real estate is expensive. |
|
🛑 Don’t |
🛑 Don’t |
|---|---|
|
Write long product descriptions on the cards. |
Use shadow to frame cards. Shadows are a visible on hover and indicate interaction ability. |