diff --git a/package.json b/package.json
index 2db1150df..9153f9222 100644
--- a/package.json
+++ b/package.json
@@ -29,7 +29,7 @@
     "release-changelog": "node scripts/release-changelog",
     "build:site:ts": "./scripts/pre-build-site/pre-build-site.sh && cross-env TUSIMPLE=true NODE_ENV=production NODE_OPTIONS=--max-old-space-size=4096 vite build && ./scripts/post-build-site/post-build-site.sh",
     "prepare": "husky install",
-    "transpile-docs": "node scripts/md-to-vue button",
+    "transpile-docs": "node scripts/md-to-vue card",
     "typecheck": "vue-tsc --noEmit src/**/*.vue"
   },
   "author": "07akioni",
diff --git a/src/card/demos/enUS/basic.demo.md b/src/card/demos/enUS/basic.demo.md
deleted file mode 100644
index b523543e0..000000000
--- a/src/card/demos/enUS/basic.demo.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# Basic
-
-A basic card.
-
-```html
-<n-card title="Card"> Card Content </n-card>
-```
-
-```css
-.n-card {
-  max-width: 300px;
-}
-```
diff --git a/src/card/demos/enUS/basic.demo.vue b/src/card/demos/enUS/basic.demo.vue
new file mode 100644
index 000000000..f34248315
--- /dev/null
+++ b/src/card/demos/enUS/basic.demo.vue
@@ -0,0 +1,17 @@
+<markdown>
+# Basic
+
+A basic card.
+</markdown>
+
+<template>
+  <n-card title="Card">
+    Card Content
+  </n-card>
+</template>
+
+<style>
+.n-card {
+  max-width: 300px;
+}
+</style>
diff --git a/src/card/demos/enUS/border.demo.md b/src/card/demos/enUS/border.demo.md
deleted file mode 100644
index b582ef986..000000000
--- a/src/card/demos/enUS/border.demo.md
+++ /dev/null
@@ -1,7 +0,0 @@
-# Border
-
-Card can be used without border.
-
-```html
-<n-card :bordered="false" title="Borderless Card"> Card Content </n-card>
-```
diff --git a/src/card/demos/enUS/border.demo.vue b/src/card/demos/enUS/border.demo.vue
new file mode 100644
index 000000000..6184ed472
--- /dev/null
+++ b/src/card/demos/enUS/border.demo.vue
@@ -0,0 +1,11 @@
+<markdown>
+# Border
+
+Card can be used without border.
+</markdown>
+
+<template>
+  <n-card :bordered="false" title="Borderless Card">
+    Card Content
+  </n-card>
+</template>
diff --git a/src/card/demos/enUS/closable.demo.md b/src/card/demos/enUS/closable.demo.vue
similarity index 65%
rename from src/card/demos/enUS/closable.demo.md
rename to src/card/demos/enUS/closable.demo.vue
index 66266969e..3252fed53 100644
--- a/src/card/demos/enUS/closable.demo.md
+++ b/src/card/demos/enUS/closable.demo.vue
@@ -1,12 +1,16 @@
+<markdown>
 # Closable
 
 You may need this when using it in a modal.
+</markdown>
 
-```html
-<n-card title="Card" closable @close="handleClose">Card Content</n-card>
-```
+<template>
+  <n-card title="Card" closable @close="handleClose">
+    Card Content
+  </n-card>
+</template>
 
-```js
+<script lang="ts">
 import { defineComponent } from 'vue'
 import { useMessage } from 'naive-ui'
 
@@ -20,10 +24,10 @@ export default defineComponent({
     }
   }
 })
-```
+</script>
 
