Overview
The Product Card is an indispensable element of any modern e-commerce website or application. It is a compact overview of a product and its most significant characteristic, commonly used for listing pages along with other product cards in a list or grid view. Alternatively, it can be used as an addition to the Filters, enabling users to quickly scan and compare items. Depending on the product specifics, the Product Card consists of different elements, but most often it includes the name of the product, images, price, size, color, brief description, and buttons for adding the product to cart or to favorites, buttons for quick preview or comparison.
The Product Card serves multiple purposes at once. It is a navigational element as most of the Product Cards lead to a product page upon click. It provides a compact overview of a product that is enough for a quick comparison with other products. It also lets the user perform various actions: save the product, add it to cart, compare it, and so on.
The Product Card should be visually appealing and capturing the most essential information about a product, incorporated nicely in a balanced page layout. Not only does it inform the user about the product details and promotions, but also builds a digital catalog, improves the user experience, and boosts the sales.
Key Principles
- Simplicity—the Product Card must include the most important details about a product but at the same time remain a compact overview.
- Short texts—the label and the description within the Product Card must not exceed the character limit.
- Impeccable image quality—the images within the Product Card must present the product at its truest. Any color variation must have their own image.
- Consistency—Product Cards must be of equal size, provide similar product details, and have the same internal layout.
Product Card Variants
The Telerik and Kendo UI Product Card offers design variants showcased in our demos, each tailored to enhance your application development by covering different usage scenarios.
Product Card 1
Product Card 4
UI Components Documentation
For product-specific information, refer to the corresponding Telerik and Kendo UI documentation:
