vant/packages/vant/src/card/README.md

Card

Intro

Used to display product pictures, prices and other information.

Install

Register component globally via app.use, refer to Component Registration for more registration ways.

import { createApp } from 'vue';
import { Card } from 'vant';

const app = createApp();
app.use(Card);

Usage

Basic Usage

<van-card
  num="2"
  price="2.00"
  title="Title"
  desc="Description"
  thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
/>

Discount Info

<van-card
  num="2"
  tag="Tag"
  price="2.00"
  title="Title"
  desc="Description"
  origin-price="10.00"
  thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
/>

Custom Content

Use slot to custom content.

<van-card
  num="2"
  title="Title"
  desc="Description"
  price="2.00"
  thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
>
  <template #tags>
    <van-tag plain type="primary">Tag</van-tag>
    <van-tag plain type="primary">Tag</van-tag>
  </template>
  <template #footer>
    <van-button size="mini">Button</van-button>
    <van-button size="mini">Button</van-button>
  </template>
</van-card>

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:

import type { 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)	-