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-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 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.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