diff --git a/components/card/__tests__/__snapshots__/demo.test.js.snap b/components/card/__tests__/__snapshots__/demo.test.js.snap
index da5b9f1b0d..8ce7e3107a 100644
--- a/components/card/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/card/__tests__/__snapshots__/demo.test.js.snap
@@ -5,43 +5,41 @@ exports[`renders ./components/card/demo/basic.md correctly 1`] = `
   class="ant-card ant-card-bordered"
   style="width:300px"
 >
-  <div>
+  <div
+    class="ant-card-head"
+  >
     <div
-      class="ant-card-head"
+      class="ant-card-head-wrapper"
     >
       <div
-        class="ant-card-head-wrapper"
+        class="ant-card-head-title"
       >
-        <div
-          class="ant-card-head-title"
+        Card title
+      </div>
+      <div
+        class="ant-card-extra"
+      >
+        <a
+          href="#"
         >
-          Card title
-        </div>
-        <div
-          class="ant-card-extra"
-        >
-          <a
-            href="#"
-          >
-            More
-          </a>
-        </div>
+          More
+        </a>
       </div>
     </div>
-    <div
-      class="ant-card-body"
-    >
-      <div>
-        <p>
-          Card content
-        </p>
-        <p>
-          Card content
-        </p>
-        <p>
-          Card content
-        </p>
-      </div>
+  </div>
+  <div
+    class="ant-card-body"
+  >
+    <div>
+      <p>
+        Card content
+      </p>
+      <p>
+        Card content
+      </p>
+      <p>
+        Card content
+      </p>
     </div>
   </div>
 </div>
@@ -55,34 +53,32 @@ exports[`renders ./components/card/demo/border-less.md correctly 1`] = `
     class="ant-card"
     style="width:300px"
   >
-    <div>
+    <div
+      class="ant-card-head"
+    >
       <div
-        class="ant-card-head"
+        class="ant-card-head-wrapper"
       >
         <div
-          class="ant-card-head-wrapper"
+          class="ant-card-head-title"
         >
-          <div
-            class="ant-card-head-title"
-          >
-            Card title
-          </div>
+          Card title
         </div>
       </div>
-      <div
-        class="ant-card-body"
-      >
-        <div>
-          <p>
-            Card content
-          </p>
-          <p>
-            Card content
-          </p>
-          <p>
-            Card content
-          </p>
-        </div>
+    </div>
+    <div
+      class="ant-card-body"
+    >
+      <div>
+        <p>
+          Card content
+        </p>
+        <p>
+          Card content
+        </p>
+        <p>
+          Card content
+        </p>
       </div>
     </div>
   </div>
@@ -94,38 +90,36 @@ exports[`renders ./components/card/demo/flexible-content.md correctly 1`] = `
   class="ant-card ant-card-bordered ant-card-hoverable"
   style="width:240px"
 >
-  <div>
-    <div
-      class="ant-card-cover"
-    >
-      <img
-        alt="example"
-        src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png"
-      />
-    </div>
-    <div
-      class="ant-card-body"
-    >
-      <div>
+  <div
+    class="ant-card-cover"
+  >
+    <img
+      alt="example"
+      src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png"
+    />
+  </div>
+  <div
+    class="ant-card-body"
+  >
+    <div>
+      <div
+        class="ant-card-meta"
+      >
         <div
-          class="ant-card-meta"
+          class="ant-card-meta-content"
         >
           <div
-            class="ant-card-meta-content"
+            class="ant-card-meta-detail"
           >
             <div
-              class="ant-card-meta-detail"
+              class="ant-card-meta-title"
             >
-              <div
-                class="ant-card-meta-title"
-              >
-                Europe Street beat
-              </div>
-              <div
-                class="ant-card-meta-description"
-              >
-                www.instagram.com
-              </div>
+              Europe Street beat
+            </div>
+            <div
+              class="ant-card-meta-description"
+            >
+              www.instagram.com
             </div>
           </div>
         </div>
@@ -139,66 +133,64 @@ exports[`renders ./components/card/demo/grid-card.md correctly 1`] = `
 <div
   class="ant-card ant-card-bordered ant-card-contain-grid"
 >
