Examples

Basic Usage

The Product Card needs only a few data points to display a fully functional Card.

💡 Pro Tip

Despite other Cards, the Product Card doesn't have a fixed aspect ratio but adapts its height to the dimensions of the image and the information displayed in its body.

Best Practices:

The name should only be used for the product name and should use title-case.

The name should display important information about the product at its beginning as it is clamped to a single line of text.

The text should provide further details about the linked product and should use sentence-case.

The image shouldn’t crop products or models’ heads and should not contain any text.

Provide the same image dimensions and amount of information to Product Cards when displayed in a collection.

Extended Usage

Optionally, the Product Card can be extended with additional information.

Best Practices:

The logo should be an SVG or PNG image with a transparent background.

Logos with a width/height ratio lower than 1.5 should have logo-narrowenabled

The logo should provide sufficient contrast according to the appearance of the card.

The alternative text of the logo should only be provided when it can provide more context to consumers with accessibility issues.

Preview Image

To improve the user experience, Product Cards can display preview images while waiting for the high-resolution feature image to be loaded.

Note: The example below demonstrates the rendering of the preview image only. In a production environment, a high-resolution _image_ would be set alongside.

Best practices:

Preview images should be a scaled version of the product image with a maximum of 50px width but the same aspect ratio.

To ensure meaningful content to be shown as fast as possible without any additional network requests preview images should be provided as base64 encoded data URIs.

Responsive Image and Performance

A great way to balance client-side performance and responsive images is by using srcset in conjunction with sizes and loading attributes. Read more about responsive image best practices here: Image

Mode and Appearance

By default, Product Cards adapt to a light mode environment and appear in light themselves. In a dark mode environment, we recommend changing the appearance of the Product Card to dark.

💡 Pro Tip

The appearance of a Product Card can be set using the appearance property or by nesting it into a cosmos-mode component. Read more about the Mode & Appearance concept.

Best practices:

The appearance of the card should follow the mode of the environment: The card appears light in a light environment and dark when used inside a dark environment.

The Product Card can use a light appearance in a dark environment for high-contrast designs, but should not use a dark appearance in a light environment

Listen to Resize Events

When initially mounting and whenever the media container of the Product Card resizes, the card emits a mediaresize event including the media's width and height.

A common use-case is to update the image to make it perfectly fit the available space.

Best Practices:

Only enable the observe-media-resize when needed