-```css
+<style>
 .n-card {
   max-width: 300px;
 }
-```
+</style>
diff --git a/src/card/demos/enUS/custom-style.demo.md b/src/card/demos/enUS/custom-style.demo.md
deleted file mode 100644
index 8073960d4..000000000
--- a/src/card/demos/enUS/custom-style.demo.md
+++ /dev/null
@@ -1,17 +0,0 @@
-# Custom
-
-Card provides `content-style`, `header-style`, `footer-style` to help you customize style. For example you want an card with no padding to put whatever you want.
-
-```html
-<n-card content-style="padding: 0;">
-  <n-tabs
-    type="line"
-    size="large"
-    :tabs-padding="20"
-    pane-style="padding: 20px;"
-  >
-    <n-tab-pane name="PARKLIFE">PARKLIFE</n-tab-pane>
-    <n-tab-pane name="ROCKLIFE">ROCKLIFE</n-tab-pane>
-  </n-tabs>
-</n-card>
-```
diff --git a/src/card/demos/enUS/custom-style.demo.vue b/src/card/demos/enUS/custom-style.demo.vue
new file mode 100644
index 000000000..c9174f0d7
--- /dev/null
+++ b/src/card/demos/enUS/custom-style.demo.vue
@@ -0,0 +1,23 @@
+<markdown>
+# Custom
+
+Card provides `content-style`, `header-style`, `footer-style` to help you customize style. For example you want an card with no padding to put whatever you want.
+</markdown>
+
+<template>
+  <n-card content-style="padding: 0;">
+    <n-tabs
+      type="line"
+      size="large"
+      :tabs-padding="20"
+      pane-style="padding: 20px;"
+    >
+      <n-tab-pane name="PARKLIFE">
+        PARKLIFE
+      </n-tab-pane>
+      <n-tab-pane name="ROCKLIFE">
+        ROCKLIFE
+      </n-tab-pane>
+    </n-tabs>
+  </n-card>
+</template>
diff --git a/src/card/demos/enUS/hoverable.demo.md b/src/card/demos/enUS/hoverable.demo.md
deleted file mode 100644
index baaf6d1a8..000000000
--- a/src/card/demos/enUS/hoverable.demo.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Hoverable
-
-```html
-<n-card title="Card" hoverable> Card Content </n-card>
-```
-
-```css
-.n-card {
-  max-width: 300px;
-}
-```
diff --git a/src/card/demos/enUS/hoverable.demo.vue b/src/card/demos/enUS/hoverable.demo.vue
new file mode 100644
index 000000000..31757dfc7
--- /dev/null
+++ b/src/card/demos/enUS/hoverable.demo.vue
@@ -0,0 +1,15 @@
+<markdown>
+# Hoverable
+</markdown>
+
+<template>
+  <n-card title="Card" hoverable>
+    Card Content
+  </n-card>
+</template>
+
+<style>
+.n-card {
+  max-width: 300px;
+}
+</style>
diff --git a/src/card/demos/enUS/index.demo-entry.md b/src/card/demos/enUS/index.demo-entry.md
index b218b1782..4270773e2 100644
--- a/src/card/demos/enUS/index.demo-entry.md
+++ b/src/card/demos/enUS/index.demo-entry.md
@@ -5,17 +5,17 @@ Just put something in it.
 ## Demos
 
 ```demo
-basic
-size
+basic.vue
+size.vue
 cover.vue
-hoverable
-slots
-border
+hoverable.vue
+slots.vue
+border.vue
 segment.vue
-closable
-no-title
-loading
-custom-style
+closable.vue
+no-title.vue
+loading.vue
+custom-style.vue
 embedded.vue
 ```
 
