diff --git a/packages/admin/src/components/components/card-component.tsx b/packages/admin/src/components/components/card-component.tsx
index 2a71dbbfa..91a750ea4 100644
--- a/packages/admin/src/components/components/card-component.tsx
+++ b/packages/admin/src/components/components/card-component.tsx
@@ -143,6 +143,7 @@ export default class extends WeElement<Props> {
 
     return (
       <code-demo-container>
+        
         <code-demo
           title="简单卡片"
           describe={'只包含内容区域'}
@@ -150,12 +151,71 @@ export default class extends WeElement<Props> {
           style={gridStyle}
         >
           <div slot="demo" class={tw`px-5 py-5`}>
-            <o-card title="Simple Card" hoverable="always">
-              <div slot="cover"></div>
-              <p>Simple Card</p>
-              <p>Card content</p>
-              <p>Card content</p>
-            </o-card>
+            <div style="margin: 2% 5%; height: 200px; width: 300px;">
+              <o-card title="Simple Card" hoverable="always" block="1">
+                  <div slot="cover"></div>
+                  <p>Simple Card</p>
+                  <p>Card content</p>
+                  <p>Card content</p>
+                </o-card>
+            </div>
+          </div>
+        </code-demo>
+
+        <code-demo
+          title="相册卡片"
+          describe="支持封面、头像、标题和描述信息的卡片"
+          code={this.mdD}
+          style={gridStyle}
+        >
+          <div slot="demo" class={tw`flex justify-around px-5 py-5`}>
+            <div style="margin: 20% 5%; height: 200px; width: 300px;">
+              <o-card
+                block="1"
+                title="Action card"
+                id="myActionC"
+                actions={[
+                  { icon: 'add-ic-call-rounded' },
+                  { icon: 'add-comment-rounded' }
+                ]}
+                hoverable="always"
+              >
+                <o-image
+                  slot="cover"
+                  src="https://cdc-old-dcloud-migrate-1258344706.cos.ap-guangzhou.myqcloud.com/data2/material/thumb/1/1190188000/VCG41N1127233809.jpg/thumb"
+                ></o-image>
+                <div style="display: flex; justify-content: space-around; margin: 10px 0px">
+                  <o-avatar
+                    style="margin: auto 0px;"
+                    src="https://wx.gtimg.com/resource/feuploader/202108/fb85c997c6476acd7a1441043fdda775_204x204.png"
+                  ></o-avatar>
+                  <div>
+                    <p style="font-weight: 600; font-size: 1.2em;">Card title</p>
+                    <p>This is the description</p>
+                  </div>
+                </div>
+              </o-card>
+              </div>
+              <div style="margin: 20% 5%; height: 200px; width: 300px;">
+                <o-card block="1" hoverable="true" size="medium">
+                  <o-image
+                    slot="cover"
+                    src="https://cdc-old-dcloud-migrate-1258344706.cos.ap-guangzhou.myqcloud.com/data2/material/thumb/1/1199435000/VCG211199435578.jpg/thumb"
+                  ></o-image>
+                  <p>OMI Card</p>
+                  <p>
+                    <o-link
+                      underline="0"
+                      type="primary"
+                      target="_blank"
+                      href="https://tencent.github.io/omi/"
+                      slot="extra"
+                    >
+                      Welcome to OMI
+                    </o-link>
+                  </p>
+                </o-card>
+              </div>
           </div>
         </code-demo>
 
@@ -166,20 +226,22 @@ export default class extends WeElement<Props> {
           style={gridStyle}
         >
           <div slot="demo" class={tw`px-5 py-5`}>
-            <o-card title="Default size card" hoverable="always">
-              <o-link
-                underline="0"
-                type="primary"
-                target="_blank"
-                href="https://tencent.github.io/omi/"
-                slot="extra"
-              >
-                More
-              </o-link>
-              <p>Card content</p>
-              <p>Card content</p>
-              <p>Card content</p>
-            </o-card>
+            <div style="margin: 2% 5%; height: 200px; width: 300px;">
+              <o-card title="Default size card" hoverable="always" block="1">
+                  <o-link
+                    underline="0"
+                    type="primary"
+                    target="_blank"
+                    href="https://tencent.github.io/omi/"
+                    slot="extra"
+                  >
+                    More
+                  </o-link>
+                  <p>Card content</p>
+                  <p>Card content</p>
+                  <p>Card content</p>
+                </o-card>
+            </div>
           </div>
         </code-demo>
 
@@ -190,7 +252,9 @@ export default class extends WeElement<Props> {
           style={gridStyle}
         >
           <div slot="demo" class={tw`px-5 py-5`}>
+          <div style="margin: 2% 5%; height: 200px; width: 300px;">
             <o-card
+              block="1"
               title="Action card"
               hoverable="always"
               size="medium"
@@ -214,72 +278,25 @@ export default class extends WeElement<Props> {
               <p>Card content</p>
               <p>Card content</p>
             </o-card>
-            <o-card
-              title="DNT's card"
-              id="myActionB"
-              actions={[{ icon: 'add-ic-call-rounded' }]}
-              hoverable="true"
-            >
-              <o-avatar slot="extra">DNT</o-avatar>
-              <p>Tel:</p>
-              <p>Company:</p>
-              <p>...</p>
-            </o-card>
+            </div>
+            <div style="margin: 2% 5%; height: 200px; width: 300px;">
+              <o-card
+                block="1"
+                title="DNT's card"
+                id="myActionB"
+                actions={[{ icon: 'add-ic-call-rounded' }]}
+                hoverable="true"
+              >
+                <o-avatar slot="extra">DNT</o-avatar>
+                <p>Tel:</p>
+                <p>Company:</p>
+                <p>...</p>
+              </o-card>
+            </div>
           </div>
         </code-demo>
 
-        <code-demo
-          title="相册卡片"
-          describe="支持封面、头像、标题和描述信息的卡片"
-          code={this.mdD}
-          style={gridStyle}
-        >
-          <div slot="demo" class={tw`px-5 py-5`}>
-            <o-card
-              title="Action card"
-              size="large"
-              id="myActionC"
-              actions={[
-                { icon: 'add-ic-call-rounded' },
-                { icon: 'add-comment-rounded' }
-              ]}
-              hoverable="true"
-            >
-              <o-image
-                slot="cover"
-                src="https://cdc-old-dcloud-migrate-1258344706.cos.ap-guangzhou.myqcloud.com/data2/material/thumb/1/1190188000/VCG41N1127233809.jpg/thumb"
-              ></o-image>
-              <div style="display: flex; justify-content: space-around; margin: 10px 0px">
-                <o-avatar
-                  style="margin: auto 0px;"
-                  src="https://wx.gtimg.com/resource/feuploader/202108/fb85c997c6476acd7a1441043fdda775_204x204.png"
-                ></o-avatar>
-                <div>
-                  <p style="font-weight: 600; font-size: 1.2em;">Card title</p>
-                  <p>This is the description</p>
-                </div>
-              </div>
-            </o-card>
-            <o-card hoverable="true">
-              <o-image
-                slot="cover"
-                src="https://cdc-old-dcloud-migrate-1258344706.cos.ap-guangzhou.myqcloud.com/data2/material/thumb/1/1199435000/VCG211199435578.jpg/thumb"
-              ></o-image>
-              <p>OMI Card</p>
-              <p>
-                <o-link
-                  underline="0"
-                  type="primary"
-                  target="_blank"
-                  href="https://tencent.github.io/omi/"
-                  slot="extra"
-                >
-                  Welcome to OMI
-                </o-link>
-              </p>
-            </o-card>
-          </div>
-        </code-demo>
+        
       </code-demo-container>
     )
   }