-  <div>
+  <div
+    class="ant-card-head"
+  >
     <div
-      class="ant-card-head"
+      class="ant-card-head-wrapper"
     >
       <div
-        class="ant-card-head-wrapper"
+        class="ant-card-head-title"
       >
-        <div
-          class="ant-card-head-title"
-        >
-          Card Title
-        </div>
+        Card Title
       </div>
     </div>
-    <div
-      class="ant-card-body"
-    >
-      <div>
-        <div
-          class="ant-card-grid"
-          style="width:25%;text-align:center"
-        >
-          Content
-        </div>
-        <div
-          class="ant-card-grid"
-          style="width:25%;text-align:center"
-        >
-          Content
-        </div>
-        <div
-          class="ant-card-grid"
-          style="width:25%;text-align:center"
-        >
-          Content
-        </div>
-        <div
-          class="ant-card-grid"
-          style="width:25%;text-align:center"
-        >
-          Content
-        </div>
-        <div
-          class="ant-card-grid"
-          style="width:25%;text-align:center"
-        >
-          Content
-        </div>
-        <div
-          class="ant-card-grid"
-          style="width:25%;text-align:center"
-        >
-          Content
-        </div>
-        <div
-          class="ant-card-grid"
-          style="width:25%;text-align:center"
-        >
-          Content
-        </div>
+  </div>
+  <div
+    class="ant-card-body"
+  >
+    <div>
+      <div
+        class="ant-card-grid"
+        style="width:25%;text-align:center"
+      >
+        Content
+      </div>
+      <div
+        class="ant-card-grid"
+        style="width:25%;text-align:center"
+      >
+        Content
+      </div>
+      <div
+        class="ant-card-grid"
+        style="width:25%;text-align:center"
+      >
+        Content
+      </div>
+      <div
+        class="ant-card-grid"
+        style="width:25%;text-align:center"
+      >
+        Content
+      </div>
+      <div
+        class="ant-card-grid"
+        style="width:25%;text-align:center"
+      >
+        Content
+      </div>
+      <div
+        class="ant-card-grid"
+        style="width:25%;text-align:center"
+      >
+        Content
+      </div>
+      <div
+        class="ant-card-grid"
+        style="width:25%;text-align:center"
+      >
+        Content
       </div>
     </div>
   </div>
@@ -220,26 +212,24 @@ exports[`renders ./components/card/demo/in-column.md correctly 1`] = `
       <div
         class="ant-card"
       >
-        <div>
+        <div
+          class="ant-card-head"
+        >
           <div
-            class="ant-card-head"
+            class="ant-card-head-wrapper"
           >
             <div
-              class="ant-card-head-wrapper"
+              class="ant-card-head-title"
             >
-              <div
-                class="ant-card-head-title"
-              >
-                Card title
-              </div>
+              Card title
             </div>
           </div>
-          <div
-            class="ant-card-body"
-          >
-            <div>
-              Card content
-            </div>
+        </div>
+        <div
+          class="ant-card-body"
+        >
+          <div>
+            Card content
           </div>
         </div>
       </div>
@@ -251,26 +241,24 @@ exports[`renders ./components/card/demo/in-column.md correctly 1`] = `
       <div
         class="ant-card"
       >
-        <div>
+        <div
+          class="ant-card-head"
+        >
           <div
-            class="ant-card-head"
+            class="ant-card-head-wrapper"
           >
             <div
-              class="ant-card-head-wrapper"
+              class="ant-card-head-title"
             >
-              <div
-                class="ant-card-head-title"
-              >
-                Card title
-              </div>
+              Card title
             </div>
           </div>
