Guidelines
Guidelines
Usage
A Product Card should:
- Be used for leading people to a product detail page on the same platform.
- Be grouped with related Cards into vertical feed and horizontal rail interfaces.
- Have appearance be set to 'dark' in light interfaces and 'light' in dark interfaces.
- Use the respective viewport property for the interface. 'desktop' for desktop interface designs and 'mobile' for mobile interfaces.
Content
A Product Card should:
- Use enticing content on the Card that sets expectations correctly. For the product image, check out the Image guidelines.
- Include a product image asset that is replaced by a "preview video" of a maximum of 5 seconds in duration when provided.
- Include as much content as possible for maximum engagement. It is recommended to include at least a product name and meta-text in the Card's data. For meta-text it is recommended to present information that can affect engagement, like products' gender fit or another detailed aspect.
- Limit all information to a maximum of 1 row of text.
- Feature a clear call-to-action style label on the Button, like "Buy now". It is not recommended to feature prices on the Card as the component should serve as a window to a shop rather than allowing a user to buy something directly from the Card.
Layout
A Product Card should:
- Have its layout be set to ‘normal’ when the Card is used in feeds, vertical layouts, or featured in a stand-alone context.
- Have its layout be set to ‘compact’ when the Card is being used in rails or in a narrow horizontal interface.
- Always use the same layout value for all Cards in a group.
- Keep its original Elevation and appearance when subject to interactions in design.
- Be resized proportionally when used in layouts without adjusting font metrics manually. This conserves a balanced layout following the Gestalt Principles of Similarity, as the font metrics are implemented with fluid-typography.
Accessibility
A Product Card should:
- Have descriptive image-alt attributes (alternate text) for providing the content in an alternative text-based format and making the images more accessible without repeating other content on the Card.
- Have image-alt attributes, unless it’s for decorative purposes. Including “image of...” or “photo of...” in the alt attribute is not needed, as assistive technologies take care of declaring the media type.