diff --git a/src/card/demos/enUS/loading.demo.md b/src/card/demos/enUS/loading.demo.md
deleted file mode 100644
index e136e97e2..000000000
--- a/src/card/demos/enUS/loading.demo.md
+++ /dev/null
@@ -1,36 +0,0 @@
-# Loading
-
-Use `n-skeleton` to simulate loading effect.
-
-```html
-<n-space vertical>
-  <n-switch v-model:value="loading" />
-  <n-card>
-    <template #header>
-      <n-skeleton text v-if="loading" width="60%" />
-      <template v-else>Lorem Ipsum</template>
-    </template>
-    <n-skeleton text v-if="loading" :repeat="6" />
-    <template v-else>
-      Lorem ipsum dolor sit amet,<br />
-      consectetur adipiscing elit,<br />
-      sed do eiusmod tempor incididunt<br />
-      ut labore et dolore magna aliqua.<br />
-      Ut enim ad minim veniam,<br />
-      quis nostrud exercitation ullamco
-    </template>
-  </n-card>
-</n-space>
-```
-
-```js
-import { defineComponent, ref } from 'vue'
-
-export default defineComponent({
-  setup () {
-    return {
-      loading: ref(true)
-    }
-  }
-})
-```
diff --git a/src/card/demos/enUS/loading.demo.vue b/src/card/demos/enUS/loading.demo.vue
new file mode 100644
index 000000000..a40434cc3
--- /dev/null
+++ b/src/card/demos/enUS/loading.demo.vue
@@ -0,0 +1,40 @@
+<markdown>
+# Loading
+
+Use `n-skeleton` to simulate loading effect.
+</markdown>
+
+<template>
+  <n-space vertical>
+    <n-switch v-model:value="loading" />
+    <n-card>
+      <template #header>
+        <n-skeleton v-if="loading" text width="60%" />
+        <template v-else>
+          Lorem Ipsum
+        </template>
+      </template>
+      <n-skeleton v-if="loading" text :repeat="6" />
+      <template v-else>
+        Lorem ipsum dolor sit amet,<br>
+        consectetur adipiscing elit,<br>
+        sed do eiusmod tempor incididunt<br>
+        ut labore et dolore magna aliqua.<br>
+        Ut enim ad minim veniam,<br>
+        quis nostrud exercitation ullamco
+      </template>
+    </n-card>
+  </n-space>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
+    return {
+      loading: ref(true)
+    }
+  }
+})
+</script>
diff --git a/src/card/demos/enUS/no-title.demo.md b/src/card/demos/enUS/no-title.demo.md
deleted file mode 100644
index a4bf69492..000000000
--- a/src/card/demos/enUS/no-title.demo.md
+++ /dev/null
@@ -1,7 +0,0 @@
-# No title
-
-Nobody said a card must have a title.
-
-```html
-<n-card>No title</n-card>
-```
diff --git a/src/card/demos/enUS/no-title.demo.vue b/src/card/demos/enUS/no-title.demo.vue
new file mode 100644
index 000000000..742b03c11
--- /dev/null
+++ b/src/card/demos/enUS/no-title.demo.vue
@@ -0,0 +1,9 @@
+<markdown>
+# No title
+
+Nobody said a card must have a title.
+</markdown>
+
+<template>
+  <n-card>No title</n-card>
+</template>
diff --git a/src/card/demos/enUS/size.demo.md b/src/card/demos/enUS/size.demo.md
deleted file mode 100644
index 866e205f4..000000000
--- a/src/card/demos/enUS/size.demo.md
+++ /dev/null
@@ -1,12 +0,0 @@
-# Size
-
-Card has `small`, `medium`, `large`, `huge` sizes.
-
-```html
-<n-space vertical>
-  <n-card title="Small Card" size="small"> Card Content </n-card>
-  <n-card title="Medium Card" size="medium"> Card Content </n-card>
-  <n-card title="Large Card" size="large"> Card Content </n-card>
-  <n-card title="Huge Card" size="huge"> Card Content </n-card>
-</n-space>
-```
diff --git a/src/card/demos/enUS/size.demo.vue b/src/card/demos/enUS/size.demo.vue
new file mode 100644
index 000000000..f43b685b8
--- /dev/null
+++ b/src/card/demos/enUS/size.demo.vue
@@ -0,0 +1,22 @@
+<markdown>
+# Size
+
+Card has `small`, `medium`, `large`, `huge` sizes.
+</markdown>
+
+<template>
+  <n-space vertical>
+    <n-card title="Small Card" size="small">
+      Card Content
+    </n-card>
+    <n-card title="Medium Card" size="medium">
+      Card Content
+    </n-card>
+    <n-card title="Large Card" size="large">
+      Card Content
+    </n-card>
+    <n-card title="Huge Card" size="huge">
+      Card Content
+    </n-card>
+  </n-space>
+</template>
diff --git a/src/card/demos/enUS/slots.demo.md b/src/card/demos/enUS/slots.demo.md
deleted file mode 100644
index a9758d968..000000000
--- a/src/card/demos/enUS/slots.demo.md
+++ /dev/null
@@ -1,12 +0,0 @@
-# Slots
-
-Card has many slots to help you write less code.
-
-```html
-<n-card title="Card Slots Demo">
-  <template #header-extra> #header-extra </template>
-  Card Content
-  <template #footer> #footer </template>
-  <template #action> #action </template>
-</n-card>
-```
diff --git a/src/card/demos/enUS/slots.demo.vue b/src/card/demos/enUS/slots.demo.vue
new file mode 100644
index 000000000..29c62a305
--- /dev/null
+++ b/src/card/demos/enUS/slots.demo.vue
@@ -0,0 +1,20 @@
+<markdown>
+# Slots
+
+Card has many slots to help you write less code.
+</markdown>
+
+<template>
+  <n-card title="Card Slots Demo">
+    <template #header-extra>
+      #header-extra
+    </template>
+    Card Content
+    <template #footer>
+      #footer
+    </template>
+    <template #action>
+      #action
+    </template>
+  </n-card>
+</template>
diff --git a/src/card/demos/zhCN/basic.demo.md b/src/card/demos/zhCN/basic.demo.md
deleted file mode 100644
index d3388d02a..000000000
--- a/src/card/demos/zhCN/basic.demo.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# 基础用法
-
-基础卡片
-
-```html
-<n-card title="卡片"> 卡片内容 </n-card>
-```
-
-```css
-.n-card {
-  max-width: 300px;
-}
-```
diff --git a/src/card/demos/zhCN/basic.demo.vue b/src/card/demos/zhCN/basic.demo.vue
new file mode 100644
index 000000000..d8f025c50
--- /dev/null
+++ b/src/card/demos/zhCN/basic.demo.vue
@@ -0,0 +1,17 @@
+<markdown>
+# 基础用法
+
+基础卡片
+</markdown>
+
+<template>
+  <n-card title="卡片">
+    卡片内容
+  </n-card>
+</template>
+
+<style>
+.n-card {
+  max-width: 300px;
+}
+</style>
diff --git a/src/card/demos/zhCN/border.demo.md b/src/card/demos/zhCN/border.demo.md
deleted file mode 100644
index d2edc95ae..000000000
--- a/src/card/demos/zhCN/border.demo.md
+++ /dev/null
@@ -1,7 +0,0 @@
-# 边框
-
-卡片可以没有边框。
-
-```html
-<n-card :bordered="false" title="无边框的卡片"> 卡片内容 </n-card>
-```
diff --git a/src/card/demos/zhCN/border.demo.vue b/src/card/demos/zhCN/border.demo.vue
new file mode 100644
index 000000000..070e856e6
--- /dev/null
+++ b/src/card/demos/zhCN/border.demo.vue
@@ -0,0 +1,11 @@
+<markdown>
+# 边框
+
+卡片可以没有边框。
+</markdown>
+
+<template>
+  <n-card :bordered="false" title="无边框的卡片">
+    卡片内容
+  </n-card>
+</template>
diff --git a/src/card/demos/zhCN/closable.demo.md b/src/card/demos/zhCN/closable.demo.vue
similarity index 66%
rename from src/card/demos/zhCN/closable.demo.md
rename to src/card/demos/zhCN/closable.demo.vue
index 6764a6a26..3f3daad91 100644
--- a/src/card/demos/zhCN/closable.demo.md
+++ b/src/card/demos/zhCN/closable.demo.vue
@@ -1,12 +1,16 @@
+<markdown>
 # 可关闭
 
 用于 Modal 的时候，你可能需要这个属性。
