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
_10import {_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";
For details, see Importing FastStore UI component styles.
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

Out of stock
Bordered
Example
Code

Design tokens
Local token | Default value/Global token linked |
---|---|
--fs-product-card-padding | var(--fs-spacing-1) var(--fs-spacing-1) var(--fs-spacing-2) var(--fs-spacing-1) |
--fs-product-card-min-width | 10rem |
--fs-product-card-shadow | var(--fs-shadow) |
--fs-product-card-shadow-hover | var(--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-radius | var(--fs-border-radius) |
--fs-product-card-border-color-hover | var(--fs-border-color-hover) |
--fs-product-card-transition-function | var(--fs-transition-function) |
--fs-product-card-transition-property | var(--fs-transition-property) |
--fs-product-card-transition-timing | var(--fs-transition-timing) |
--fs-product-card-sponsored-label-size | var(--fs-text-size-tiny) |
--fs-product-card-sponsored-label-color | var(--fs-color-text-light) |
Nested Elements
Image
Local token | Default value/Global token linked |
---|---|
--fs-product-card-img-radius | var(--fs-product-card-border-radius) |
--fs-product-card-img-scale-hover | 1 |
Title
Local token | Default value/Global token linked |
---|---|
--fs-product-card-title-color | var(--fs-color-text) |
--fs-product-card-title-size | var(--fs-text-size-base) |
--fs-product-card-title-weight | var(--fs-text-weight-regular) |
--fs-product-card-title-max-lines | var(--fs-text-max-lines) |
Price
Local token | Default value/Global token linked |
---|---|
--fs-product-card-price-gap | var(--fs-spacing-1) |
--fs-product-card-price-color | var(--fs-color-text) |
--fs-product-card-price-size | var(--fs-text-size-base) |
Tax Label
Local token | Default value/Global token linked |
---|---|
--fs-order-summary-taxes-label-color | var(--fs-color-info-text) |
--fs-order-summary-taxes-text-size | var(--fs-text-size-tiny) |
--fs-order-summary-taxes-text-weight | var(--fs-text-weight-regular) |
Desing tokens: Out of Stock
Local token | Default 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 token | Default value/Global token linked |
---|---|
--fs-product-card-border-width | var(--fs-border-width) |
--fs-product-card-border-color | var(--fs-border-color-light) |
Wide
Local token | Default value/Global token linked |
---|---|
--fs-product-card-wide-padding | 0 |
--fs-product-card-wide-content-padding | var(--fs-spacing-2) |
--fs-product-card-wide-min-width | 9rem |
--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
Name | Type | Description | Default |
---|---|---|---|
bordered | false | true | Sets a border to the component. | false |
variant | "wide" | "default" | Sets the component's size. | default |
outOfStock | false | true | Enables a outOfStock status. | |
testId | string | ID to find this component in testing tools (e.g.: cypress, testing-library, and jest). | fs-product-card |
ProductCardImage
Name | Type | Description | Default |
---|---|---|---|
testId | string | ID to find this component in testing tools (e.g.: cypress, testing library, and jest). | fs-product-card-image |
aspectRatio | number | Specifies the ProductCard image's aspect ratio. | 1 |
ProductCardContent
Name | Type | Description | Default |
---|---|---|---|
testId | string | ID to find this component in testing tools (e.g.: cypress, testing library, and jest). | fs-product-card-content |
title* | string | Specifies the product's title. | |
linkProps | Partial<LinkProps<LinkElementType>> | Props for the link from the ProductCard component. | |
price | PriceDefinition | Specifies product's prices. | |
outOfStock | false | true | Enables an outOfStock status. | |
outOfStockLabel | string | Specifies the OutOfStock badge's label. | Out of stock |
ratingValue | number | Specifies the Rating Value of the product. | |
buttonLabel | string | Specifies the button's label. | Add |
showDiscountBadge | false | true | Enables a DiscountBadge to the component. | |
onButtonClick | () => void | Callback function when the button is clicked. | |
includeTaxes | false | true | Specifies whether the displayed price should include taxes. | false |
includeTaxesLabel | string | Specifies the include taxes label, if taxes are included. | Tax included |
sponsored | false | true | Specifies if the displayed product is sponsored. | false |
sponsoredLabel | string | Specifies the sponsored label, if advertisement is applicable. | Sponsored |
deliveryPromiseBadges | DeliveryPromiseBadge[] | List delivery badges, if enabled and available. |
Other Resources
PriceDefinition
Name | Type | Description | Default |
---|---|---|---|
value | number | The raw price value. | |
listPrice | number | Product's list price | |
formatter | PriceFormatter | (price: number, variant: PriceVariant) => ReactNode |
Related components
Apple Magic Mouse
Original price:$999Price:$950.044k Philips Monitor 27”
Original price:$490Price:$420Echo Dot Smart Speaker
Original price:$310Price:$280Aedle VK-1 L Headphone
Original price:$150Price:$130Oculus VR Headset
Original price:$344Price:$315Apple AirPods Pro
Original price:$249Price:$229
Apple Magic Mouse
Original price:$999Price:$950.044k Philips Monitor 27”
Original price:$490Price:$420Echo Dot Smart Speaker
Original price:$310Price:$280Aedle VK-1 L Headphone
Original price:$150Price:$130Oculus VR Headset
Original price:$344Price:$315Apple AirPods Pro
Original price:$249Price:$229Anker SoundCore Liberty Air
Original price:$643.71Price:$486.34Fujifilm X-T1 Camera
Original price:$495.97Price:$366.11SANDMARC Fisheye Lens
Original price:$946.73Price:$636.05Apple AirTag
Original price:$679.29Price:$426.14
ProductGridIt's a section generally used on PLP pages to list the products available in the store.
See more