ProductCard

ProductCard displays summarized information about a product. They usually present a call-to-action button, as well as the product's name, price, and image.

The ProductCard is a compound of the following:

• ProductCardImage: wraps the product's image.
• ProductCardContent: wraps the content's details.
• ProductCardActions: wraps the call-to-action button of the product card.

Import

import { ProductCard, ProductCardActions, ProductCardContent, ProductCardImage } from '@faststore/ui'

Usage

Vintage Top Camera

89.968.9

15% OFF

Use cases

Use the ProductCard to:

• Present a product collection on the home page.
• Present product details on PLPs.
• Build a product slider that showcases multiple products at once, making it easier for visitors to browse your online store.

Props

testIdstring

Description

ID to find this component in testing tools (e.g.: cypress, testing-library, and jest).

Default value

store-product-card

Customization

data-store-product-card

data-product-card-content

data-product-card-actions

data-store-price

data-store-badge

data-store-button

Best practices

✅ Do's

• Use high-quality and attractive product images to grab shoppers' attention.
• Keep the product's title short.
• Use action verbs (e.g., Buy, Save, Add) in the call-to-action button.

❌ Don'ts

• Don't use the ProductCard for empty state scenarios. Instead, use the Skeleton component.
• Avoid cluttering your product card with too many badges.

Accessibility

• The img elements must have an alt attribute.
• For images containing text, the alt description must includes the image's text.