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.
Overview
Example
Code
Import
Import the component from @faststore/ui
_10import {_10 ProductCard,_10 ProductCardImage,_10 ProductCardContent,_10} from '@faststore/ui'
Import Styles into your FastStore project
To apply the styles of this component in your FastStore project, import the following into your stylesheet:
_10@import '@faststore/ui/src/components/molecules/ProductCard/styles.scss';
Follow the instructions in the Importing FastStore UI component styles tutorial.
Usage
Example
Code
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 |
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 |
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) |
Variants
Default
Example
Code
Out of Stock
To replicate this style, add
outOfStock prop on both ProductCard and ProductCardContent.Example
Code
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 |
Bordered
Example
Code
| 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
Prefer using
buyButton or discountBadge, never both.Example
Code
5% off
| 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) |
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.
Customization
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-labelRelated 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