-          <div
-            class="ant-card-body"
-          >
-            <div>
-              Card content
-            </div>
+        </div>
+        <div
+          class="ant-card-body"
+        >
+          <div>
+            Card content
           </div>
         </div>
       </div>
@@ -282,26 +270,24 @@ exports[`renders ./components/card/demo/in-column.md correctly 1`] = `
       <div
         class="ant-card"
       >
-        <div>
+        <div
+          class="ant-card-head"
+        >
           <div
-            class="ant-card-head"
+            class="ant-card-head-wrapper"
           >
             <div
-              class="ant-card-head-wrapper"
+              class="ant-card-head-title"
             >
-              <div
-                class="ant-card-head-title"
-              >
-                Card title
-              </div>
+              Card title
             </div>
           </div>
-          <div
-            class="ant-card-body"
-          >
-            <div>
-              Card content
-            </div>
+        </div>
+        <div
+          class="ant-card-body"
+        >
+          <div>
+            Card content
           </div>
         </div>
       </div>
@@ -314,100 +300,94 @@ exports[`renders ./components/card/demo/inner.md correctly 1`] = `
 <div
   class="ant-card ant-card-bordered"
 >
-  <div>
+  <div
+    class="ant-card-head"
+  >
     <div
-      class="ant-card-head"
+      class="ant-card-head-wrapper"
     >
       <div
-        class="ant-card-head-wrapper"
+        class="ant-card-head-title"
       >
-        <div
-          class="ant-card-head-title"
-        >
-          Card title
-        </div>
+        Card title
       </div>
     </div>
-    <div
-      class="ant-card-body"
-    >
-      <div>
-        <p
-          style="font-size:14px;color:rgba(0, 0, 0, 0.85);margin-bottom:16px;font-weight:500"
-        >
-          Group title
-        </p>
+  </div>
+  <div
+    class="ant-card-body"
+  >
+    <div>
+      <p
+        style="font-size:14px;color:rgba(0, 0, 0, 0.85);margin-bottom:16px;font-weight:500"
+      >
+        Group title
+      </p>
+      <div
+        class="ant-card ant-card-bordered ant-card-type-inner"
+      >
         <div
-          class="ant-card ant-card-bordered ant-card-type-inner"
+          class="ant-card-head"
         >
-          <div>
+          <div
+            class="ant-card-head-wrapper"
+          >
             <div
-              class="ant-card-head"
+              class="ant-card-head-title"
             >
-              <div
-                class="ant-card-head-wrapper"
-              >
-                <div
-                  class="ant-card-head-title"
-                >
-                  Inner Card title
-                </div>
-                <div
-                  class="ant-card-extra"
-                >
-                  <a
-                    href="#"
-                  >
-                    More
-                  </a>
-                </div>
-              </div>
+              Inner Card title
             </div>
             <div
-              class="ant-card-body"
+              class="ant-card-extra"
             >
-              <div>
-                Inner Card content
-              </div>
+              <a
+                href="#"
+              >
+                More
+              </a>
             </div>
           </div>
         </div>
         <div
-          class="ant-card ant-card-bordered ant-card-type-inner"
-          style="margin-top:16px"
+          class="ant-card-body"
         >
           <div>
+            Inner Card content
+          </div>
+        </div>
+      </div>
+      <div
+        class="ant-card ant-card-bordered ant-card-type-inner"
+        style="margin-top:16px"
+      >
+        <div
+          class="ant-card-head"
+        >
+          <div
+            class="ant-card-head-wrapper"
+          >
             <div
-              class="ant-card-head"
+              class="ant-card-head-title"
             >
-              <div
-                class="ant-card-head-wrapper"
+              Inner Card title
+            </div>
+            <div
+              class="ant-card-extra"
+            >
+              <a
+                href="#"
               >
-                <div
-                  class="ant-card-head-title"
-                >
-                  Inner Card title
-                </div>
-                <div
-                  class="ant-card-extra"
-                >
-                  <a
-                    href="#"
-                  >
-                    More
-                  </a>
-                </div>
-              </div>
-            </div>
-            <div
-              class="ant-card-body"
-            >
-              <div>
-                Inner Card content
-              </div>
+                More
+              </a>
             </div>
           </div>
         </div>