+</markdown>
 
-```html
-<n-card title="卡片" closable @close="handleClose">卡片内容</n-card>
-```
+<template>
+  <n-card title="卡片" closable @close="handleClose">
+    卡片内容
+  </n-card>
+</template>
 
-```js
+<script lang="ts">
 import { defineComponent } from 'vue'
 import { useMessage } from 'naive-ui'
 
@@ -20,10 +24,10 @@ export default defineComponent({
     }
   }
 })
-```
+</script>
 
-```css
+<style>
 .n-card {
   max-width: 300px;
 }
-```
+</style>
diff --git a/src/card/demos/zhCN/custom-style.demo.md b/src/card/demos/zhCN/custom-style.demo.md
deleted file mode 100644
index 8b15a2ab5..000000000
--- a/src/card/demos/zhCN/custom-style.demo.md
+++ /dev/null
@@ -1,17 +0,0 @@
-# 自定义样式
-
-卡片提供 `content-style`、`header-style`、`footer-style` 来帮助你自定义样式，比如你想要一个没有 padding 的卡片来往里面放一些乱七八糟的东西。
-
-```html
-<n-card content-style="padding: 0;">
-  <n-tabs
-    type="line"
-    size="large"
-    :tabs-padding="20"
-    pane-style="padding: 20px;"
-  >
-    <n-tab-pane name="PARKLIFE">PARKLIFE</n-tab-pane>
-    <n-tab-pane name="ROCKLIFE">ROCKLIFE</n-tab-pane>
-  </n-tabs>
-</n-card>
-```
diff --git a/src/card/demos/zhCN/custom-style.demo.vue b/src/card/demos/zhCN/custom-style.demo.vue
new file mode 100644
index 000000000..3f8dc0af1
--- /dev/null
+++ b/src/card/demos/zhCN/custom-style.demo.vue
@@ -0,0 +1,23 @@
+<markdown>
+# 自定义样式
+
+卡片提供 `content-style`、`header-style`、`footer-style` 来帮助你自定义样式，比如你想要一个没有 padding 的卡片来往里面放一些乱七八糟的东西。
+</markdown>
+
+<template>
+  <n-card content-style="padding: 0;">
+    <n-tabs
+      type="line"
+      size="large"
+      :tabs-padding="20"
+      pane-style="padding: 20px;"
+    >
+      <n-tab-pane name="PARKLIFE">
+        PARKLIFE
+      </n-tab-pane>
+      <n-tab-pane name="ROCKLIFE">
+        ROCKLIFE
+      </n-tab-pane>
+    </n-tabs>
+  </n-card>
+</template>
diff --git a/src/card/demos/zhCN/embedded.demo.md b/src/card/demos/zhCN/embedded.demo.md
deleted file mode 100644
index 793fc0ef9..000000000
--- a/src/card/demos/zhCN/embedded.demo.md
+++ /dev/null
@@ -1,16 +0,0 @@
-# 嵌入效果
-
-在亮色模式下，有的时候你希望背景色暗一点，来和纯色背景分割。
-
-```html
-<n-card title="📖 如何成功" embedded :bordered="false"
-  >如果你年轻的时候不 996，你什么时候可以 996？你一辈子没有
-  996，你觉得你就很骄傲了？这个世界上，我们每一个人都希望成功，都希望美好生活，都希望被尊重，我请问大家，你不付出超越别人的努力和时间，你怎么能够实现你想要的成功？</n-card
->
-```
-
-```css
-.n-card {
-  max-width: 300px;
-}
-```
diff --git a/src/card/demos/zhCN/embedded.demo.vue b/src/card/demos/zhCN/embedded.demo.vue
index 368a30abb..04d49898a 100644
--- a/src/card/demos/zhCN/embedded.demo.vue
+++ b/src/card/demos/zhCN/embedded.demo.vue
@@ -3,14 +3,16 @@
 
 在亮色模式下，有的时候你希望背景色暗一点，来和纯色背景分割。
 </markdown>
