Skip to main content

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

Loading...

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

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.

Didn't find your answers? Ask the Community. For documentation suggestions, submit your feedback.

JOIN THE COMMUNITY