Documentation
Feedback
Guides
API Reference
App Development
Storefront Development
VTEX IO Apps
Release Notes
Storefront Development
FastStore
Store Framework
(Legacy) CMS Portal
FastStoreUI componentsMolecules
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 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:

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
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Order summary
« Previous
Product title
Next »
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page