'Product Card' component
- Sergiy Nalyvayko (Unlicensed)
Component type | Block |
|---|---|
Component possible inclusions | Carousel |
Design source (in Figma) | |
Component status |
Introduction
Product Cards is a collection of information blocks that feature a certain set of attributes of a respective product. The main goal of a product card is prompt the website visitor to buy the product or navigation them to corresponding PDP.
Anatomy
Key Content
Item | Type | Notes |
Label | Typography |
|
Imagery | Image |
|
Category | Typography |
|
Product name | Typography | This will pull from the relevant content type field (e.i. product title) |
Product description | Typography | This will pull from the short description of the relevant item featured within the card |
Disclaimer | Typography | This will pull from disclaimer text associated with the title and description of the relevant item |
|
|
|
Visual Style
Sizes and layouts
Cards can exist in different sizes and layouts (vertical only in MVP).
Behavior
Interactive cards include a default, hover and active state.
Where cards have a single focusable element, the whole card (container) links to the primary link destination and any CTA is effectively decorative.
Where cards have more than one focusable element (not expected within MVP) this creates an additional tab stop.
Usage
Do’s
Use product cards when you need to feature a group of products. Cards are never shown by themselves, always within lists.
Analytics & Data
Most requirements are covered under lists.
Related/Similar Components
Page cards
Picto cards
Asset cards
List