mds components
mds:product-card
A whole product tile: image, title, price, rating and a badge.
<mds:product-card
title="Samsung Galaxy S25 smartphone, 256 GB"
image="https://picsum.photos/seed/phone/400/400"
:amount="42500000"
:original="48900000"
:rating="4.6"
:reviews="342"
badge="Ships today"
href="#"
class="max-w-56"
/>With an action
Anything in the slot lands under the price.
<mds:product-card
title="AirSound Pro wireless headphones"
image="https://picsum.photos/seed/headphone/400/400"
:amount="1890000"
:rating="4.1"
:reviews="87"
href="#"
class="max-w-56"
>
<flux:button variant="primary" size="sm" class="w-full">Add to cart</flux:button>
</mds:product-card>Out of stock
unavailable drops the price and shows the out-of-stock label instead — "Out of stock" here, ناموجود in Persian.
<mds:product-card
title="Fit Band 8 smart watch"
image="https://picsum.photos/seed/watch/400/400"
unavailable
href="#"
class="max-w-56"
/>Badge color
<mds:product-card
title="One Hundred Years of Solitude"
image="https://picsum.photos/seed/book/400/400"
:amount="245000"
:original="350000"
badge="Bestseller"
badge-color="amber"
href="#"
class="max-w-56"
/>Persian output
config('mds.persian_digits') — on by default in a real app, off in these docs — switches the price, rating and built-in strings (ناموجود for out of stock) to Persian; :fa="true" does it for a single card.
<mds:product-card
title="گوشی موبایل سامسونگ مدل Galaxy S25 ظرفیت ۲۵۶ گیگابایت"
image="https://picsum.photos/seed/phone/400/400"
:amount="42500000"
:original="48900000"
:rating="4.6"
:reviews="342"
badge="ارسال امروز"
href="#"
:fa="true"
currency="toman"
class="max-w-56"
/>Reference
mds:product-card
| Prop | Description |
|---|---|
| title | Product name. Clamped to two lines. |
| image | Image URL. |
| href | Link target for the whole card. |
| amount | Current price. |
| original | Pre-discount price; adds the strikethrough and badge. |
| currency | Passed through to mds:price. |
| rating | Star rating. |
| reviews | Review count. |
| badge | Corner badge text. |
| badge-color | Badge color. Default: lime. |
| unavailable | Marks the product out of stock: the price is replaced with "Out of stock", or ناموجود in Persian. Default: false. |
| fa | Persian digits and built-in strings. Default: config('mds.persian_digits'). |