-
 <template>
-  <n-card title="📖 如何成功" embedded :bordered="false">
+  <n-card
+    title="📖 如何成功"
+    embedded
+    :bordered="false"
+  >
     如果你年轻的时候不 996，你什么时候可以 996？你一辈子没有
     996，你觉得你就很骄傲了？这个世界上，我们每一个人都希望成功，都希望美好生活，都希望被尊重，我请问大家，你不付出超越别人的努力和时间，你怎么能够实现你想要的成功？
   </n-card>
 </template>
-
 <style>
 .n-card {
   max-width: 300px;
diff --git a/src/card/demos/zhCN/hoverable.demo.md b/src/card/demos/zhCN/hoverable.demo.md
deleted file mode 100644
index 13519054f..000000000
--- a/src/card/demos/zhCN/hoverable.demo.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# 可悬浮
-
-```html
-<n-card title="卡片" hoverable> 卡片内容 </n-card>
-```
-
-```css
-.n-card {
-  max-width: 300px;
-}
-```
diff --git a/src/card/demos/zhCN/hoverable.demo.vue b/src/card/demos/zhCN/hoverable.demo.vue
new file mode 100644
index 000000000..9df2b8665
--- /dev/null
+++ b/src/card/demos/zhCN/hoverable.demo.vue
@@ -0,0 +1,15 @@
+<markdown>
+# 可悬浮
+</markdown>
+
+<template>
+  <n-card title="卡片" hoverable>
+    卡片内容
+  </n-card>
+</template>
+
+<style>
+.n-card {
+  max-width: 300px;
+}
+</style>
diff --git a/src/card/demos/zhCN/index.demo-entry.md b/src/card/demos/zhCN/index.demo-entry.md
index b358f76ab..cad5fbd86 100644
--- a/src/card/demos/zhCN/index.demo-entry.md
+++ b/src/card/demos/zhCN/index.demo-entry.md
@@ -5,19 +5,19 @@
 ## 演示
 
 ```demo
-basic
-size
+basic.vue
+size.vue
 cover.vue
-hoverable
-slots
-border
+hoverable.vue
+slots.vue
+border.vue
 segment.vue
-closable
-no-title
-loading
-custom-style
+closable.vue
+no-title.vue
+loading.vue
+custom-style.vue
 embedded.vue
-rtl-debug
+rtl-debug.vue
 ```
 
 ## API
diff --git a/src/card/demos/zhCN/loading.demo.md b/src/card/demos/zhCN/loading.demo.md
deleted file mode 100644
index ef66b141f..000000000
--- a/src/card/demos/zhCN/loading.demo.md
+++ /dev/null
@@ -1,36 +0,0 @@
-# 加载中
-
-使用 `n-skeleton` 模拟加载效果。
-
-```html
-<n-space vertical>
-  <n-switch v-model:value="loading" />
-  <n-card>
-    <template #header>
-      <n-skeleton text v-if="loading" width="60%" />
-      <template v-else>I'm OK</template>
-    </template>
-    <n-skeleton text v-if="loading" :repeat="6" />
-    <template v-else>
-      不要忘了留姓名<br />
-      电话和其他事情<br />
-      不要说的太快免得我没写下你大名<br />
-      或许你不再打来<br />
-      我却等到头发白<br />
-      希望有一天你会打来
-    </template>
-  </n-card>
-</n-space>
-```
-
-```js
-import { defineComponent, ref } from 'vue'
-
-export default defineComponent({
-  setup () {
-    return {
-      loading: ref(true)
-    }
-  }
-})
-```
diff --git a/src/card/demos/zhCN/loading.demo.vue b/src/card/demos/zhCN/loading.demo.vue
new file mode 100644
index 000000000..7f5257ef8
--- /dev/null
+++ b/src/card/demos/zhCN/loading.demo.vue
@@ -0,0 +1,40 @@
+<markdown>
+# 加载中
+
+使用 `n-skeleton` 模拟加载效果。
+</markdown>
+
+<template>
+  <n-space vertical>
+    <n-switch v-model:value="loading" />
+    <n-card>
+      <template #header>
+        <n-skeleton v-if="loading" text width="60%" />
+        <template v-else>
+          I'm OK
+        </template>
+      </template>
+      <n-skeleton v-if="loading" text :repeat="6" />
+      <template v-else>
+        不要忘了留姓名<br>
+        电话和其他事情<br>
+        不要说的太快免得我没写下你大名<br>
+        或许你不再打来<br>
+        我却等到头发白<br>
+        希望有一天你会打来
+      </template>
+    </n-card>
+  </n-space>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
+    return {
+      loading: ref(true)
+    }
+  }
+})
+</script>
diff --git a/src/card/demos/zhCN/no-title.demo.md b/src/card/demos/zhCN/no-title.demo.md
deleted file mode 100644
index 0d422efcb..000000000
--- a/src/card/demos/zhCN/no-title.demo.md
+++ /dev/null
@@ -1,7 +0,0 @@
-# 没有标题
-
-谁说卡片一定要有标题呢。
-
-```html
-<n-card>没有标题</n-card>
-```
diff --git a/src/card/demos/zhCN/no-title.demo.vue b/src/card/demos/zhCN/no-title.demo.vue
new file mode 100644
index 000000000..96d0261ba
--- /dev/null
+++ b/src/card/demos/zhCN/no-title.demo.vue
@@ -0,0 +1,9 @@
+<markdown>
+# 没有标题
+
+谁说卡片一定要有标题呢。
+</markdown>
+
+<template>
+  <n-card>没有标题</n-card>
+</template>
diff --git a/src/card/demos/zhCN/rtl-debug.demo.md b/src/card/demos/zhCN/rtl-debug.demo.md
deleted file mode 100644
index 17daaf3d5..000000000
--- a/src/card/demos/zhCN/rtl-debug.demo.md
+++ /dev/null
@@ -1,30 +0,0 @@
-# Rtl Debug
-
-```html
-<n-space vertical>
-  <n-space><n-switch v-model:value="rtlEnabled" />Rtl</n-space>
-  <n-config-provider :rtl="rtlEnabled ? rtlStyles : undefined">
-    <n-card closable>
-      <template #header>Rtl Header Test</template>
-      <template #header-extra>Rtl Header Extra Test</template>
-      Rtl Content Test
-      <template #footer>Rtl Header Test</template>
-      <template #action>Rtl Action Test</template>
-    </n-card>
-  </n-config-provider>
-</n-space>
-```
-
-```js
-import { defineComponent, ref } from 'vue'
-import { unstableCardRtl } from 'naive-ui'
-
-export default defineComponent({
-  setup () {
-    return {
-      rtlEnabled: ref(false),
-      rtlStyles: [unstableCardRtl]
-    }
-  }
-})
-```
diff --git a/src/card/demos/zhCN/rtl-debug.demo.vue b/src/card/demos/zhCN/rtl-debug.demo.vue
new file mode 100644
index 000000000..8b91e85c5
--- /dev/null
+++ b/src/card/demos/zhCN/rtl-debug.demo.vue
@@ -0,0 +1,41 @@
+<markdown>
+# Rtl Debug
+
+</markdown>
+
+<template>
+  <n-space vertical>
+    <n-space><n-switch v-model:value="rtlEnabled" />Rtl</n-space>
+    <n-config-provider :rtl="rtlEnabled ? rtlStyles : undefined">
+      <n-card closable>
+        <template #header>
+          Rtl Header Test
+        </template>
+        <template #header-extra>
+          Rtl Header Extra Test
+        </template>
+        Rtl Content Test
+        <template #footer>
+          Rtl Header Test
+        </template>
+        <template #action>
+          Rtl Action Test
+        </template>
+      </n-card>
+    </n-config-provider>
+  </n-space>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+import { unstableCardRtl } from 'naive-ui'
+
+export default defineComponent({
+  setup () {
+    return {
+      rtlEnabled: ref(false),
+      rtlStyles: [unstableCardRtl]
+    }
+  }
+})
+</script>
diff --git a/src/card/demos/zhCN/size.demo.md b/src/card/demos/zhCN/size.demo.md
deleted file mode 100644
index a677ea60f..000000000
--- a/src/card/demos/zhCN/size.demo.md
+++ /dev/null
@@ -1,12 +0,0 @@
-# 尺寸
-
-卡片有 `small`、`medium`、`large`、`huge` 尺寸。
-
-```html
-<n-space vertical>
-  <n-card title="小卡片" size="small"> 卡片内容 </n-card>
-  <n-card title="中卡片" size="medium"> 卡片内容 </n-card>
-  <n-card title="大卡片" size="large"> 卡片内容 </n-card>
-  <n-card title="超大卡片" size="huge"> 卡片内容 </n-card>
-</n-space>
-```
diff --git a/src/card/demos/zhCN/size.demo.vue b/src/card/demos/zhCN/size.demo.vue
new file mode 100644
index 000000000..4026e33f3
--- /dev/null
+++ b/src/card/demos/zhCN/size.demo.vue
@@ -0,0 +1,22 @@
+<markdown>
+# 尺寸
+
+卡片有 `small`、`medium`、`large`、`huge` 尺寸。
+</markdown>
+
+<template>
+  <n-space vertical>
+    <n-card title="小卡片" size="small">
+      卡片内容
+    </n-card>
+    <n-card title="中卡片" size="medium">
+      卡片内容
+    </n-card>
+    <n-card title="大卡片" size="large">
+      卡片内容
+    </n-card>
+    <n-card title="超大卡片" size="huge">
+      卡片内容
+    </n-card>
+  </n-space>
+</template>
diff --git a/src/card/demos/zhCN/slots.demo.md b/src/card/demos/zhCN/slots.demo.md
deleted file mode 100644
index 9786707f6..000000000
--- a/src/card/demos/zhCN/slots.demo.md
+++ /dev/null
@@ -1,12 +0,0 @@
-# 插槽
-
-卡片有很多插槽，希望能帮你少写点代码。
-
-```html
-<n-card title="卡片插槽示例">
-  <template #header-extra> #header-extra </template>
-  卡片内容
-  <template #footer> #footer </template>
-  <template #action> #action </template>
-</n-card>
-```
diff --git a/src/card/demos/zhCN/slots.demo.vue b/src/card/demos/zhCN/slots.demo.vue
new file mode 100644
index 000000000..0ea77d77a
--- /dev/null
+++ b/src/card/demos/zhCN/slots.demo.vue
@@ -0,0 +1,20 @@
+<markdown>
+# 插槽
+
+卡片有很多插槽，希望能帮你少写点代码。
+</markdown>
+
+<template>
+  <n-card title="卡片插槽示例">
+    <template #header-extra>
+      #header-extra
+    </template>
+    卡片内容
+    <template #footer>
+      #footer
+    </template>
+    <template #action>
+      #action
+    </template>
+  </n-card>
+</template>
diff --git a/src/card/src/Card.tsx b/src/card/src/Card.tsx
index fec431b5c..a58fa5780 100644
--- a/src/card/src/Card.tsx
+++ b/src/card/src/Card.tsx
@@ -1,6 +1,6 @@
 import { h, defineComponent, computed, PropType, CSSProperties } from 'vue'
 import { getPadding } from 'seemly'
