Product Card

Display key product information in a card format

npm run add ProductCard

Use the ProductCard component to display key product information like product image, pricing, rating, badges or ribbons. They can be used for:

• Improving product discoverability: By providing essential details at a glance, allowing users to quickly compare items.
• Improving conversions: By presenting pricing, labels, and ratings, helping guiding users toward a purchasing decision.
• Boosting engagement: Through interactive features like adding products to favorites.

New Preview

Product Card for Astro Fully responsive

$25 ★★★★★

---
// Your import path might differ
import checkWavesIcon from '@icons/check-waves.svg?raw'
---

<ProductCard
    href="/products/astro"
    img={{
        src: '/img/products/astro.png',
        alt: 'Astro',
        width: 250,
        height: 150
    }}
    name="Product Card for Astro"
    price="$25"
    showFavoriteButton={true}
    badge={{
        text: 'Fully responsive',
        icon: checkWavesIcon
    }}
    button={{
        text: 'Preview',
        href: '/previews/astro'
    }}
    ribbon={{
        text: 'New',
        theme: 'alert'
    }}
    rating={{
        score: 5,
        color: 'var(--w-color-warning)'
    }}
/>

The ProductCard component only expects the following three props:

• img: Sets an image for the product card.
• href: Sets the link for the card.
• name: Sets the name of the product on the card. If the name is too long and visually can’t fit its container, it’ll be automatically clipped, like in the example below.

All other props are optional. The following card is displayed with the required props only:

Required props only

Required props only with very long name

Badges

To add badges to the card, use the badge prop that expects an object in the form of BadgeProps, along with a text property and an optional icon property:

Product card with badge Fully responsive

<ProductCard
    ...
    badge={{
        text: 'Fully responsive',
        icon: 'circle-check' // You can also pass SVG strings
    }}
/>

For a list of available icon types that you can use with the Astro component, please refer to our Icon component documentation.

Ribbons

Ribbons can also be specified using the ribbon prop that can be described using a RibbonProps object along with a text node:

Ribbon

Product card with ribbon Fully responsive

New

Themed ribbon Fully responsive

Updated

Folded ribbon Fully responsive

<ProductCard
    ...
    ribbon={{ text: 'Ribbon' }}
/>

<ProductCard
    ...
    ribbon={{
        text: 'New',
        theme: 'alert'
    }}
/>

<ProductCard
    ...
    ribbon={{
        text: 'Updated',
        theme: 'success',
        type: 'folded'
    }}
/>

Rating

The rating on the card can be customized through the rating prop which expects a RatingProps object.

Product card with default rating Fully responsive

$19 ★★★★★

Product card with colored rating Fully responsive

$19 ★★★ ★★

<ProductCard
    ...
    rating={{ score: 5 }}
/>

<ProductCard
    ...
    rating={{
        score: 4,
        color: 'var(--w-color-warning)',
        emptyColor: 'var(--w-color-primary-20)',
        outline: false
    }}
/>

CTAs

The ProductCard component comes with two CTA buttons that can be added using the button and showFavoriteButton props, both of which appear on hover:

New Preview

Hover over the card Fully responsive

$25 ★★★★★

<ProductCard
    ...
    showFavoriteButton={true}
    button={{
        text: 'Preview',
        href: '/previews/astro'
    }}
/>

Events

The component exposes two custom events you can listen to, to handle changes when the product is added or removed from favorites. Add the following code to your template to handle add/remove events:

<script>
    import { listen } from 'webcoreui'

    listen('addToFavorite', event => console.log('Added:', event))
    listen('removeFromFavorite', event => console.log('Removed:', event))
</script>

The event object can hold an arbitrary value. By default, it includes the name of the product. You can easily change what is being emitted by the events by updating the value of the emit variable on top of your component. Svelte and React variants also expose an onAddToFavorite and onRemoveFromFavorite props you can use.

API

type ProductCardProps = {
    href: string
    name: string
    img: {
        src: string
        alt: string
        width: number
        height: number
        lazy?: boolean
    }
    price?: string
    target?: '_self'
        | '_blank'
        | '_parent'
        | '_top'
        | '_unfencedTop'
    ribbon?: {
        text: string
    } & RibbonProps
    showFavoriteButton?: boolean
    addedToFavorite?: boolean
    rating?: RatingProps
    button?: {
        text: string
        icon?: string
    } & ButtonProps
    badge?: {
        text: string
        icon?: string
    } & BadgeProps
    className?: string
}

type SvelteProductCardProps = {
    onAddToFavorite?: (args: unknown) => void
    onRemoveFromFavorite?: (args: unknown) => void
} & ProductCardProps

type ReactProductCardProps = {
    onAddToFavorite?: (args: unknown) => void
    onRemoveFromFavorite?: (args: unknown) => void
} & ProductCardProps