+        <div
+          class="ant-card-body"
+        >
+          <div>
+            Inner Card content
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -419,75 +399,73 @@ exports[`renders ./components/card/demo/loading.md correctly 1`] = `
   class="ant-card ant-card-loading ant-card-bordered"
   style="width:34%"
 >
-  <div>
+  <div
+    class="ant-card-head"
+  >
     <div
-      class="ant-card-head"
+      class="ant-card-head-wrapper"
     >
       <div
-        class="ant-card-head-wrapper"
+        class="ant-card-head-title"
       >
-        <div
-          class="ant-card-head-title"
-        >
-          Card title
-        </div>
+        Card title
       </div>
     </div>
+  </div>
+  <div
+    class="ant-card-body"
+  >
     <div
-      class="ant-card-body"
+      class="ant-card-loading-content"
     >
-      <div
-        class="ant-card-loading-content"
-      >
-        <p
+      <p
+        class="ant-card-loading-block"
+        style="width:94%"
+      />
+      <p>
+        <span
           class="ant-card-loading-block"
-          style="width:94%"
+          style="width:28%"
         />
-        <p>
-          <span
-            class="ant-card-loading-block"
-            style="width:28%"
-          />
-          <span
-            class="ant-card-loading-block"
-            style="width:62%"
-          />
-        </p>
-        <p>
-          <span
-            class="ant-card-loading-block"
-            style="width:22%"
-          />
-          <span
-            class="ant-card-loading-block"
-            style="width:66%"
-          />
-        </p>
-        <p>
-          <span
-            class="ant-card-loading-block"
-            style="width:56%"
-          />
-          <span
-            class="ant-card-loading-block"
-            style="width:39%"
-          />
-        </p>
-        <p>
-          <span
-            class="ant-card-loading-block"
-            style="width:21%"
-          />
-          <span
-            class="ant-card-loading-block"
-            style="width:15%"
-          />
-          <span
-            class="ant-card-loading-block"
-            style="width:40%"
-          />
-        </p>
-      </div>
+        <span
+          class="ant-card-loading-block"
+          style="width:62%"
+        />
+      </p>
+      <p>
+        <span
+          class="ant-card-loading-block"
+          style="width:22%"
+        />
+        <span
+          class="ant-card-loading-block"
+          style="width:66%"
+        />
+      </p>
+      <p>
+        <span
+          class="ant-card-loading-block"
+          style="width:56%"
+        />
+        <span
+          class="ant-card-loading-block"
+          style="width:39%"
+        />
+      </p>
+      <p>
+        <span
+          class="ant-card-loading-block"
+          style="width:21%"
+        />
+        <span
+          class="ant-card-loading-block"
+          style="width:15%"
+        />
+        <span
+          class="ant-card-loading-block"
+          style="width:40%"
+        />
+      </p>
     </div>
   </div>
 </div>
@@ -498,49 +476,47 @@ exports[`renders ./components/card/demo/meta.md correctly 1`] = `
   class="ant-card ant-card-bordered"
   style="width:300px"
 >
-  <div>
-    <div
-      class="ant-card-cover"
-    >
-      <img
-        alt="example"
-        src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
-      />
-    </div>
-    <div
-      class="ant-card-body"
-    >
-      <div>
+  <div
+    class="ant-card-cover"
+  >
+    <img
+      alt="example"
+      src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
+    />
+  </div>
+  <div
+    class="ant-card-body"
+  >
+    <div>
+      <div
+        class="ant-card-meta"
+      >
         <div
-          class="ant-card-meta"
+          class="ant-card-meta-content"
         >
           <div
