product-card-basic
Product Card Basic
Product tile with sale and stock badges, rating, price, colour swatches that switch the image, and an add-to-cart button that confirms the add.
States: Default, Hover
Parts
| Part | File | Does |
|---|---|---|
| ProductCardBasic | ProductCardBasic.vue | Shows a product with its image, price and rating, with an add-to-cart button. |
Styling
| Part | Recipe |
|---|---|
| ProductCardBasic | product-card-basic |
| ProductCardBasic | product-card-basic-image |
| ProductCardBasic | part-title |
| ProductCardBasic | meta |
Install
Writes 3 files into components/sections/product-card-basic/. For agents, npx @frontic/ui docs product-card-basic prints this reference as markdown; the MCP server serves the same.
- npm packages
- @lucide/vue
- @vueuse/core
Built from
API reference
ProductCardBasic ProductCardBasic.vue
Shows a product with its image, price and rating, with an add-to-cart button.
| Prop | Type | Default | |
|---|---|---|---|
| product* | Product | — | |
| eyebrow | string | — | |
| addToCartLabel | string | 'Add to Cart' | |
| addedLabel | string | 'Added' | |
| clearoutLabel | string | 'Clearout' | |
| inStoreLabel | string | 'In Store' | |
| locale | string | — | |
| ratingLabel | ((score: number, max: number) => string) | — | |
| surface | 'raised' | 'bare' | 'raised' | |
| class | ClassValue | — | |
| Event | Payload | |
|---|---|---|
| add-to-cart | product: Product | |
| Data attribute | Values | |
|---|---|---|
| data-surface | 'raised' | 'bare' | |
| Recipe product-card-basic | Sets | |
|---|---|---|
| base: product-card-basic | 1 property | |
| Recipe product-card-basic-image | Sets | |
|---|---|---|
| base: product-card-basic-image | 1 property | |
| Recipe part-title | Sets | |
|---|---|---|
| base: part-title | 4 properties | |
| Recipe meta | Sets | |
|---|---|---|
| base: meta | 3 properties | |
Example