Product Card
ProductCard displays summarized information about a product.
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
![combo](https://storeframework.vtexassets.com/arquivos/ids/190924/anthony-choren-e7dG26YCrZU-unsplash.jpg?v=637867501835430000)
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:
Product Card
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 |
Product Card Image
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 |
Product Card Content
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 | Label to determine if the price includes taxes. | Tax included |
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) |
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
![combo](https://storeframework.vtexassets.com/arquivos/ids/190924/anthony-choren-e7dG26YCrZU-unsplash.jpg?v=637867501835430000)
Out of Stock
To replicate this style, add
outOfStock
prop on both ProductCard
and ProductCardContent
.Example
Code
![combo](https://storeframework.vtexassets.com/arquivos/ids/190924/anthony-choren-e7dG26YCrZU-unsplash.jpg?v=637867501835430000)
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-img-opacity | .5 |
Bordered
Example
Code
![combo](https://storeframework.vtexassets.com/arquivos/ids/190924/anthony-choren-e7dG26YCrZU-unsplash.jpg?v=637867501835430000)
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
![combo](https://storeframework.vtexassets.com/arquivos/ids/190924/anthony-choren-e7dG26YCrZU-unsplash.jpg?v=637867501835430000)
![combo](https://storeframework.vtexassets.com/arquivos/ids/190924/anthony-choren-e7dG26YCrZU-unsplash.jpg?v=637867501835430000)
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-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
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