-            class="ant-card-meta-content"
+            class="ant-card-meta-avatar"
+          >
+            <span
+              class="ant-avatar ant-avatar-circle ant-avatar-image"
+            >
+              <img
+                src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
+              />
+            </span>
+          </div>
+          <div
+            class="ant-card-meta-detail"
           >
             <div
-              class="ant-card-meta-avatar"
+              class="ant-card-meta-title"
             >
-              <span
-                class="ant-avatar ant-avatar-circle ant-avatar-image"
-              >
-                <img
-                  src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
-                />
-              </span>
+              Card title
             </div>
             <div
-              class="ant-card-meta-detail"
+              class="ant-card-meta-description"
             >
-              <div
-                class="ant-card-meta-title"
-              >
-                Card title
-              </div>
-              <div
-                class="ant-card-meta-description"
-              >
-                This is the description
-              </div>
+              This is the description
             </div>
           </div>
         </div>
@@ -586,21 +562,19 @@ exports[`renders ./components/card/demo/simple.md correctly 1`] = `
   class="ant-card ant-card-bordered"
   style="width:300px"
 >
-  <div>
-    <div
-      class="ant-card-body"
-    >
-      <div>
-        <p>
-          Card content
-        </p>
-        <p>
-          Card content
-        </p>
-        <p>
-          Card content
-        </p>
-      </div>
+  <div
+    class="ant-card-body"
+  >
+    <div>
+      <p>
+        Card content
+      </p>
+      <p>
+        Card content
+      </p>
+      <p>
+        Card content
+      </p>
     </div>
   </div>
 </div>
@@ -612,113 +586,111 @@ exports[`renders ./components/card/demo/tabs.md correctly 1`] = `
     class="ant-card ant-card-bordered ant-card-contain-tabs"
     style="width:100%"
   >
-    <div>
+    <div
+      class="ant-card-head"
+    >
       <div
-        class="ant-card-head"
+        class="ant-card-head-wrapper"
       >
         <div
-          class="ant-card-head-wrapper"
+          class="ant-card-head-title"
         >
-          <div
-            class="ant-card-head-title"
-          >
-            Card title
-          </div>
-          <div
-            class="ant-card-extra"
-          >
-            <a
-              href="#"
-            >
-              More
-            </a>
-          </div>
+          Card title
         </div>
         <div
-          class="ant-tabs ant-tabs-top ant-card-head-tabs ant-tabs-large ant-tabs-line"
+          class="ant-card-extra"
+        >
+          <a
+            href="#"
+          >
+            More
+          </a>
+        </div>
+      </div>
+      <div
+        class="ant-tabs ant-tabs-top ant-card-head-tabs ant-tabs-large ant-tabs-line"
+      >
+        <div
+          class="ant-tabs-bar"
+          role="tablist"
+          tabindex="0"
         >
           <div
-            class="ant-tabs-bar"
-            role="tablist"
-            tabindex="0"
+            class="ant-tabs-nav-container"
           >
-            <div
-              class="ant-tabs-nav-container"
+            <span
+              class="ant-tabs-tab-prev ant-tabs-tab-btn-disabled"
+              unselectable="unselectable"
             >
               <span
-                class="ant-tabs-tab-prev ant-tabs-tab-btn-disabled"
-                unselectable="unselectable"
-              >
-                <span
-                  class="ant-tabs-tab-prev-icon"
-                />
-              </span>
+                class="ant-tabs-tab-prev-icon"
+              />
+            </span>
+            <span
+              class="ant-tabs-tab-next ant-tabs-tab-btn-disabled"
+              unselectable="unselectable"
+            >
               <span
-                class="ant-tabs-tab-next ant-tabs-tab-btn-disabled"
-                unselectable="unselectable"
-              >
-                <span
-                  class="ant-tabs-tab-next-icon"
-                />
-              </span>
+                class="ant-tabs-tab-next-icon"
+              />
+            </span>
+            <div
+              class="ant-tabs-nav-wrap"
+            >
               <div
-                class="ant-tabs-nav-wrap"
+                class="ant-tabs-nav-scroll"
               >
                 <div
