Product Card (vviinn-product-card)

Card for one search result or recommendation. Renders a product, a content entry or a list entry, depending on entity-type.

Generated from vviinn-widgets 2.228.0, the latest release when these docs were built. If you pin an older version, some of these may not be in it yet — check the Changelog.

Try the properties live in the Playground.

Properties

Set them as HTML attributes.

add-price-container

Wrap the Product Card's price values in the container.

Type: boolean · Default: false

add-to-basket-show

Show or hide the Add to Basket button

Type: boolean

base-price

Price per unit, as an object or a JSON string: {"price": 9.99, "quantity": 100, "measure": "ml"}

Type: string | { price?: number; quantity?: number; measure?: string; }

base-sale-price

Price per unit for the sale price, in the same shape as base-price

Type: string | { price?: number; quantity?: number; measure?: string; }

brand

Product brand. Also set as data-brand on the card, so CSS can target cards by brand

Type: string

css-url

URL to external CSS file for custom styling

Type: string · Default: null

currency-sign

The currency sign is displayed after the price

Type: string · Default: undefined

custom-labels

Labels from the product feed, separated by |. Hidden by default — show them with the custom-label-N parts, which exist for the first five. Also set as data-custom-label-N

Type: string · Default: ""

deeplink

Product page URL for the title and image links. Standalone, the card doesn't navigate — handle vviinnProductClick

Type: string

energy-certifications

Energy labels, set as a JS property

Type: { certificationClass?: "A+++" | "A++" | "A+" | "A" | "B" | "C" | "D" | "E" | "F" | "G"; classIconUrls?: { left: string; right: string; }; classRange?: { min?: "A+++" | "A++" | "A+" | "A" | "B" | "C" | "D" | "E" | "F" | "G"; max?: "A+++" | "A++" | "A+" | "A" | "B" | "C" | "D" | "E" | "F" | "G"; }; classLabelUrl?: string; classDataSheetUrl?: string; productType?: string; }[]

entity-type

What the card shows: a product, a content entry or a list entry

Type: "content" | "list" | "product" · Default: "product"

favorite-show

Show or hide Favorite button

Type: boolean

image

URL of the main product image

Type: string

image-width

Image width in pixels. Ignored when responsive is set

Type: number · Default: PRODUCT_CARD_IMAGE_WIDTH

images

Product images, set as a JS property. Used by show-multiple-images when there are at least two

Type: { original: string; thumbnail: string; }[] · Default: []

is-set-mode

Render the card for Set mode: Update button, discount label, and Add to Basket regardless of add-to-basket-show

Type: boolean · Default: false

locale

Locale for text localization

Type: "de-DE" | "en-US"

number-locale

Locale for number formatting. Falls back to locale

Type: string

price

Regular price

Type: number

price-prefix

Prefix is displayed before the price

Type: string

product-title

Product title

Type: string

product-type

Product type

Type: string

responsive

Let the image fill the card width instead of image-width

Type: boolean · Default: false

sale-price

Sale price. When set, the regular price is shown as outdated next to it

Type: number

show-multiple-images

Show multiple images: swiper on mobile, hover on desktop

Type: boolean · Default: false

update-button-location

Location of Update button for Set mode

Type: "onItem" | "onTop" | "topAndItem"

Events

Listen with document.addEventListener(). The pages under Events describe the data each event carries.

Event	Description
`vviinnAddToBasket`	User clicks on Add to Basket button
`vviinnAddToFavorite`	User clicks on Favorite button
`vviinnProductClick`	Emitted on a click on a link in the card, instead of following the link
`vviinnProductLoad`	Emitted once when the card has rendered
`vviinnProductView`	Emitted when at least 95% of the card's image is visible

Slots

Replace texts and icons with your own content: Replace Widget Content.

Slot	Description
`vviinn-basket-button-icon`	Icon of Add to Basket button.
`vviinn-basket-button-icon-pressed`	Icon of pressed Add to Basket button (Set mode).
`vviinn-basket-button-text`	Text of Add to Basket button.
`vviinn-basket-button-text-pressed`	Text of pressed Add to Basket button (Set mode).
`vviinn-custom-label-0`	Custom label with index 0.
`vviinn-custom-label-1`	Custom label with index 1.
`vviinn-custom-label-2`	Custom label with index 2.
`vviinn-custom-label-3`	Custom label with index 3.
`vviinn-custom-label-4`	Custom label with index 4.
`vviinn-energy-label-data-sheet-text`	Data sheet link's text.
`vviinn-favorite-icon`	Icon of Favorite button.
`vviinn-favorite-icon-pressed`	Icon of pressed Favorite button.
`vviinn-image-placeholder-icon`	Icon or content for the image placeholder.
`vviinn-product-card-actions`	Add action buttons like One-Click Discovery to this slot.
`vviinn-update-button-icon`	Icon of Update Button (Set mode).

