Card - Vant 4
Card
🛍️ Create stunning product showcases with beautiful card layouts that captivate your users!
Intro 📋
Perfect for e-commerce and content display! The Card component beautifully showcases product images, prices, descriptions, and more in an elegant, mobile-optimized layout! 🎨✨
Install 📦
Get started in seconds! Register the Card component globally and start building beautiful product displays! 🚀
import { createApp } from'vue'; import { Card } from'vant'; const app = createApp(); app.use(Card);Usage 🎯
Basic Usage 🌟
Create your first product card with just a few props - it's that simple! Perfect for showcasing products with images, titles, and prices! 💫
Discount Info 🏷️
Show off those amazing deals! Display original prices with strikethrough and highlight discounts to boost conversions! 💰
Custom Content 🎨
Make it uniquely yours! Use slots to customize any part of the card - from headers to footers, the possibilities are endless! ✨
API
Props
| Attribute | Description | Type | Default |
|---|---|---|---|
| thumb | Left thumb image URL | string | - |
| title | Title | string | - |
| desc | Description | string | - |
| tag | Tag | string | - |
| num | number | *number | string* |
| price | Price | *number | string* |
| origin-price | Origin price | *number | string* |
| centered | Whether content vertical centered | boolean | false |
| currency | Currency symbol | string | �� |
| thumb-link | Thumb link URL | string | - |
| lazy-load | Whether to enable thumb lazy load, should register Lazyload component | boolean | false |
Events
| Event | Description | Arguments |
|---|---|---|
| click | Emitted when component is clicked | event: MouseEvent |
| click-thumb | Emitted when thumb is clicked | event: MouseEvent |
Slots
| Name | Description |
|---|---|
| title | Custom title |
| desc | Custom description |
| num | Custom num |
| price | Custom price |
| origin-price | Custom origin price |
| price-top | Custom price top |
| bottom | Custom price bottom |
| thumb | Custom thumb |
| tag | Custom thumb tag |
| tags | Custom tags |
| footer | Custom footer |
Types
The component exports the following type definitions:
importtype { CardProps } from'vant';Theming
CSS Variables
The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
| Name | Default Value | Description |
|---|---|---|
| --van-card-padding | var(--van-padding-xs) var(--van-padding-md) | - |
| --van-card-font-size | var(--van-font-size-sm) | - |
| --van-card-text-color | var(--van-text-color) | - |
| --van-card-background | var(--van-background) | - |
| --van-card-thumb-size | 88px | - |
| --van-card-thumb-radius | var(--van-radius-lg) | - |
| --van-card-title-line-height | 16px | - |
| --van-card-desc-color | var(--van-text-color-2) | - |
| --van-card-desc-line-height | var(--van-line-height-md) | - |
| --van-card-price-color | var(--van-text-color) | - |
| --van-card-origin-price-color | var(--van-text-color-2) | - |
| --van-card-num-color | var(--van-text-color-2) | - |
| --van-card-origin-price-font-size | var(--van-font-size-xs) | - |
| --van-card-price-font-size | var(--van-font-size-sm) | - |
| --van-card-price-integer-font-size | var(--van-font-size-lg) | - |
| --van-card-price-font | var(--van-price-font) | - |
## Related Docs 📚
- [Image](./image) - Display product images
- [Tag](./tag) - Add product tags and labels
- [Button](./button) - Add action buttons to cards
- [Badge](./badge) - Show notifications and counts
- [Lazyload](./lazyload) - Optimize image loading
- [Grid](./grid) - Layout multiple cards
- [List](./list) - Create card lists
- [ConfigProvider](./config-provider) - Global configuration
- [Advanced Usage](./advanced-usage) - Component registration guide