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) |
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-carddata-fs-product-card-bordered="true"data-fs-product-card-variant="default | wide"data-fs-product-card-imagedata-fs-product-card-contentdata-fs-product-card-headingdata-fs-product-card-titledata-fs-product-card-pricesdata-fs-product-card-actionsdata-fs-product-card-taxes-labeldata-fs-product-card-sponsored-labelProps
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.04
4k Philips Monitor 27”
Original price:$490Price:$420
Echo Dot Smart Speaker
Original price:$310Price:$280
Aedle VK-1 L Headphone
Original price:$150Price:$130
Oculus VR Headset
Original price:$344Price:$315
Apple 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:$229
Anker SoundCore Liberty Air
Original price:$643.71Price:$486.34
Fujifilm X-T1 Camera
Original price:$495.97Price:$366.11
SANDMARC Fisheye Lens
Original price:$946.73Price:$636.05
Apple 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