diff --git a/packages/varlet-markdown-loader/markdownLoader.js b/packages/varlet-markdown-loader/markdownLoader.js
index a1210aefe03..bead26b5aea 100644
--- a/packages/varlet-markdown-loader/markdownLoader.js
+++ b/packages/varlet-markdown-loader/markdownLoader.js
@@ -1,5 +1,6 @@
 const markdown = require('markdown-it')
 const hljs = require('highlight.js')
+const cardWrapper = require('./src/card-wrapper.js')
 
 function highlight(str, lang) {
 	if (lang && hljs.getLanguage(lang)) {
@@ -19,7 +20,7 @@ function markLoader(source) {
 		typographer: true,
 		highlight,
 	})
-	const html = md.render(source)
+	const html = cardWrapper(md.render(source))
 
 	return (
 		'<template>\n' +
diff --git a/packages/varlet-markdown-loader/src/card-wrapper.js b/packages/varlet-markdown-loader/src/card-wrapper.js
new file mode 100644
index 00000000000..d9878f329c7
--- /dev/null
+++ b/packages/varlet-markdown-loader/src/card-wrapper.js
@@ -0,0 +1,16 @@
+module.exports = function cardWrapper(html) {
+	const group = html
+		.replace(/<h3/g, ':::<h3')
+		.replace(/<h2/g, ':::<h2')
+		.split(':::')
+
+	return group
+		.map((fragment) => {
+			if (fragment.indexOf('<h3') !== -1) {
+				return `<div class="card">${fragment}</div>`
+			}
+
+			return fragment
+		})
+		.join('')
+}