diff --git a/src/pages/demo/components/container/card-slot.vue b/src/pages/demo/components/container/card-slot.vue
index 2be299ec..5eab829a 100644
--- a/src/pages/demo/components/container/card-slot.vue
+++ b/src/pages/demo/components/container/card-slot.vue
@@ -1,18 +1,16 @@
 <template>
   <d2-container type="card">
     <template slot="header">header</template>
-    <d2-markdown :source="long"/>
+    <d2-demo-article/>
     <template slot="footer">footer</template>
   </d2-container>
 </template>
 
 <script>
-import long from './md/long.md'
+import d2DemoArticle from './components/d2-demo-article'
 export default {
-  data () {
-    return {
-      long
-    }
+  components: {
+    'd2-demo-article': d2DemoArticle
   }
 }
 </script>
diff --git a/src/pages/demo/components/container/card.vue b/src/pages/demo/components/container/card.vue
index a5f5e1cf..ec121617 100644
--- a/src/pages/demo/components/container/card.vue
+++ b/src/pages/demo/components/container/card.vue
@@ -1,16 +1,14 @@
 <template>
   <d2-container type="card">
-    <d2-markdown :source="long"/>
+    <d2-demo-article/>
   </d2-container>
 </template>
 
 <script>
-import long from './md/long.md'
+import d2DemoArticle from './components/d2-demo-article'
 export default {
-  data () {
-    return {
-      long
-    }
+  components: {
+    'd2-demo-article': d2DemoArticle
   }
 }
 </script>
diff --git a/src/pages/demo/components/container/components/d2-demo-article.vue b/src/pages/demo/components/container/components/d2-demo-article.vue
new file mode 100644
index 00000000..ab96b27d
--- /dev/null
+++ b/src/pages/demo/components/container/components/d2-demo-article.vue
@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <d2-markdown :source="long"/>
+  </div>
+</template>
+
+<script>
+import long from '../md/long'
+export default {
+  data () {
+    return {
+      long
+    }
+  }
+}
+</script>
diff --git a/src/pages/demo/components/container/full-bs.vue b/src/pages/demo/components/container/full-bs.vue
index 409d3cb9..ba002053 100644
--- a/src/pages/demo/components/container/full-bs.vue
+++ b/src/pages/demo/components/container/full-bs.vue
@@ -1,18 +1,16 @@
 <template>
   <d2-container scroll>
     <template slot="header">header</template>
-    <d2-markdown :source="long"/>
+    <d2-demo-article/>
     <template slot="footer">header</template>
   </d2-container>
 </template>
 
 <script>
-import long from './md/long.md'
+import d2DemoArticle from './components/d2-demo-article'
 export default {
-  data () {
-    return {
-      long
-    }
+  components: {
+    'd2-demo-article': d2DemoArticle
   }
 }
 </script>
diff --git a/src/pages/demo/components/container/full-slot.vue b/src/pages/demo/components/container/full-slot.vue
index dbe4c9f7..29897b85 100644
--- a/src/pages/demo/components/container/full-slot.vue
+++ b/src/pages/demo/components/container/full-slot.vue
@@ -1,18 +1,16 @@
 <template>
   <d2-container>
     <template slot="header">header</template>
-    <d2-markdown :source="long"/>
+    <d2-demo-article/>
     <template slot="footer">footer</template>
   </d2-container>
 </template>
 
 <script>
-import long from './md/long.md'
+import d2DemoArticle from './components/d2-demo-article'
 export default {
-  data () {
-    return {
-      long
-    }
+  components: {
+    'd2-demo-article': d2DemoArticle
   }
 }
 </script>
diff --git a/src/pages/demo/components/container/full.vue b/src/pages/demo/components/container/full.vue
index ec4b3915..9d99c936 100644
--- a/src/pages/demo/components/container/full.vue
+++ b/src/pages/demo/components/container/full.vue
@@ -1,16 +1,14 @@
 <template>
   <d2-container>
-    <d2-markdown :source="long"/>
+    <d2-demo-article/>
   </d2-container>
 </template>
 
 <script>
-import long from './md/long.md'
+import d2DemoArticle from './components/d2-demo-article'
 export default {
-  data () {
-    return {
-      long
-    }
+  components: {
+    'd2-demo-article': d2DemoArticle
   }
 }
 </script>
diff --git a/src/pages/demo/components/container/ghost-bs.vue b/src/pages/demo/components/container/ghost-bs.vue
index 52584aed..3ca9a643 100644
--- a/src/pages/demo/components/container/ghost-bs.vue
+++ b/src/pages/demo/components/container/ghost-bs.vue
@@ -2,21 +2,17 @@
   <d2-container type="ghost" scroll>
     <template slot="header">header</template>
     <div class="d2-pt d2-pb">
-      <el-card shadow="never" style="width: 600px;">
-        <d2-markdown :source="long"/>
-      </el-card>
+      <d2-demo-article/>
     </div>
     <template slot="footer">footer</template>
   </d2-container>
 </template>
 
 <script>
-import long from './md/long.md'
+import d2DemoArticle from './components/d2-demo-article'
 export default {
-  data () {
-    return {
-      long
-    }
+  components: {
+    'd2-demo-article': d2DemoArticle
   }
 }
 </script>
diff --git a/src/pages/demo/components/container/ghost-slot.vue b/src/pages/demo/components/container/ghost-slot.vue
index a941bdae..50615cee 100644
--- a/src/pages/demo/components/container/ghost-slot.vue
+++ b/src/pages/demo/components/container/ghost-slot.vue
@@ -2,21 +2,17 @@
   <d2-container type="ghost">
     <template slot="header">header</template>
     <div class="d2-pt d2-pb">
-      <el-card shadow="never" style="width: 600px;">
-        <d2-markdown :source="long"/>
-      </el-card>
+      <d2-demo-article/>
     </div>
     <template slot="footer">footer</template>
   </d2-container>
 </template>
 
 <script>
-import long from './md/long.md'
+import d2DemoArticle from './components/d2-demo-article'
 export default {
-  data () {
-    return {
-      long
-    }
+  components: {
+    'd2-demo-article': d2DemoArticle
   }
 }
 </script>
diff --git a/src/pages/demo/components/container/ghost.vue b/src/pages/demo/components/container/ghost.vue
index cb1ea2f8..a5bdac92 100644
--- a/src/pages/demo/components/container/ghost.vue
+++ b/src/pages/demo/components/container/ghost.vue
@@ -1,20 +1,16 @@
 <template>
   <d2-container type="ghost">
     <div class="d2-pt d2-pb">
-      <el-card shadow="never" style="width: 600px;">
-        <d2-markdown :source="long"/>
-      </el-card>
+      <d2-demo-article/>
     </div>
   </d2-container>
 </template>
 
 <script>
-import long from './md/long.md'
+import d2DemoArticle from './components/d2-demo-article'
 export default {
-  data () {
-    return {
-      long
-    }
+  components: {
+    'd2-demo-article': d2DemoArticle
   }
 }
 </script>