-                  class="ant-tabs-nav-scroll"
+                  class="ant-tabs-nav ant-tabs-nav-animated"
                 >
                   <div
-                    class="ant-tabs-nav ant-tabs-nav-animated"
+                    class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
+                  />
+                  <div
+                    aria-disabled="false"
+                    aria-selected="true"
+                    class="ant-tabs-tab-active ant-tabs-tab"
+                    role="tab"
                   >
-                    <div
-                      class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
-                    />
-                    <div
-                      aria-disabled="false"
-                      aria-selected="true"
-                      class="ant-tabs-tab-active ant-tabs-tab"
-                      role="tab"
-                    >
-                      tab1
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-selected="false"
-                      class=" ant-tabs-tab"
-                      role="tab"
-                    >
-                      tab2
-                    </div>
+                    tab1
+                  </div>
+                  <div
+                    aria-disabled="false"
+                    aria-selected="false"
+                    class=" ant-tabs-tab"
+                    role="tab"
+                  >
+                    tab2
                   </div>
                 </div>
               </div>
             </div>
           </div>
+        </div>
+        <div
+          class="ant-tabs-content ant-tabs-content-animated"
+          style="margin-left:0%"
+        >
           <div
-            class="ant-tabs-content ant-tabs-content-animated"
-            style="margin-left:0%"
-          >
-            <div
-              aria-hidden="false"
-              class="ant-tabs-tabpane ant-tabs-tabpane-active"
-              role="tabpanel"
-            />
-            <div
-              aria-hidden="true"
-              class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-              role="tabpanel"
-            />
-          </div>
+            aria-hidden="false"
+            class="ant-tabs-tabpane ant-tabs-tabpane-active"
+            role="tabpanel"
+          />
+          <div
+            aria-hidden="true"
+            class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
+            role="tabpanel"
+          />
         </div>
       </div>
-      <div
-        class="ant-card-body"
-      >
-        <div>
-          <p>
-            content1
-          </p>
-        </div>
+    </div>
+    <div
+      class="ant-card-body"
+    >
+      <div>
+        <p>
+          content1
+        </p>
       </div>
     </div>
   </div>
