diff --git a/components/calendar/demo/card.tsx b/components/calendar/demo/card.tsx
index bf9b50af16..b6d89d0719 100644
--- a/components/calendar/demo/card.tsx
+++ b/components/calendar/demo/card.tsx
@@ -1,16 +1,16 @@
-import React from 'react';
-import type { Dayjs } from 'dayjs';
 import { Calendar, theme } from 'antd';
 import type { CalendarMode } from 'antd/es/calendar/generateCalendar';
+import type { Dayjs } from 'dayjs';
+import React from 'react';
+
+const onPanelChange = (value: Dayjs, mode: CalendarMode) => {
+  console.log(value.format('YYYY-MM-DD'), mode);
+};
 
 const App: React.FC = () => {
   const { token } = theme.useToken();
 
-  const onPanelChange = (value: Dayjs, mode: CalendarMode) => {
-    console.log(value.format('YYYY-MM-DD'), mode);
-  };
-
-  const wrapperStyle = {
+  const wrapperStyle: React.CSSProperties = {
     width: 300,
     border: `1px solid ${token.colorBorderSecondary}`,
     borderRadius: token.borderRadiusLG,
diff --git a/components/card/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/card/__tests__/__snapshots__/demo-extend.test.ts.snap
index f88bc3b45d..46d98e27f1 100644
--- a/components/card/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/card/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1,124 +1,131 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders ./components/card/demo/basic.tsx extend context correctly 1`] = `
-Array [
+<div
+  class="ant-space ant-space-vertical"
+>
   <div
-    class="ant-card ant-card-bordered"
-    style="width:300px"
+    class="ant-space-item"
+    style="margin-bottom:16px"
   >
     <div
-      class="ant-card-head"
+      class="ant-card ant-card-bordered"
+      style="width:300px"
     >
       <div
-        class="ant-card-head-wrapper"
+        class="ant-card-head"
       >
         <div
-          class="ant-card-head-title"
+          class="ant-card-head-wrapper"
         >
-          Default size card
-        </div>
-        <div
-          class="ant-card-extra"
-        >
-          <a
-            href="#"
+          <div
+            class="ant-card-head-title"
           >
-            More
-          </a>
+            Default size card
+          </div>
+          <div
+            class="ant-card-extra"
+          >
+            <a
+              href="#"
+            >
+              More
+            </a>
+          </div>
         </div>
       </div>
+      <div
+        class="ant-card-body"
+      >
+        <p>
+          Card content
+        </p>
+        <p>
+          Card content
+        </p>
+        <p>
+          Card content
+        </p>
+      </div>
     </div>
-    <div
-      class="ant-card-body"
-    >
-      <p>
-        Card content
-      </p>
-      <p>
-        Card content
-      </p>
-      <p>
-        Card content
-      </p>
-    </div>
-  </div>,
+  </div>
   <div
-    class="ant-card ant-card-bordered ant-card-small"
-    style="width:300px"
+    class="ant-space-item"
   >
     <div
-      class="ant-card-head"
+      class="ant-card ant-card-bordered ant-card-small"
+      style="width:300px"
     >
       <div
-        class="ant-card-head-wrapper"
+        class="ant-card-head"
       >
         <div
-          class="ant-card-head-title"
+          class="ant-card-head-wrapper"
         >
-          Small size card
-        </div>
-        <div
-          class="ant-card-extra"
-        >
-          <a
-            href="#"
+          <div
+            class="ant-card-head-title"
           >
-            More
-          </a>
+            Small size card
+          </div>
+          <div
+            class="ant-card-extra"
+          >
+            <a
+              href="#"
+            >
+              More
+            </a>
+          </div>
         </div>
       </div>
+      <div
+        class="ant-card-body"
+      >
+        <p>
+          Card content
+        </p>
+        <p>
+          Card content
+        </p>
+        <p>
+          Card content
+        </p>
+      </div>
     </div>
-    <div
-      class="ant-card-body"
-    >
-      <p>
-        Card content
-      </p>
-      <p>
-        Card content
-      </p>
-      <p>
-        Card content
-      </p>
-    </div>
-  </div>,
-]
+  </div>
+</div>
 `;
 
 exports[`renders ./components/card/demo/border-less.tsx extend context correctly 1`] = `
 <div
-  class="site-card-border-less-wrapper"
+  class="ant-card"
+  style="width:300px"
 >
   <div
-    class="ant-card"
-    style="width:300px"
+    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"
-    >
-      <p>
-        Card content
-      </p>
-      <p>
-        Card content
-      </p>
-      <p>
-        Card content
-      </p>
-    </div>
+  </div>
+  <div
+    class="ant-card-body"
+  >
+    <p>
+      Card content
+    </p>
+    <p>
+      Card content
+    </p>
+    <p>
+      Card content
+    </p>
   </div>
 </div>
 `;
@@ -229,92 +236,88 @@ exports[`renders ./components/card/demo/grid-card.tsx extend context correctly 1
 
 exports[`renders ./components/card/demo/in-column.tsx extend context correctly 1`] = `
 <div
-  class="site-card-wrapper"
+  class="ant-row"
+  style="margin-left:-8px;margin-right:-8px"
 >
   <div
-    class="ant-row"
-    style="margin-left:-8px;margin-right:-8px"
+    class="ant-col ant-col-8"
+    style="padding-left:8px;padding-right:8px"
   >
     <div
-      class="ant-col ant-col-8"
-      style="padding-left:8px;padding-right:8px"
+      class="ant-card"
     >
       <div
-        class="ant-card"
+        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"
-        >
-          Card content
-        </div>
       </div>
-    </div>
-    <div
-      class="ant-col ant-col-8"
-      style="padding-left:8px;padding-right:8px"
-    >
       <div
-        class="ant-card"
+        class="ant-card-body"
       >
-        <div
-          class="ant-card-head"
-        >
-          <div
-            class="ant-card-head-wrapper"
-          >
-            <div
-              class="ant-card-head-title"
-            >
-              Card title
-            </div>
-          </div>
-        </div>
-        <div
-          class="ant-card-body"
-        >
-          Card content
-        </div>
+        Card content
       </div>
     </div>
+  </div>
+  <div
+    class="ant-col ant-col-8"
+    style="padding-left:8px;padding-right:8px"
+  >
     <div
-      class="ant-col ant-col-8"
-      style="padding-left:8px;padding-right:8px"
+      class="ant-card"
     >
       <div
-        class="ant-card"
+        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"
+      >
+        Card content
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-col ant-col-8"
+    style="padding-left:8px;padding-right:8px"
+  >
+    <div
+      class="ant-card"
+    >
+      <div
+        class="ant-card-head"
+      >
         <div
-          class="ant-card-body"
+          class="ant-card-head-wrapper"
         >
-          Card content
+          <div
+            class="ant-card-head-title"
+          >
+            Card title
+          </div>
         </div>
       </div>
+      <div
+        class="ant-card-body"
+      >
+        Card content
+      </div>
     </div>
   </div>
 </div>
diff --git a/components/card/__tests__/__snapshots__/demo.test.ts.snap b/components/card/__tests__/__snapshots__/demo.test.ts.snap
index d7602ec804..59137e86f0 100644
--- a/components/card/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/card/__tests__/__snapshots__/demo.test.ts.snap
@@ -1,124 +1,131 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders ./components/card/demo/basic.tsx correctly 1`] = `
-Array [
+<div
+  class="ant-space ant-space-vertical"
+>
   <div
-    class="ant-card ant-card-bordered"
-    style="width:300px"
+    class="ant-space-item"
+    style="margin-bottom:16px"
   >
     <div
-      class="ant-card-head"
+      class="ant-card ant-card-bordered"
+      style="width:300px"
     >
       <div
-        class="ant-card-head-wrapper"
+        class="ant-card-head"
       >
         <div
-          class="ant-card-head-title"
+          class="ant-card-head-wrapper"
         >
-          Default size card
-        </div>
-        <div
-          class="ant-card-extra"
-        >
-          <a
-            href="#"
+          <div
+            class="ant-card-head-title"
           >
-            More
-          </a>
+            Default size card
+          </div>
+          <div
+            class="ant-card-extra"
+          >
+            <a
+              href="#"
+            >
+              More
+            </a>
+          </div>
         </div>
       </div>
+      <div
+        class="ant-card-body"
+      >
+        <p>
+          Card content
+        </p>
+        <p>
+          Card content
+        </p>
+        <p>
+          Card content
+        </p>
+      </div>
     </div>
-    <div
-      class="ant-card-body"
-    >
-      <p>
-        Card content
-      </p>
-      <p>
-        Card content
-      </p>
-      <p>
-        Card content
-      </p>
-    </div>
-  </div>,
+  </div>
   <div
-    class="ant-card ant-card-bordered ant-card-small"
-    style="width:300px"
+    class="ant-space-item"
   >
     <div
-      class="ant-card-head"
+      class="ant-card ant-card-bordered ant-card-small"
+      style="width:300px"
     >
       <div
-        class="ant-card-head-wrapper"
+        class="ant-card-head"
       >
         <div
-          class="ant-card-head-title"
+          class="ant-card-head-wrapper"
         >
-          Small size card
-        </div>
-        <div
-          class="ant-card-extra"
-        >
-          <a
-            href="#"
+          <div
+            class="ant-card-head-title"
           >
-            More
-          </a>
+            Small size card
+          </div>
+          <div
+            class="ant-card-extra"
+          >
+            <a
+              href="#"
+            >
+              More
+            </a>
+          </div>
         </div>
       </div>
+      <div
+        class="ant-card-body"
+      >
+        <p>
+          Card content
+        </p>
+        <p>
+          Card content
+        </p>
+        <p>
+          Card content
+        </p>
+      </div>
     </div>
-    <div
-      class="ant-card-body"
-    >
-      <p>
-        Card content
-      </p>
-      <p>
-        Card content
-      </p>
-      <p>
-        Card content
-      </p>
-    </div>
-  </div>,
-]
+  </div>
+</div>
 `;
 
 exports[`renders ./components/card/demo/border-less.tsx correctly 1`] = `
 <div
-  class="site-card-border-less-wrapper"
+  class="ant-card"
+  style="width:300px"
 >
   <div
-    class="ant-card"
-    style="width:300px"
+    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"
-    >
-      <p>
-        Card content
-      </p>
-      <p>
-        Card content
-      </p>
-      <p>
-        Card content
-      </p>
-    </div>
+  </div>
+  <div
+    class="ant-card-body"
+  >
+    <p>
+      Card content
+    </p>
+    <p>
+      Card content
+    </p>
+    <p>
+      Card content
+    </p>
   </div>
 </div>
 `;
@@ -229,92 +236,88 @@ exports[`renders ./components/card/demo/grid-card.tsx correctly 1`] = `
 
 exports[`renders ./components/card/demo/in-column.tsx correctly 1`] = `
 <div
-  class="site-card-wrapper"
+  class="ant-row"
+  style="margin-left:-8px;margin-right:-8px"
 >
   <div
-    class="ant-row"
-    style="margin-left:-8px;margin-right:-8px"
+    class="ant-col ant-col-8"
+    style="padding-left:8px;padding-right:8px"
   >
     <div
-      class="ant-col ant-col-8"
-      style="padding-left:8px;padding-right:8px"
+      class="ant-card"
     >
       <div
-        class="ant-card"
+        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"
-        >
-          Card content
-        </div>
       </div>
-    </div>
-    <div
-      class="ant-col ant-col-8"
-      style="padding-left:8px;padding-right:8px"
-    >
       <div
-        class="ant-card"
+        class="ant-card-body"
       >
-        <div
-          class="ant-card-head"
-        >
-          <div
-            class="ant-card-head-wrapper"
-          >
-            <div
-              class="ant-card-head-title"
-            >
-              Card title
-            </div>
-          </div>
-        </div>
-        <div
-          class="ant-card-body"
-        >
-          Card content
-        </div>
+        Card content
       </div>
     </div>
+  </div>
+  <div
+    class="ant-col ant-col-8"
+    style="padding-left:8px;padding-right:8px"
+  >
     <div
-      class="ant-col ant-col-8"
-      style="padding-left:8px;padding-right:8px"
+      class="ant-card"
     >
       <div
-        class="ant-card"
+        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"
+      >
+        Card content
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-col ant-col-8"
+    style="padding-left:8px;padding-right:8px"
+  >
+    <div
+      class="ant-card"
+    >
+      <div
+        class="ant-card-head"
+      >
         <div
-          class="ant-card-body"
+          class="ant-card-head-wrapper"
         >
-          Card content
+          <div
+            class="ant-card-head-title"
+          >
+            Card title
+          </div>
         </div>
       </div>
+      <div
+        class="ant-card-body"
+      >
+        Card content
+      </div>
     </div>
   </div>
 </div>
diff --git a/components/card/demo/basic.tsx b/components/card/demo/basic.tsx
index 87a6b43c83..7475d4c054 100644
--- a/components/card/demo/basic.tsx
+++ b/components/card/demo/basic.tsx
@@ -1,8 +1,8 @@
+import { Card, Space } from 'antd';
 import React from 'react';
-import { Card } from 'antd';
 
 const App: React.FC = () => (
-  <>
+  <Space direction="vertical" size={16}>
     <Card title="Default size card" extra={<a href="#">More</a>} style={{ width: 300 }}>
       <p>Card content</p>
       <p>Card content</p>
@@ -13,7 +13,7 @@ const App: React.FC = () => (
       <p>Card content</p>
       <p>Card content</p>
     </Card>
-  </>
+  </Space>
 );
 
 export default App;
diff --git a/components/card/demo/border-less.tsx b/components/card/demo/border-less.tsx
index f4d33fb8c2..6fc3bf87e6 100644
--- a/components/card/demo/border-less.tsx
+++ b/components/card/demo/border-less.tsx
@@ -1,14 +1,12 @@
-import React from 'react';
 import { Card } from 'antd';
+import React from 'react';
 
 const App: React.FC = () => (
-  <div className="site-card-border-less-wrapper">
-    <Card title="Card title" bordered={false} style={{ width: 300 }}>
-      <p>Card content</p>
-      <p>Card content</p>
-      <p>Card content</p>
-    </Card>
-  </div>
+  <Card title="Card title" bordered={false} style={{ width: 300 }}>
+    <p>Card content</p>
+    <p>Card content</p>
+    <p>Card content</p>
+  </Card>
 );
 
 export default App;
diff --git a/components/card/demo/in-column.tsx b/components/card/demo/in-column.tsx
index 7e5ab63d76..b467466d9e 100644
--- a/components/card/demo/in-column.tsx
+++ b/components/card/demo/in-column.tsx
@@ -1,26 +1,24 @@
-import React from 'react';
 import { Card, Col, Row } from 'antd';
+import React from 'react';
 
 const App: React.FC = () => (
-  <div className="site-card-wrapper">
-    <Row gutter={16}>
-      <Col span={8}>
-        <Card title="Card title" bordered={false}>
-          Card content
-        </Card>
-      </Col>
-      <Col span={8}>
-        <Card title="Card title" bordered={false}>
-          Card content
-        </Card>
-      </Col>
-      <Col span={8}>
-        <Card title="Card title" bordered={false}>
-          Card content
-        </Card>
-      </Col>
-    </Row>
-  </div>
+  <Row gutter={16}>
+    <Col span={8}>
+      <Card title="Card title" bordered={false}>
+        Card content
+      </Card>
+    </Col>
+    <Col span={8}>
+      <Card title="Card title" bordered={false}>
+        Card content
+      </Card>
+    </Col>
+    <Col span={8}>
+      <Card title="Card title" bordered={false}>
+        Card content
+      </Card>
+    </Col>
+  </Row>
 );
 
 export default App;
diff --git a/components/card/demo/tabs.tsx b/components/card/demo/tabs.tsx
index a2f23fee03..26d643fc6c 100644
--- a/components/card/demo/tabs.tsx
+++ b/components/card/demo/tabs.tsx
@@ -1,5 +1,5 @@
-import React, { useState } from 'react';
 import { Card } from 'antd';
+import React, { useState } from 'react';
 
 const tabList = [
   {
@@ -57,9 +57,7 @@ const App: React.FC = () => {
         extra={<a href="#">More</a>}
         tabList={tabList}
         activeTabKey={activeTabKey1}
-        onTabChange={(key) => {
-          onTab1Change(key);
-        }}
+        onTabChange={onTab1Change}
       >
         {contentList[activeTabKey1]}
       </Card>
@@ -70,9 +68,7 @@ const App: React.FC = () => {
         tabList={tabListNoTitle}
         activeTabKey={activeTabKey2}
         tabBarExtraContent={<a href="#">More</a>}
-        onTabChange={(key) => {
-          onTab2Change(key);
-        }}
+        onTabChange={onTab2Change}
       >
         {contentListNoTitle[activeTabKey2]}
       </Card>