# salla-product-card (https://docs.salla.dev/twilight/react/web-components/salla-product-card) {/* Generated by scripts/sync-web-components.mjs from the components docs.json. Do not edit by hand. */} A product card with image, name, price, rating, a wishlist heart and an add to cart button. Use it in product lists and grids; `salla-products-list` and sliders render it for each product. Pass the product data through `product`. The layout switches with `horizontal`, `full-image`, `minimal` and `compact`. The card links to `product.url`, shows an out of stock, remaining quantity or promotion badge on the image, and a sale price (`is_on_sale`) or a starting price (`starting_price`) when the product has one. Donation products get a progress bar and an amount input. The wishlist button has an aria-label, and the image falls back to the theme placeholder until it is lazy loaded. The product is read once when the component is created, so changing `product` later does not update the card. ## Use it [#use-it] In HTML or JSX, use the tag `` with the **Attribute** names below. In React, the wrapper takes the **Property** names (camelCase). ```tsx import { SallaProductCard } from '@salla.sa/twilight-components-react/product-card'; ``` **Client-only.** On the server this wrapper renders a placeholder (a skeleton, or nothing), and the real component mounts in the browser. Do not rely on it for content that search engines must see. ## Example [#example] ```tsx import { SallaProductCard } from '@salla.sa/twilight-components-react/product-card'; export function Example() { return ( ); } ``` ```html ``` ## Properties [#properties] | Property | Attribute | Description | Type | Default | | --------------------------- | -------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | ------- | | `compact` | `compact` | Use the compact layout for drawers and lists. Titles longer than 60 characters are cut with an ellipsis, and the add to cart button is placed outside the content area. | `boolean` | | | `compactAddToCart` | `compact-add-to-cart` | Show only a cart icon instead of the text label on the add to cart button. Defaults to `false`. Has no effect when the `add-to-cart-label` slot is filled. | `boolean` | `false` | | `forceShowWishlistButton` | `force-show-wishlist-button` | Show the wishlist button next to the add to cart button in the compact layout. Defaults to `false`. Only has an effect together with `compact`, and only while the add to cart button is not hidden. | `boolean` | `false` | | `fullImage` | `full-image` | Make the image fill the whole card, with the name and price over it. Hides the image badge, subtitle and donation progress. Takes priority over `horizontal`. | `boolean` | | | `hideAddBtn` | `hide-add-btn` | Hide the add to cart button (and the wishlist button that sits next to it in the horizontal layout). | `boolean` | | | `horizontal` | `horizontal` | Show the image beside the content instead of above it. The wishlist button then moves next to the add to cart button. Ignored when `full-image` or `minimal` is set. | `boolean` | | | `isSpecial` | `is-special` | Show the special offer layout: a circle with the remaining quantity (when the product has `quantity`) and a boxed count-down to `discount_ends` (when the product has it). | `boolean` | | | `minimal` | `minimal` | Show a reduced card: no image badge, subtitle, rating or donation progress. Takes priority over `horizontal`. | `boolean` | | | `product` | `product` | The product to show: an object, or a JSON string of it. Fields used: `id`, `name`, `subtitle`, `url`, `image` (`{ url, alt }`), `thumbnail`, `price`, `sale_price`, `regular_price`, `is_on_sale`, `starting_price`, `is_out_of_stock`, `quantity`, `promotion_title`, `rating` (`{ stars }`), `donation`, `discount_ends`, `status`, `type` and `add_to_cart_label`. Invalid JSON is logged and the card stays empty. Read once when the component is created. | `object \| string` | | | `shadowOnHover` | `shadow-on-hover` | Add a shadow to the card when the pointer hovers over it. | `boolean` | | | `showOutOfStockBesidePrice` | `show-out-of-stock-beside-price` | Show the out of stock label beside the price instead of as a badge on the image. Defaults to `false`. | `boolean` | `false` | | `showQuantity` | `show-quantity` | Show the remaining quantity (`product.quantity`) as a badge on the image, when the product is in stock. | `boolean` | | ## Slots [#slots] | Slot | Description | | ------------------- | ---------------------------------------------------------- | | `add-to-cart-label` | Replaces the text (or icon) inside the add to cart button. | ## Related [#related] Renders: [``](https://docs.salla.dev/twilight/react/web-components/salla-button), [``](https://docs.salla.dev/twilight/react/web-components/salla-progress-bar), [``](https://docs.salla.dev/twilight/react/web-components/salla-count-down), [``](https://docs.salla.dev/twilight/react/web-components/salla-add-product-button). Used inside: [``](https://docs.salla.dev/twilight/react/web-components/salla-loyalty-exchange-product-card), [``](https://docs.salla.dev/twilight/react/web-components/salla-products-slider).