-import { useConfig, useTheme } from '../../_mixins'
+import { useConfig, useTheme, useCssVarsClass } from '../../_mixins'
 import type { ThemeProps } from '../../_mixins'
 import { call, createKey, keysOf } from '../../_utils'
 import type { ExtractPublicPropTypes, MaybeArray } from '../../_utils'
@@ -62,6 +62,7 @@ export default defineComponent({
       if (onClose) call(onClose)
     }
     const { mergedClsPrefixRef, NConfigProvider } = useConfig(props)
+    const disableInlineTheme = NConfigProvider?.disableInlineTheme
     const themeRef = useTheme(
       'Card',
       '-card',
@@ -75,69 +76,81 @@ export default defineComponent({
       NConfigProvider?.mergedRtlRef,
       mergedClsPrefixRef
     )
+    const cssVarsRef = computed(() => {
+      const { size } = props
+      const {
+        self: {
+          color,
+          colorModal,
+          colorTarget,
+          textColor,
+          titleTextColor,
+          titleFontWeight,
+          borderColor,
+          actionColor,
+          borderRadius,
+          closeColor,
+          closeColorHover,
+          closeColorPressed,
+          lineHeight,
+          closeSize,
+          boxShadow,
+          colorPopover,
+          colorEmbedded,
+          [createKey('padding', size)]: padding,
+          [createKey('fontSize', size)]: fontSize,
+          [createKey('titleFontSize', size)]: titleFontSize
+        },
+        common: { cubicBezierEaseInOut }
+      } = themeRef.value
+      const {
+        top: paddingTop,
+        left: paddingLeft,
+        bottom: paddingBottom
+      } = getPadding(padding)
+      return {
+        '--n-bezier': cubicBezierEaseInOut,
+        '--n-border-radius': borderRadius,
+        '--n-color': props.embedded ? colorEmbedded : color,
+        '--n-color-modal': colorModal,
+        '--n-color-popover': colorPopover,
+        '--n-color-target': colorTarget,
+        '--n-text-color': textColor,
+        '--n-line-height': lineHeight,
+        '--n-action-color': actionColor,
+        '--n-title-text-color': titleTextColor,
+        '--n-title-font-weight': titleFontWeight,
+        '--n-close-color': closeColor,
+        '--n-close-color-hover': closeColorHover,
+        '--n-close-color-pressed': closeColorPressed,
+        '--n-border-color': borderColor,
+        '--n-box-shadow': boxShadow,
+        // size
+        '--n-padding-top': paddingTop,
+        '--n-padding-bottom': paddingBottom,
+        '--n-padding-left': paddingLeft,
+        '--n-font-size': fontSize,
+        '--n-title-font-size': titleFontSize,
+        '--n-close-size': closeSize
+      }
+    })
+    const themeClassRef = disableInlineTheme
+      ? useCssVarsClass(
+        'card',
+        computed(() => {
+          return props.size[0]
+        }),
+        cssVarsRef,
+        props
+      )
+      : undefined
     return {
       rtlEnabled: rtlEnabledRef,
       mergedClsPrefix: mergedClsPrefixRef,
       mergedTheme: themeRef,
       handleCloseClick,
-      cssVars: computed(() => {
-        const { size } = props
-        const {
-          self: {
-            color,
-            colorModal,
-            colorTarget,
-            textColor,
-            titleTextColor,
-            titleFontWeight,
-            borderColor,
-            actionColor,
-            borderRadius,
-            closeColor,
-            closeColorHover,
-            closeColorPressed,
-            lineHeight,
-            closeSize,
-            boxShadow,
-            colorPopover,
-            colorEmbedded,
-            [createKey('padding', size)]: padding,
-            [createKey('fontSize', size)]: fontSize,
-            [createKey('titleFontSize', size)]: titleFontSize
-          },
-          common: { cubicBezierEaseInOut }
-        } = themeRef.value
-        const {
-          top: paddingTop,
-          left: paddingLeft,
-          bottom: paddingBottom
-        } = getPadding(padding)
-        return {
-          '--n-bezier': cubicBezierEaseInOut,
-          '--n-border-radius': borderRadius,
-          '--n-color': props.embedded ? colorEmbedded : color,
-          '--n-color-modal': colorModal,
-          '--n-color-popover': colorPopover,
-          '--n-color-target': colorTarget,
-          '--n-text-color': textColor,
-          '--n-line-height': lineHeight,
-          '--n-action-color': actionColor,
-          '--n-title-text-color': titleTextColor,
-          '--n-title-font-weight': titleFontWeight,
-          '--n-close-color': closeColor,
-          '--n-close-color-hover': closeColorHover,
-          '--n-close-color-pressed': closeColorPressed,
-          '--n-border-color': borderColor,
-          '--n-box-shadow': boxShadow,
-          // size
-          '--n-padding-top': paddingTop,
-          '--n-padding-bottom': paddingBottom,
-          '--n-padding-left': paddingLeft,
-          '--n-font-size': fontSize,
-          '--n-title-font-size': titleFontSize,
-          '--n-close-size': closeSize
-        }
-      })
+      cssVars: disableInlineTheme ? undefined : cssVarsRef,
+      themeClass: themeClassRef
     }
   },
   render () {
@@ -153,6 +166,7 @@ export default defineComponent({
       <div
         class={[
           `${mergedClsPrefix}-card`,
+          this.themeClass,
           {
             [`${mergedClsPrefix}-card--rtl`]: rtlEnabled,
             [`${mergedClsPrefix}-card--content${
diff --git a/src/card/styles/index.ts b/src/card/styles/index.ts
index c8b07a17e..9c9bb5085 100644
--- a/src/card/styles/index.ts
+++ b/src/card/styles/index.ts
@@ -1,4 +1,4 @@
 export { default as cardDark } from './dark'
 export { default as cardLight } from './light'
-export { default as cardRtl } from './rtl'
+export { cardRtl } from './rtl'
 export type { CardTheme, CardThemeVars } from './light'
diff --git a/src/card/styles/rtl.ts b/src/card/styles/rtl.ts
index 38ea87b1e..166bc2a34 100644
--- a/src/card/styles/rtl.ts
+++ b/src/card/styles/rtl.ts
@@ -1,6 +1,7 @@
+import { RtlItem } from '../../config-provider/src/internal-interface'
 import rtlStyle from '../src/styles/rtl.cssr'
 
-export default {
+export const cardRtl: RtlItem = {
   name: 'Card',
   style: rtlStyle
 }
diff --git a/src/tag/src/Tag.tsx b/src/tag/src/Tag.tsx
index e439032e1..d23a2f57d 100644
--- a/src/tag/src/Tag.tsx
+++ b/src/tag/src/Tag.tsx
@@ -190,24 +190,26 @@ export default defineComponent({
         '--n-text-color-pressed-checkable': textColorPressedCheckable
       }
     })
-    const themeClassRef = useCssVarsClass(
-      'tag',
-      computed(() => {
-        let hash = ''
-        const { type, size, color: { color, textColor } = {} } = props
-        hash += type[0]
-        hash += size[0]
-        if (color) {
-          hash += `a${color2Class(color)}`
-        }
-        if (textColor) {
-          hash += `b${color2Class(textColor)}`
-        }
-        return hash
-      }),
-      cssVarsRef,
-      props
-    )
+    const themeClassRef = disableInlineTheme
+      ? useCssVarsClass(
+        'tag',
+        computed(() => {
+          let hash = ''
+          const { type, size, color: { color, textColor } = {} } = props
+          hash += type[0]
+          hash += size[0]
+          if (color) {
+            hash += `a${color2Class(color)}`
+          }
+          if (textColor) {
+            hash += `b${color2Class(textColor)}`
+          }
+          return hash
+        }),
+        cssVarsRef,
+        props
+      )
+      : undefined
     return {
       ...tagPublicMethods,
       rtlEnabled: rtlEnabledRef,
@@ -217,7 +219,7 @@ export default defineComponent({
       handleClick,
       handleCloseClick,
       cssVars: disableInlineTheme ? undefined : cssVarsRef,
-      themeClass: disableInlineTheme ? themeClassRef : undefined
+      themeClass: themeClassRef
     }
   },
   render () {