Product card

An e-commerce product card.

Furniture

Aeron Ergonomic Chair

$1,395.00

import { BuiProductCard } from 'ng-blatui';

<bui-product-card
  title="Trail Runner"
  image="/shoe.jpg"
  [price]="49.99"
  [compareAt]="69.99"
  badge="Sale"
/>

Sale

Sale

Audio

Wireless Headphones

$249.00~~was $349.00~~-29%

<bui-product-card title="Headphones" image="/cans.jpg" [price]="249" [compareAt]="349" badge="Sale" />

With rating

Bags

Classic Leather Backpack

4.5(128)

$129.00

<bui-product-card title="Backpack" image="/bag.jpg" [price]="129" [rating]="4.5" [reviews]="128" [wishlist]="true" />

API reference

Inputs

Prop	Type	Default	Description
`title`	`string`	`''`	Product title shown as the card heading.
`href`	`string`	`''`	Optional link; when set the title becomes an anchor to this URL.
`image`	`string`	`''`	Source URL of the product image.
`imageAlt`	`string`	`''`	Alt text for the image; falls back to the title when empty.
`price`	`number \| null`	`null`	Current price; hides the price block when null.
`compareAt`	`number \| null`	`null`	Original price for showing a strikethrough and discount.
`currency`	`string`	`'$'`	Currency symbol prefixed to the price.
`badge`	`string`	`''`	Badge text; auto-coloured for sale/new keywords.
`category`	`string`	`''`	Small category label shown above the title.
`rating`	`number \| null`	`null`	Star rating value; hides the rating row when null.
`reviews`	`number \| null`	`null`	Review count shown next to the rating, when set.
`wishlist`	`boolean`	`false`	Whether to show the wishlist (heart) toggle button.
`wishlistLabel`	`string`	—	Accessible label override for the wishlist toggle button.
`addToCartLabel`	`string`	—	Text of the default add-to-cart button. Falls back to `provideBuiLabels`.

Every ng-blatui component also accepts a class input to merge extra Tailwind classes onto the host.