Shadow Parts

Style these elements with vviinn-product-card::part(name): Styling Specific Elements.

Part	Description
`basket-button`	Add to Basket button.
`basket-button-container`	Product Card's basket button container.
`brand`	Product brand.
`content-card`	Content card container. Styled through an embedding widget, e.g. `vviinn-results::part(content-card)`.
`content-card-content-container`	Content card's content container.
`content-card-image`	Content card's image.
`content-card-image-container`	Content card's image container.
`content-card-image-picture`	Picture element for content card's image.
`content-container`	Product Card's content container. On content cards, not exported to the widgets.
`content-label`	Content card's label.
`content-link`	Content card's link.
`content-title`	Content card's title.
`currency`	Currency sign. Renders after price-amount.
`custom-label-0`	Custom label with index 0.
`custom-label-1`	Custom label with index 1.
`custom-label-2`	Custom label with index 2.
`custom-label-3`	Custom label with index 3.
`custom-label-4`	Custom label with index 4.
`custom-label-content`	Custom labels in the content area. Combine with custom-label-N to pick one place.
`custom-label-image`	Custom labels on the image. Combine with custom-label-N to pick one place.
`deeplink`	Anchor element for title. Rendered only if "deeplink" property is filled.
`discount-label`	Discount label in Product Card (Set mode).
`discount-percentage`	Discount percentage inside the Add to Basket button (Set mode).
`energy-label-container`	Energy label container.
`energy-label-data-sheet-link`	Data sheet link.
`energy-label-icon`	Icon with an energy class.
`energy-label-product-type`	Product type.
`favorite-button`	Favorite button.
`image`	Product image.
`image-container`	Product Card's image container.
`image-link`	Anchor element for image. Rendered only if "deeplink" property filled.
`image-picture`	Picture element for image.
`image-placeholder`	Placeholder shown when no image is available.
`image-skeleton`	Placeholder shown while the image loads.
`list-card`	List card container. Styled through an embedding widget, e.g. `vviinn-results::part(list-card)`.
`list-card-content-container`	List card's content container.
`list-card-image`	List card's image.
`list-card-image-container`	List card's image container.
`list-card-image-picture`	Picture element for list card's image.
`list-container`	Same element as list-card-content-container. Not exported to the widgets.
`list-label`	List card's label (e.g., "Category").
`list-title`	List card's title.
`price-amount-base-outdated`	Numeric part of the regular price per unit shown as outdated.
`price-amount-base-regular`	Numeric part of the regular price per unit.
`price-amount-base-sale`	Numeric part of the sale price per unit.
`price-amount-outdated`	Numeric part of the regular price shown as outdated.
`price-amount-regular`	Numeric part of the regular price.
`price-amount-sale`	Numeric part of the sale price.
`price-container`	Wrapper around the price values. Rendered only if "add-price-container" property is set.
`price-outdated`	Renders when "sale-price" property filled. Contains regular price.
`price-prefix`	Renders before price-amount. Can be set with "price-prefix" property or inherited from parent component.
`price-regular`	Renders when "sale-price" property is empty.
`price-sale`	Renders when "sale-price" property filled. Contains sale price.
`product-card`	Card container. Styled through an embedding widget, e.g. `vviinn-results::part(product-card)`.
`product-card-actions`	Style actions wrapper.
`product-card-actions-top`	Style top actions wrapper.
`product-images-pagination`	Container for product images pagination dots (mobile only).
`product-images-pagination-bullet`	Individual pagination dot.
`product-images-pagination-bullet-active`	Active pagination dot.
`product-type`	Product type.
`title`	Product title
`update-button-item`	Update button in Product Card (Set mode).

CSS Custom Properties

Set them on vviinn-product-card or a parent element: CSS Variables.

Property	Description
`--basket-button-bg-color-pressed`	The background color of the pressed Basket Button.
`--font-family`	The font family of the product card.
`--product-card-content-align`	The alignment of the content inside the product card's flex container.
`--product-card-image-aspect-ratio`	The aspect ratio of the product card image (e.g., "1 / 1", "3 / 4").
`--product-card-image-bg-color`	The background color of the product card image.
`--product-card-image-border`	The border of the product card image.
`--product-card-text-align`	The alignment of the text inside the product card.
`--product-card-transition-duration`	Duration of skeleton to content transitions.