| Page Properties | ||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Introduction
Product Cards is Cards group information into flexible containers to let users browse 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 PDPrelated items and actions. Page cards feature other pages of the website prompting the user to navigate to these pages through clicking or tapping on page cards.
...
Anatomy
Key Content
Item | Type | Notes | |||
Label | Typography | e.g. Featured | |||
Imagery | Image | ||||
CategoryOverline | Typography | ||||
Product Page name | Typography | This will pull from the relevant content type field (e.i. product page title) | |||
Product Page description | Typography | This will pull from the short description of the relevant item featured within the card | Disclaimer | TypographyThis will pull from disclaimer text associated with the title and description of the relevant item |
...
Visual Style
...
Boundaries
Cards can exist in different sizes and layouts (vertical only in MVP).
...
have visual boundaries or not (adjusting subtlety)
...
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.
...
Use product cards when you need to feature a group of products. Cards are never shown by themselves, always within lists.
Don’ts
Don’t use page cards when you only need a simple call to action. Use a CTA Block instead.
Don’t use page cards when you need sequential text elements. Cards should be independent in nature and make sense in isolation.
Don’t use page cards when you only want to ‘decorate’ something to look like a card.
...
Analytics & Data
Most requirements are covered under lists.
...
Related/Similar Components
Page Product cards
Picto cards
Asset cards
List
...