diff --git a/_web/src/components/index.js b/_web/src/components/index.js
index 21104408..afa75ac0 100644
--- a/_web/src/components/index.js
+++ b/_web/src/components/index.js
@@ -31,6 +31,9 @@ import ArticleListContent from '@/components/ArticleListContent'
 import AntdEditor from '@/components/Editor/WangEditor'
 import Dialog from '@/components/Dialog'
 
+// xn components
+import XCard from '@/components/xnComponents/XCard'
+
 export {
   AvatarList,
   Bar,
@@ -62,5 +65,6 @@ export {
   StandardFormRow,
   ArticleListContent,
   AntdEditor,
-  Dialog
+  Dialog,
+  XCard
 }
diff --git a/_web/src/components/xnComponents/XCard.vue b/_web/src/components/xnComponents/XCard.vue
new file mode 100644
index 00000000..4fdb7191
--- /dev/null
+++ b/_web/src/components/xnComponents/XCard.vue
@@ -0,0 +1,16 @@
+<template>
+  <a-card :bordered="false" :bodyStyle="tstyle">
+    <slot name="content"></slot>
+  </a-card>
+</template>
+
+<script>
+    export default {
+        name: 'XCard',
+      data() {
+        return {
+          tstyle: { 'padding-bottom': '0px', 'margin-bottom': '10px' }
+        }
+      }
+    }
+</script>