diff --git a/src/pages.json b/src/pages.json
index 134b8453e..086b4d6c3 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -303,6 +303,11 @@
 			"style": {
 				"navigationBarTitleText": "瀑布流"
 			}
+		}, {
+			"path": "card/card",
+			"style": {
+				"navigationBarTitleText": "卡片"
+			}
 		}]
 	}, {
 		"root": "pages/componentsC",
diff --git a/src/pages/componentsB/card/card.vue b/src/pages/componentsB/card/card.vue
new file mode 100644
index 000000000..7e70ec285
--- /dev/null
+++ b/src/pages/componentsB/card/card.vue
@@ -0,0 +1,115 @@
+<template>
+	<view>
+		<view class="u-card-wrap">
+			<up-card @click="click" @head-click="headClick" :title="title"
+				:sub-title="subTitle" :thumb="thumb" :padding="padding" :border="border">
+				<template #body>
+					<view>
+						<view class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0">
+							<view class="u-body-item-title u-line-2">瓶身描绘的牡丹一如你初妆，冉冉檀香透过窗心事我了然，宣纸上走笔至此搁一半</view>
+							<image src="https://img11.360buyimg.com/n7/jfs/t1/94448/29/2734/524808/5dd4cc16E990dfb6b/59c256f85a8c3757.jpg" mode="aspectFill"></image>
+						</view>
+						<view class="u-body-item u-flex u-row-between u-p-b-0">
+							<view class="u-body-item-title u-line-2">釉色渲染仕女图韵味被私藏，而你嫣然的一笑如含苞待放</view>
+							<image src="https://img12.360buyimg.com/n7/jfs/t1/102191/19/9072/330688/5e0af7cfE17698872/c91c00d713bf729a.jpg" mode="aspectFill"></image>
+						</view>
+					</view>
+				</template>
+				<template #foot>
+					<view>
+						<up-icon name="chat-fill" size="34" color="" label="30评论"></up-icon>
+					</view>
+				</template>
+			</up-card>
+		</view>
+		<view class="u-demo">
+			<view class="u-demo-block">
+			    <text class="u-demo-block__title">参数配置</text>
+			</view>
+			<view class="u-demo-block">
+			    <text class="u-demo-block__title">左上角图标</text>
+			    <view class="u-demo-block__content">
+					<up-subsection :list="['显示', '隐藏']" @change="thumbChange"></up-subsection>
+			    </view>
+			</view>
+			<view class="u-demo-block">
+			    <text class="u-demo-block__title">内边距</text>
+			    <view class="u-demo-block__content">
+					<up-subsection current="1" :list="['20', '30', '40']" @change="paddingChange"></up-subsection>
+			    </view>
+			</view>
+			<view class="u-demo-block">
+			    <text class="u-demo-block__title">底部</text>
+			    <view class="u-demo-block__content">
+					<up-subsection :list="['显示', '隐藏']" @change="bottomChange"></up-subsection>
+			    </view>
+			</view>
+			<view class="u-demo-block">
+			    <text class="u-demo-block__title">外边框</text>
+			    <view class="u-demo-block__content">
+					<up-subsection :list="['显示', '隐藏']" @change="borderChange"></up-subsection>
+			    </view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				title: '素胚勾勒出青花，笔锋浓转淡',
+				subTitle: '2020-05-15',
+				thumb: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
+				padding: 20,
+				bottomSlot: true,
+				border: true
+			}
+		},
+		methods: {
+			thumbChange(index) {
+				this.thumb = index == 0 ? 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg' : '';
+			},
+			paddingChange(index) {
+				this.padding = [20, 30, 40][index];
+			},
+			bottomChange(index) {
+				this.bottomSlot = !index;
+			},
+			borderChange(index) {
+				this.border = !index;
+			},
+			click(index) {
+				console.log(index);
+			},
+			headClick(index) {
+				console.log(index);
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.u-demo {
+		padding: 20x;
+	}
+	
+	.u-card-wrap { 
+		background-color: $u-bg-color;
+		padding: 1px;
+		
+		.u-body-item {
+			font-size: 32rpx;
+			color: #333;
+			padding: 20rpx 10rpx;
+		}
+			
+		.u-body-item image {
+			width: 120rpx;
+			flex: 0 0 120rpx;
+			height: 120rpx;
+			border-radius: 8rpx;
+			margin-left: 12rpx;
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/src/pages/componentsB/dropdown/dropdown.nvue b/src/pages/componentsB/dropdown/dropdown.nvue
index eb4e401b2..ae3710892 100644
--- a/src/pages/componentsB/dropdown/dropdown.nvue
+++ b/src/pages/componentsB/dropdown/dropdown.nvue
@@ -143,7 +143,7 @@
 
 <style scoped lang="scss">
 	.u-config-wrap {
-		padding: 40rpx;
+		padding: 20px;
 	}
 	
 	.slot-content {
diff --git a/src/pages/example/components.config.js b/src/pages/example/components.config.js
index 1020c1e95..23d31abec 100644
--- a/src/pages/example/components.config.js
+++ b/src/pages/example/components.config.js
@@ -258,6 +258,11 @@ export default [{
         icon: 'line',
         title: 'Line 线条',
         title_en: 'Line'
+    }, {
+		path: '/pages/componentsB/card/card',
+		icon: 'empty',
+		title: 'Card 卡片',
+		title_en: 'Card'
     }, {
         path: '/pages/componentsA/overlay/overlay',
         icon: 'mask',
@@ -304,6 +309,11 @@ export default [{
         icon: 'divider',
         title: 'Divider 分割线',
         title_en: 'Divider'
+    }, {
+		path: '/pages/componentsD/box/box',
+		icon: 'box',
+		title: 'Box 盒子',
+		title_en: 'Box'
     }
     ]
 },
diff --git a/src/static/uview/demo/box.png b/src/static/uview/demo/box.png
new file mode 100644
index 000000000..d53c64294
Binary files /dev/null and b/src/static/uview/demo/box.png differ
diff --git a/src/static/uview/demo/card.png b/src/static/uview/demo/card.png
new file mode 100644
index 000000000..fb6ecfea3
Binary files /dev/null and b/src/static/uview/demo/card.png differ
diff --git a/src/uni_modules/uview-plus/components/u-card/props.js b/src/uni_modules/uview-plus/components/u-card/props.js
new file mode 100644
index 000000000..1c1b72876
--- /dev/null
+++ b/src/uni_modules/uview-plus/components/u-card/props.js
@@ -0,0 +1,128 @@
+import { defineMixin } from '../../libs/vue'
+import defProps from '../../libs/config/props.js'
+
+export const propsCard = defineMixin({
+    props: {
+        // 与屏幕两侧是否留空隙
+		full: {
+			type: Boolean,
+			default: false
+		},
+		// 标题
+		title: {
+			type: String,
+			default: ''
+		},
+		// 标题颜色
+		titleColor: {
+			type: String,
+			default: '#303133'
+		},
+		// 标题字体大小
+		titleSize: {
+			type: [Number, String],
+			default: '15px'
+		},
+		// 副标题
+		subTitle: {
+			type: String,
+			default: ''
+		},
+		// 副标题颜色
+		subTitleColor: {
+			type: String,
+			default: '#909399'
+		},
+		// 副标题字体大小
+		subTitleSize: {
+			type: [Number, String],
+			default: '13'
+		},
+		// 是否显示外部边框，只对full=false时有效(卡片与边框有空隙时)
+		border: {
+			type: Boolean,
+			default: true
+		},
+		// 用于标识点击了第几个
+		index: {
+			type: [Number, String, Object],
+			default: ''
+		},
+		// 用于隔开上下左右的边距，带单位的写法，如："30px 30px"，"20px 20px 30px 30px"
+		margin: {
+			type: String,
+			default: '15px'
+		},
+		// card卡片的圆角
+		borderRadius: {
+			type: [Number, String],
+			default: '8px'
+		},
+		// 头部自定义样式，对象形式
+		headStyle: {
+			type: Object,
+			default() {
+				return {};
+			}
+		},
+		// 主体自定义样式，对象形式
+		bodyStyle: {
+			type: Object,
+			default() {
+				return {};
+			}
+		},
+		// 底部自定义样式，对象形式
+		footStyle: {
+			type: Object,
+			default() {
+				return {};
+			}
+		},
+		// 头部是否下边框
+		headBorderBottom: {
+			type: Boolean,
+			default: true
+		},
+		// 底部是否有上边框
+		footBorderTop: {
+			type: Boolean,
+			default: true
+		},
+		// 标题左边的缩略图
+		thumb: {
+			type: String,
+			default: ''
+		},
+		// 缩略图宽高
+		thumbWidth: {
+			type: [String, Number],
+			default: '30px'
+		},
+		// 缩略图是否为圆形
+		thumbCircle: {
+			type: Boolean,
+			default: false
+		},
+		// 给head，body，foot的内边距
+		padding: {
+			type: [String, Number],
+			default: '15px'
+		},
+		// 是否显示头部
+		showHead: {
+			type: Boolean,
+			default: true
+		},
+		// 是否显示尾部
+		showFoot: {
+			type: Boolean,
+			default: true
+		},
+		// 卡片外围阴影，字符串形式
+		boxShadow: {
+			type: String,
+			default: 'none'
+		}
+    }
+})
diff --git a/src/uni_modules/uview-plus/components/u-card/u-card.vue b/src/uni_modules/uview-plus/components/u-card/u-card.vue
new file mode 100644
index 000000000..1467f7539
--- /dev/null
+++ b/src/uni_modules/uview-plus/components/u-card/u-card.vue
@@ -0,0 +1,185 @@
+<template>
+	<view
+		class="u-card"
+		@tap.stop="click"
+		:class="{ 'u-border': border, 'u-card-full': full, 'u-card--border': getPx(borderRadius) > 0 }"
+		:style="{
+			borderRadius: addUnit(borderRadius),
+			margin: margin,
+			boxShadow: boxShadow
+		}"
+	>
+		<view
+			v-if="showHead"
+			class="u-card__head"
+			:style="[{padding: addUnit(padding)}, headStyle]"
+			:class="{
+				'u-border-bottom': headBorderBottom
+			}"
+			@tap="headClick"
+		>
+			<view v-if="!$slots.head" class="u-flex u-row-between">
+				<view class="u-card__head--left u-flex u-line-1" v-if="title">
+					<image
+						:src="thumb"
+						class="u-card__head--left__thumb"
+						mode="aspectFill"
+						v-if="thumb"
+						:style="{ 
+							height: addUnit(thumbWidth), 
+							width: addUnit(thumbWidth), 
+							borderRadius: thumbCircle ? '50px' : '4px' 
+						}"
+					></image>
+					<text
+						class="u-card__head--left__title u-line-1"
+						:style="{
+							fontSize: addUnit(titleSize),
+							color: titleColor
+						}"
+					>
+						{{ title }}
+					</text>
+				</view>
+				<view class="u-card__head--right u-line-1" v-if="subTitle">
+					<text
+						class="u-card__head__title__text"
+						:style="{
+							fontSize: addUnit(subTitleSize),
+							color: subTitleColor
+						}"
+					>
+						{{ subTitle }}
+					</text>
+				</view>
+			</view>
+			<slot name="head" v-else />
+		</view>
+		<view @tap="bodyClick" class="u-card__body" :style="[{padding: addUnit(padding)}, bodyStyle]"><slot name="body" /></view>
+		<view
+			v-if="showFoot"
+			class="u-card__foot"
+			 @tap="footClick"
+			:style="[{padding: $slots.foot ? addUnit(padding) : 0}, footStyle]"
+			:class="{
+				'u-border-top': footBorderTop
+			}"
+		>
+			<slot name="foot" />
+		</view>
+	</view>
+</template>
+
+<script>
+    import { propsCard } from './props';
+    import { mpMixin } from '../../libs/mixin/mpMixin';
+    import { mixin } from '../../libs/mixin/mixin';
+    import { addStyle, addUnit, getPx } from '../../libs/function/index';
+    /**
+     * card 卡片
+     * @description 卡片组件一般用于多个列表条目，且风格统一的场景
+     * @tutorial https://uview-plus.jiangruyi.com/components/card.html
+     * @property {Boolean} full 卡片与屏幕两侧是否留空隙（默认false）
+     * @property {String} title 头部左边的标题
+     * @property {String} title-color 标题颜色（默认#303133）
+     * @property {String | Number} title-size 标题字体大小，单位rpx（默认15px）
+     * @property {String} sub-title 头部右边的副标题
+     * @property {String} sub-title-color 副标题颜色（默认#909399）
+     * @property {String | Number} sub-title-size 副标题字体大小（默认13px
+     * @property {Boolean} border 是否显示边框（默认true）
+     * @property {String | Number} index 用于标识点击了第几个卡片
+     * @property {String} box-shadow 卡片外围阴影，字符串形式（默认none）
+     * @property {String} margin 卡片与屏幕两边和上下元素的间距，需带单位，如"30px 20px"（默认15px）
+     * @property {String | Number} border-radius 卡片整体的圆角值，单位rpx（默认8px）
+     * @property {Object} head-style 头部自定义样式，对象形式
+     * @property {Object} body-style 中部自定义样式，对象形式
+     * @property {Object} foot-style 底部自定义样式，对象形式
+     * @property {Boolean} head-border-bottom 是否显示头部的下边框（默认true）
+     * @property {Boolean} foot-border-top 是否显示底部的上边框（默认true）
+     * @property {Boolean} show-head 是否显示头部（默认true）
+     * @property {Boolean} show-head 是否显示尾部（默认true）
+     * @property {String} thumb 缩略图路径，如设置将显示在标题的左边，不建议使用相对路径
+     * @property {String | Number} thumb-width 缩略图的宽度，高等于宽，单位rpx（默认30px）
+     * @property {Boolean} thumb-circle 缩略图是否为圆形（默认false）
+     * @event {Function} click 整个卡片任意位置被点击时触发
+     * @event {Function} head-click 卡片头部被点击时触发
+     * @event {Function} body-click 卡片主体部分被点击时触发
+     * @event {Function} foot-click 卡片底部部分被点击时触发
+     * @example <u-card padding="30" title="card"></u-card>
+     */
+    export default {
+        name: 'up-card',
+        data() {
+            return {};
+        },
+        mixins: [mpMixin, mixin, propsCard],
+        emits: ['click', 'head-click', 'body-click', 'foot-click'],
+        methods: {
+			addStyle,
+			addUnit,
+			getPx,
+            click() {
+                this.$emit('click', this.index);
+            },
+            headClick() {
+                this.$emit('head-click', this.index);
+            },
+            bodyClick() {
+                this.$emit('body-click', this.index);
+            },
+            footClick() {
+                this.$emit('foot-click', this.index);
+            }
+        }
+    };
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/components.scss";
+	
+.u-card {
+	position: relative;
+	overflow: hidden;
+	font-size: 28rpx;
+	background-color: #ffffff;
+	box-sizing: border-box;
+	
+	&-full {
+		// 如果是与屏幕之间不留空隙，应该设置左右边距为0
+		margin-left: 0 !important;
+		margin-right: 0 !important;
+		width: 100%;
+	}
+	
+	&--border:after {
+		border-radius: 16rpx;
+	}
+
+	&__head {
+		&--left {
+			color: $u-main-color;
+			
+			&__thumb {
+				margin-right: 16rpx;
+			}
+			
+			&__title {
+				max-width: 400rpx;
+			}
+		}
+
+		&--right {
+			color: $u-tips-color;
+			margin-left: 6rpx;
+		}
+	}
+
+	&__body {
+		color: $u-content-color;
+	}
+
+	&__foot {
+		color: $u-tips-color;
+	}
+}
+</style>