Documentation
Feedback
Guides
Storefront Development

Storefront Development
Storefront development
ProductCard

Displays summarized information about a product.

The 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.
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.
Example
Code

Usage

Import the component


_10
import {
_10
ProductCard,
_10
ProductCardImage,
_10
ProductCardContent,
_10
} from "@faststore/ui";

Import styles

To apply styles, include the following in your stylesheet:

_10
@import "@faststore/ui/src/components/molecules/ProductCard/styles.scss";


Examples

Variants

Prefer using buyButton or discountBadge, never both.

Wide with BuyButton

Example
Code

Out of Stock

To replicate this style, add outOfStock prop on both ProductCard and ProductCardContent.
Example
Code

Bordered

Example
Code

Design tokens

Local tokenDefault value/Global token linked
--fs-product-card-paddingvar(--fs-spacing-1) var(--fs-spacing-1) var(--fs-spacing-2) var(--fs-spacing-1)
--fs-product-card-min-width10rem
--fs-product-card-shadowvar(--fs-shadow)
--fs-product-card-shadow-hovervar(--fs-shadow-hover)
--fs-product-card-bkg-color
var(--fs-color-body-bkg)
--fs-product-card-bkg-color-hover
var(--fs-product-card-bkg-color)
--fs-product-card-bkg-color-focus
var(--fs-product-card-bkg-color-hover)
--fs-product-card-border-radiusvar(--fs-border-radius)
--fs-product-card-border-color-hover
var(--fs-border-color-hover)
--fs-product-card-transition-functionvar(--fs-transition-function)
--fs-product-card-transition-propertyvar(--fs-transition-property)
--fs-product-card-transition-timingvar(--fs-transition-timing)
--fs-product-card-sponsored-label-sizevar(--fs-text-size-tiny)
--fs-product-card-sponsored-label-color
var(--fs-color-text-light)

Nested Elements

Image

Local tokenDefault value/Global token linked
--fs-product-card-img-radiusvar(--fs-product-card-border-radius)
--fs-product-card-img-scale-hover1

Title

Local tokenDefault value/Global token linked
--fs-product-card-title-color
var(--fs-color-text)
--fs-product-card-title-sizevar(--fs-text-size-base)
--fs-product-card-title-weightvar(--fs-text-weight-regular)
--fs-product-card-title-max-linesvar(--fs-text-max-lines)

Price

Local tokenDefault value/Global token linked
--fs-product-card-price-gapvar(--fs-spacing-1)
--fs-product-card-price-color
var(--fs-color-text)
--fs-product-card-price-sizevar(--fs-text-size-base)

Tax Label

Local tokenDefault value/Global token linked
--fs-order-summary-taxes-label-color
var(--fs-color-info-text)
--fs-order-summary-taxes-text-sizevar(--fs-text-size-tiny)
--fs-order-summary-taxes-text-weightvar(--fs-text-weight-regular)

Desing tokens: Out of Stock

Local tokenDefault value/Global token linked
--fs-product-card-out-of-stock-bkg-color
var(--fs-color-disabled-bkg)
--fs-product-card-out-of-stock-border-color
var(--fs-color-neutral-1)
--fs-product-card-out-of-stock-img-opacity.5

Desing tokens: Bordered

Local tokenDefault value/Global token linked
--fs-product-card-border-widthvar(--fs-border-width)
--fs-product-card-border-color
var(--fs-border-color-light)

Wide

Local tokenDefault value/Global token linked
--fs-product-card-wide-padding0
--fs-product-card-wide-content-paddingvar(--fs-spacing-2)
--fs-product-card-wide-min-width9rem
--fs-product-card-wide-bkg-color
var(--fs-color-neutral-bkg)

Data attributes

You can target and override ProductCard styles using the following data attributes:
data-fs-product-card
data-fs-product-card-bordered="true"
data-fs-product-card-variant="default | wide"
data-fs-product-card-image
data-fs-product-card-content
data-fs-product-card-heading
data-fs-product-card-title
data-fs-product-card-prices
data-fs-product-card-actions
data-fs-product-card-taxes-label
data-fs-product-card-sponsored-label

Props

All product card related components support all attributes also supported by their respective HTML tags. Besides those attributes, the following props are also supported:

ProductCard

NameTypeDescriptionDefault
borderedfalse | trueSets a border to the component.false
variant"wide" | "default"Sets the component's size.default
outOfStockfalse | trueEnables a outOfStock status.
testIdstringID to find this component in testing tools (e.g.: cypress, testing-library, and jest).fs-product-card

ProductCardImage

NameTypeDescriptionDefault
testIdstringID to find this component in testing tools (e.g.: cypress, testing library, and jest).fs-product-card-image
aspectRationumberSpecifies the ProductCard image's aspect ratio.1

ProductCardContent

NameTypeDescriptionDefault
testIdstringID to find this component in testing tools (e.g.: cypress, testing library, and jest).fs-product-card-content
title*stringSpecifies the product's title.
linkPropsPartial<LinkProps<LinkElementType>>Props for the link from the ProductCard component.
pricePriceDefinitionSpecifies product's prices.
outOfStockfalse | trueEnables an outOfStock status.
outOfStockLabelstringSpecifies the OutOfStock badge's label.Out of stock
ratingValuenumberSpecifies the Rating Value of the product.
buttonLabelstringSpecifies the button's label.Add
showDiscountBadgefalse | trueEnables a DiscountBadge to the component.
onButtonClick() => voidCallback function when the button is clicked.
includeTaxesfalse | trueSpecifies whether the displayed price should include taxes.false
includeTaxesLabelstringSpecifies the include taxes label, if taxes are included.Tax included
sponsoredfalse | trueSpecifies if the displayed product is sponsored.false
sponsoredLabelstringSpecifies the sponsored label, if advertisement is applicable.Sponsored
deliveryPromiseBadgesDeliveryPromiseBadge[]List delivery badges, if enabled and available.

Other Resources

PriceDefinition

NameTypeDescriptionDefault
valuenumberThe raw price value.
listPricenumberProduct's list price
formatterPriceFormatter(price: number, variant: PriceVariant) => ReactNode

Contributors
4
Photo of the contributor
Photo of the contributor
Photo of the contributor
Photo of the contributor
Was this helpful?
Yes
No
Suggest Edits (GitHub)
Contributors
4
Photo of the contributor
Photo of the contributor
Photo of the contributor
Photo of the contributor
On this page