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

Apple Magic Mouse

Original price:$999Price:$950.04

Apple Magic Mouse

Original price:$999Price:$950.04

5% off

Apple Magic Mouse

Original price:$999Price:$950.04

5% off

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.

---low the instructions in the Importing FastStore UI component styles tutorial.

Usage

Example

Code

Apple Magic Mouse

Original price:$999Price:$950.04

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 ProductCard component.
price	`PriceDefinition`	Specifies product's prices.
outOfStock	`false \| true`	Enables a outOfStock status.
outOfStockLabel	`string`	Specifies the OutOfStock badge's label.	`Out of stock`
ratingValue	`number`	Specifies 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 button is clicked.

Other Resources

PriceDefinition

Name	Type	Description
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)`

Variants

Default

Example

Code

Apple Magic Mouse

Original price:$999Price:$950.04

Out of Stock

To replicate this style, add outOfStock prop on both ProductCard and ProductCardContent.

Example

Code

Apple Magic Mouse

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

Apple Magic Mouse

Original price:$999Price:$950.04

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

Apple Magic Mouse

Original price:$999Price:$950.04

Apple Magic Mouse

Original price:$999Price:$950.04

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

- An error occurred while trying to load the image. https://storeframework.vtexassets.com/arquivos/ids/190932/mouse-black.jpg?v=1767729450
  Apple Magic Mouse
  Original price:$999Price:$950.04
- An error occurred while trying to load the image. https://storeframework.vtexassets.com/arquivos/ids/190903/unsplash-monitor.jpg?v=1767729451
  4k Philips Monitor 27”
  Original price:$490Price:$420
- An error occurred while trying to load the image. https://storeframework.vtexassets.com/arquivos/ids/190904/unsplash-smart-speaker.jpg?v=1767978734
  Echo Dot Smart Speaker
  Original price:$310Price:$280
- An error occurred while trying to load the image. https://storeframework.vtexassets.com/arquivos/ids/190901/unsplash-headphone.jpg?v=1766352858
  Aedle VK-1 L Headphone
  Original price:$150Price:$130
- An error occurred while trying to load the image. https://storeframework.vtexassets.com/arquivos/ids/190900/unsplash-vr-glasses.jpg?v=1765997962
  Oculus VR Headset
  Original price:$344Price:$315
- An error occurred while trying to load the image. https://storeframework.vtexassets.com/arquivos/ids/173596/est.jpg?v=1757659088
  Apple AirPods Pro
  Original price:$249Price:$229
- An error occurred while trying to load the image. https://storeframework.vtexassets.com/arquivos/ids/179130/sint.jpg?v=1757911413
  Anker SoundCore Liberty Air
  Original price:$643.71Price:$486.34
- An error occurred while trying to load the image. https://storeframework.vtexassets.com/arquivos/ids/171611/eius.jpg?v=1757657196
  Fujifilm X-T1 Camera
  Original price:$495.97Price:$366.11
- An error occurred while trying to load the image. https://storeframework.vtexassets.com/arquivos/ids/159818/debitis.jpg?v=1757639123
  SANDMARC Fisheye Lens
  Original price:$946.73Price:$636.05
- An error occurred while trying to load the image. https://storeframework.vtexassets.com/arquivos/ids/181988/nulla.jpg?v=1757915578
  Apple AirTag
  Original price:$679.29Price:$426.14
ProductShelf
Displays a list of products to be used as a section on the store.
See more
- An error occurred while trying to load the image. https://storeframework.vtexassets.com/arquivos/ids/190932/mouse-black.jpg?v=1767729450
  Apple Magic Mouse
  Original price:$999Price:$950.04
- An error occurred while trying to load the image. https://storeframework.vtexassets.com/arquivos/ids/190903/unsplash-monitor.jpg?v=1767729451
  4k Philips Monitor 27”
  Original price:$490Price:$420
- An error occurred while trying to load the image. https://storeframework.vtexassets.com/arquivos/ids/190904/unsplash-smart-speaker.jpg?v=1767978734
  Echo Dot Smart Speaker
  Original price:$310Price:$280
- An error occurred while trying to load the image. https://storeframework.vtexassets.com/arquivos/ids/190901/unsplash-headphone.jpg?v=1766352858
  Aedle VK-1 L Headphone
  Original price:$150Price:$130
- An error occurred while trying to load the image. https://storeframework.vtexassets.com/arquivos/ids/190900/unsplash-vr-glasses.jpg?v=1765997962
  Oculus VR Headset
  Original price:$344Price:$315
- An error occurred while trying to load the image. https://storeframework.vtexassets.com/arquivos/ids/173596/est.jpg?v=1757659088
  Apple AirPods Pro
  Original price:$249Price:$229
- An error occurred while trying to load the image. https://storeframework.vtexassets.com/arquivos/ids/179130/sint.jpg?v=1757911413
  Anker SoundCore Liberty Air
  Original price:$643.71Price:$486.34
- An error occurred while trying to load the image. https://storeframework.vtexassets.com/arquivos/ids/171611/eius.jpg?v=1757657196
  Fujifilm X-T1 Camera
  Original price:$495.97Price:$366.11
- An error occurred while trying to load the image. https://storeframework.vtexassets.com/arquivos/ids/159818/debitis.jpg?v=1757639123
  SANDMARC Fisheye Lens
  Original price:$946.73Price:$636.05
- An error occurred while trying to load the image. https://storeframework.vtexassets.com/arquivos/ids/181988/nulla.jpg?v=1757915578
  Apple AirTag
  Original price:$679.29Price:$426.14
ProductGrid
It's a section generally used on PLP pages to list the products available in the store.
See more

Overview

Import

Import Styles into your FastStore project

Usage

Props

Product Card

Product Card Image

Product Card Content

Other Resources

PriceDefinition

Design Tokens

Nested Elements

Image

Title

Price

Variants

Default

Out of Stock

Bordered

Wide

Use Cases

Customization

Related components

ProductShelf

ProductGrid