ProductCard
Displays summarized information about a product.
The
ProductCard
displays summarized information about a product. It usually presents a call-to-action button, as well as the product's name, price, and image. The ProductCard
is composed of the following components:ProductCardImage
: wraps the product's image.ProductCardContent
: wraps the content details.
Use the
ProductCard
to:- Present a product collection on the homepage.
- 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
, but never both.Wide with BuyButton
Example
Code

Wide with Badge
Example
Code

5% off
Out of Stock
To replicate this style, add the
outOfStock
prop to 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) |
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) |
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) |
Design tokens: Delivery Promise badges
Local token | Default value/Global token linked |
---|---|
--fs-product-card-delivery-promise-badge-text-size | var(--fs-text-size-tiny) |
--fs-product-card-delivery-promise-badge-status-width | var(--fs-spacing-1) |
--fs-product-card-delivery-promise-badge-status-border-radius | var(--fs-border-radius-circle) |
--fs-product-card-delivery-promise-badge-status-available | var(--fs-color-success-2) |
--fs-product-card-delivery-promise-badge-status-unavailable | var(--fs-color-neutral-bkg) |
Design 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 |
Design 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) |
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 the same attributes as their respective HTML tags. In addition to 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