@@ -728,111 +700,109 @@ exports[`renders ./components/card/demo/tabs.md correctly 1`] = `
     class="ant-card ant-card-bordered ant-card-contain-tabs"
     style="width:100%"
   >
-    <div>
+    <div
+      class="ant-card-head"
+    >
       <div
-        class="ant-card-head"
+        class="ant-card-head-wrapper"
+      />
+      <div
+        class="ant-tabs ant-tabs-top ant-card-head-tabs ant-tabs-large ant-tabs-line"
       >
         <div
-          class="ant-card-head-wrapper"
-        />
-        <div
-          class="ant-tabs ant-tabs-top ant-card-head-tabs ant-tabs-large ant-tabs-line"
+          class="ant-tabs-bar"
+          role="tablist"
+          tabindex="0"
         >
           <div
-            class="ant-tabs-bar"
-            role="tablist"
-            tabindex="0"
+            class="ant-tabs-nav-container"
           >
-            <div
-              class="ant-tabs-nav-container"
+            <span
+              class="ant-tabs-tab-prev ant-tabs-tab-btn-disabled"
+              unselectable="unselectable"
             >
               <span
-                class="ant-tabs-tab-prev ant-tabs-tab-btn-disabled"
-                unselectable="unselectable"
-              >
-                <span
-                  class="ant-tabs-tab-prev-icon"
-                />
-              </span>
+                class="ant-tabs-tab-prev-icon"
+              />
+            </span>
+            <span
+              class="ant-tabs-tab-next ant-tabs-tab-btn-disabled"
+              unselectable="unselectable"
+            >
               <span
-                class="ant-tabs-tab-next ant-tabs-tab-btn-disabled"
-                unselectable="unselectable"
-              >
-                <span
-                  class="ant-tabs-tab-next-icon"
-                />
-              </span>
+                class="ant-tabs-tab-next-icon"
+              />
+            </span>
+            <div
+              class="ant-tabs-nav-wrap"
+            >
               <div
-                class="ant-tabs-nav-wrap"
+                class="ant-tabs-nav-scroll"
               >
                 <div
-                  class="ant-tabs-nav-scroll"
+                  class="ant-tabs-nav ant-tabs-nav-animated"
                 >
                   <div
-                    class="ant-tabs-nav ant-tabs-nav-animated"
+                    class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
+                  />
+                  <div
+                    aria-disabled="false"
+                    aria-selected="true"
+                    class="ant-tabs-tab-active ant-tabs-tab"
+                    role="tab"
                   >
-                    <div
-                      class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
-                    />
-                    <div
-                      aria-disabled="false"
-                      aria-selected="true"
-                      class="ant-tabs-tab-active ant-tabs-tab"
-                      role="tab"
-                    >
-                      article
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-selected="false"
-                      class=" ant-tabs-tab"
-                      role="tab"
-                    >
-                      app
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-selected="false"
-                      class=" ant-tabs-tab"
-                      role="tab"
-                    >
-                      project
-                    </div>
+                    article
+                  </div>
+                  <div
+                    aria-disabled="false"
+                    aria-selected="false"
+                    class=" ant-tabs-tab"
+                    role="tab"
+                  >
+                    app
+                  </div>
+                  <div
+                    aria-disabled="false"
+                    aria-selected="false"
+                    class=" ant-tabs-tab"
+                    role="tab"
+                  >
+                    project
                   </div>
                 </div>
               </div>
             </div>
           </div>
+        </div>
+        <div
+          class="ant-tabs-content ant-tabs-content-animated"
+          style="margin-left:0%"
+        >
           <div
-            class="ant-tabs-content ant-tabs-content-animated"
-            style="margin-left:0%"
-          >
-            <div
-              aria-hidden="false"
-              class="ant-tabs-tabpane ant-tabs-tabpane-active"
-              role="tabpanel"
-            />
-            <div
-              aria-hidden="true"
-              class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-              role="tabpanel"
-            />
-            <div
-              aria-hidden="true"
-              class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
-              role="tabpanel"
-            />
-          </div>
+            aria-hidden="false"
+            class="ant-tabs-tabpane ant-tabs-tabpane-active"
+            role="tabpanel"
+          />
+          <div
+            aria-hidden="true"
+            class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
+            role="tabpanel"
+          />
+          <div
+            aria-hidden="true"
+            class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
+            role="tabpanel"
+          />
         </div>
       </div>
-      <div
-        class="ant-card-body"
-      >
-        <div>
-          <p>
-            article content
-          </p>
-        </div>
+    </div>
+    <div
+      class="ant-card-body"
+    >
+      <div>
+        <p>
+          article content
+        </p>
       </div>
     </div>
   </div>
diff --git a/components/card/index.tsx b/components/card/index.tsx
index 068dd22133..deb87bafed 100644
--- a/components/card/index.tsx
+++ b/components/card/index.tsx
@@ -183,13 +183,6 @@ export default class Card extends React.Component<CardProps, {}> {
         {loading ? loadingBlock : <div>{children}</div>}
       </div>
     );
-    const mainContent = (
-      <div>
-        {head}
-        {coverDom}
-        {children ? body : null}
-      </div>
-    );
     const actionDom = actions && actions.length ?
       <ul className={`${prefixCls}-actions`}>{this.getAction(actions)}</ul> : null;
     const divProps = omit(others, [
@@ -197,7 +190,9 @@ export default class Card extends React.Component<CardProps, {}> {
     ]);
     return (
       <div {...divProps} className={classString} ref={this.saveRef}>
-        {mainContent}
+        {head}
+        {coverDom}
+        {children ? body : null}
         {actionDom}
       </div>
     );