Card

Used to display product images, prices and other information.

Component Type

Basic Usage

Set title through title, pass content through default slot, use footer slot for bottom operation area.

<wd-card title="Yueyang Tower Record">
  <view class="content-text">
    When spring scenery is bright and calm, waves are still, the sky and water merge into one vast expanse of blue, seagulls hover and gather, glittering fish swim, shore plants flourish in green.
  </view>
  <template #footer>
    <wd-button size="small" plain>Read Full Text</wd-button>
  </template>
</wd-card>

Rectangle Card

Set type="rectangle" to use rectangle card style.

<wd-card title="Life Record" type="rectangle">
  <view class="list-group">
    <view class="list-item">
      <image src="https://wot-ui.cn/assets/panda.jpg" class="list-item__image" mode="aspectFill" />
      <view class="list-item__content">
        <view class="list-item__title">Great Weather Today</view>
        <view class="list-item__desc">Feb 11, 2026 Sunny 22°C</view>
      </view>
    </view>
  </view>
  <template #footer>
    <wd-button size="small" plain>Like</wd-button>
  </template>
</wd-card>

Component Style

Complex Card

Build higher information density card content by combining images, tags, and attribute blocks.

<wd-card title="Pet Profile">
  <view class="info-card">...</view>
  <template #footer>
    <wd-button size="small" plain>Like (1.2w)</wd-button>
  </template>
</wd-card>

Content Form

Custom Title

Use title slot to customize title area content.

<wd-card type="rectangle">
  <template #title>
    <view class="custom-title">
      <view>Hobbies</view>
      <view class="custom-title__tip">
        <wd-icon name="heart" size="14px" custom-style="vertical-align: bottom; margin-right: 4px;" />
        Source of Happiness
      </view>
    </view>
  </template>
  <view class="list-group">...</view>
</wd-card>

Special Style

Remove Footer

Bottom area will not render when footer slot is not passed.

<wd-card title="Wonderful Moments" type="rectangle">
  <view class="moment-card">...</view>
</wd-card>

Attributes

Parameter	Description	Type	Default Value
title	Card title	string	-
type	Card type, supports rectangle	string	-
custom-title-class	Title area custom class name	string	''
custom-content-class	Content area custom class name	string	''
custom-footer-class	Bottom area custom class name	string	''
custom-class	Root node custom class name	string	''
custom-style	Root node custom style	string	''

Slots

name	Description
default	Card content
title	Card title
footer	Bottom operation content

主题定制

CSS 变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 全局配置。

名称	默认值	描述
--wot-card-bg	$filled-oppo	卡片背景色
--wot-card-border-color	$border-light	卡片边框颜色
--wot-card-radius	$radius-large	卡片圆角
--wot-card-shadow	$n-0 $n-2 $n-8 $opac-2_04	卡片阴影
--wot-card-shadow-hover	$n-0 $n-4 $n-16 $opac-3_08	卡片悬浮阴影
--wot-card-transition	box-shadow 0.3s ease	过渡动画
--wot-card-margin-bottom	$spacing-extra-loose	卡片底部间距
--wot-card-margin-horizontal	$spacing-extra-loose	卡片水平方向外边距
--wot-card-title-color	$text-main	标题颜色
--wot-card-title-font-size	$typography-title-size-main	标题字号
--wot-card-title-font-weight	$font-weight-medium	标题字重
--wot-card-title-line-height	$typography-body-line--height-size-main	标题行高
--wot-card-title-padding	$padding-loose $padding-extra-loose	标题内间距
--wot-card-content-color	$text-secondary	内容文字颜色
--wot-card-content-font-size	$typography-body-size-main	内容字号
--wot-card-content-line-height	$typography-body-line--height-size-main	内容行高
--wot-card-content-padding	$padding-main $padding-loose	内容内边距
--wot-card-content-border-color	$border-main	内容区域边框颜色
--wot-card-footer-padding	$padding-tight $padding-loose	底部内边距
--wot-card-footer-border-color	$border-main	底部分割线颜色

Source Code

Documentation

• Component