# `PhiaUi.Components.ProductCard`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/cards/product_card.ex#L1)

E-commerce product card with image, rating, pricing, and add-to-cart action.

Renders a `Card` with an optional product image (square aspect ratio),
an optional badge overlay (top-left), product title, price row, star
rating, and action buttons.

## Image handling

- When `src` is provided, renders an `<img>` with `aspect-square object-cover`.
- When `src` is `nil`, renders a muted placeholder box.
- Both the image and title are wrapped in an `<a>` link when `href` is provided.

## Badge overlay

Set `badge` to show a label over the top-left corner of the image
(e.g. `"Sale"`, `"New"`). The badge is hidden when `sold_out={true}`;
instead a `"Sold Out"` secondary badge is shown automatically.

## Star rating

Pass a `rating` float between `0.0` and `5.0` to render a star row
style. Provide `review_count` to append the count in parentheses.

## Sold-out state

When `sold_out={true}`, a `"Sold Out"` badge overlay is shown and the
add-to-cart button is disabled.

## Custom actions slot

Override the default add-to-cart button via the `:actions` slot when you
need a different CTA (e.g. "View details" or "Add to wishlist"):

    <.product_card title="Widget" price="$9" src="/img/widget.jpg">
      <:actions>
        <.button variant={:outline} class="w-full">View details</.button>
      </:actions>
    </.product_card>

# `product_card`

Renders a product card.
## Attributes

* `title` (`:string`) (required) - Product title.
* `price` (`:string`) (required) - Current price string.
* `original_price` (`:string`) - Original/strikethrough price. Defaults to `nil`.
* `src` (`:string`) - Product image URL. Defaults to `nil`.
* `alt` (`:string`) - Image alt text. Defaults to `""`.
* `rating` (`:float`) - Star rating 0.0–5.0. Defaults to `nil`.
* `review_count` (`:integer`) - Number of reviews. Defaults to `nil`.
* `badge` (`:string`) - Optional badge label on image. Defaults to `nil`.
* `badge_variant` (`:atom`) - Badge color variant. Defaults to `:default`. Must be one of `:default`, `:destructive`, `:secondary`, or `:outline`.
* `sold_out` (`:boolean`) - Show sold-out overlay and disable button. Defaults to `false`.
* `href` (`:string`) - Optional link for image and title. Defaults to `nil`.
* `on_add_to_cart` (`:string`) - phx-click event for add-to-cart button. Defaults to `nil`.
* `class` (`:string`) - Additional CSS classes. Defaults to `nil`.
* Global attributes are accepted. HTML attributes forwarded to the card element.
## Slots

* `actions` - Override the default add-to-cart button.

---

*Consult [api-reference.md](api-reference.md) for complete listing*