Documentation
Feedback
Guides
Storefront Development

Storefront Development
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

_10
import {
_10
ProductCard,
_10
ProductCardImage,
_10
ProductCardContent,
_10
} from '@faststore/ui'

Import Styles

_10
import '@faststore/ui/src/components/molecules/ProductCard/styles.scss'


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:

Product Card

NameTypeDescriptionDefault
borderedfalse | trueSets a border to the component.false
variant"wide" | "default"Sets the component's size.default
outOfStockfalse | trueEnables a outOfStock status.
testIdstringID to find this component in testing tools (e.g.: cypress, testing-library, and jest).fs-product-card

Product Card Image

NameTypeDescriptionDefault
testIdstringID to find this component in testing tools (e.g.: cypress, testing library, and jest).fs-product-card-image
aspectRationumberSpecifies the ProductCard image's aspect ratio.1

Product Card Content

NameTypeDescriptionDefault
testIdstringID to find this component in testing tools (e.g.: cypress, testing library, and jest).fs-product-card-content
title*stringSpecifies the product's title.
linkPropsPartial<LinkProps<LinkElementType>>Props for the link from ProductCard component.
pricePriceDefinitionSpecifies product's prices.
outOfStockfalse | trueEnables a outOfStock status.
outOfStockLabelstringSpecifies the OutOfStock badge's label.Out of stock
ratingValuenumberSpecifies Rating Value of the product.
buttonLabelstringSpecifies the button's label.Add
showDiscountBadgefalse | trueEnables a DiscountBadge to the component.
onButtonClick() => voidCallback function when button is clicked.

Other Resources

PriceDefinition

NameTypeDescriptionDefault
valuenumberThe raw price value.
listPricenumberProduct's list price
formatterPriceFormatter(price: number, variant: PriceVariant) => ReactNode

Design Tokens

Local tokenDefault value/Global token linked
--fs-product-card-paddingvar(--fs-spacing-1) var(--fs-spacing-1) var(--fs-spacing-2) var(--fs-spacing-1)
--fs-product-card-min-width10rem
--fs-product-card-shadowvar(--fs-shadow)
--fs-product-card-shadow-hovervar(--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-radiusvar(--fs-border-radius)
--fs-product-card-border-color-hover
var(--fs-border-color-hover)
--fs-product-card-transition-functionvar(--fs-transition-function)
--fs-product-card-transition-propertyvar(--fs-transition-property)
--fs-product-card-transition-timingvar(--fs-transition-timing)

Nested Elements

Image

Local tokenDefault value/Global token linked
--fs-product-card-img-radiusvar(--fs-product-card-border-radius)
--fs-product-card-img-scale-hover1

Title

Local tokenDefault value/Global token linked
--fs-product-card-title-color
var(--fs-color-text)
--fs-product-card-title-sizevar(--fs-text-size-base)
--fs-product-card-title-weightvar(--fs-text-weight-regular)
--fs-product-card-title-max-linesvar(--fs-text-max-lines)

Price

Local tokenDefault value/Global token linked
--fs-product-card-price-gapvar(--fs-spacing-1)
--fs-product-card-price-color
var(--fs-color-text)
--fs-product-card-price-sizevar(--fs-text-size-base)

Variants

Default

Example
Code

Out of Stock

To replicate this style, add outOfStock prop on both ProductCard and ProductCardContent.
Example
Code
Local tokenDefault 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
Local tokenDefault value/Global token linked
--fs-product-card-border-widthvar(--fs-border-width)
--fs-product-card-border-color
var(--fs-border-color-light)

Wide

Prefer using buyButton or discountBadge, never both.
Example
Code
Local tokenDefault value/Global token linked
--fs-product-card-wide-padding0
--fs-product-card-wide-content-paddingvar(--fs-spacing-2)
--fs-product-card-wide-min-width9rem
--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
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page