From 149cedd26285060f04334d98412299bc0f615353 Mon Sep 17 00:00:00 2001
From: Zev Zhu <45655660+aibayanyu20@users.noreply.github.com>
Date: Thu, 11 May 2023 23:29:19 +0800
Subject: [PATCH] test(alert): update demo with space (#6541)

* docs(alert): update demo with space

* docs(alert): update alert test snap

---------

Co-authored-by: zhuzhengjian <zhuzhengjian@hoteamsoft.com>
---
 .../__tests__/__snapshots__/demo.test.js.snap | 492 +++++++++++-------
 components/alert/demo/banner.vue              |  21 +-
 components/alert/demo/closable.vue            |  28 +-
 components/alert/demo/custom-icon.vue         |  96 ++--
 components/alert/demo/description.vue         |  50 +-
 components/alert/demo/icon.vue                |  58 ++-
 components/alert/demo/style.vue               |  10 +-
 7 files changed, 433 insertions(+), 322 deletions(-)

diff --git a/components/alert/__tests__/__snapshots__/demo.test.js.snap b/components/alert/__tests__/__snapshots__/demo.test.js.snap
index 84dace45d..545d66dbd 100644
--- a/components/alert/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/alert/__tests__/__snapshots__/demo.test.js.snap
@@ -71,39 +71,50 @@ exports[`renders ./components/alert/demo/action.vue correctly 1`] = `
 `;
 
 exports[`renders ./components/alert/demo/banner.vue correctly 1`] = `
-<div role="alert" class="ant-alert ant-alert-warning ant-alert-banner" data-show="true"><span role="img" aria-label="exclamation-circle" class="anticon anticon-exclamation-circle ant-alert-icon"><svg focusable="false" class="" data-icon="exclamation-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"></path></svg></span>
-  <div class="ant-alert-content">
-    <div class="ant-alert-message">Warning text</div>
-    <!---->
+<div style="width: 100%;" class="ant-space ant-space-vertical">
+  <div class="ant-space-item" style="margin-bottom: 8px;">
+    <div role="alert" class="ant-alert ant-alert-warning ant-alert-banner" data-show="true"><span role="img" aria-label="exclamation-circle" class="anticon anticon-exclamation-circle ant-alert-icon"><svg focusable="false" class="" data-icon="exclamation-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"></path></svg></span>
+      <div class="ant-alert-content">
+        <div class="ant-alert-message">Warning text</div>
+        <!---->
+      </div>
+      <!---->
+      <!---->
+    </div>
   </div>
   <!---->
-  <!---->
-</div>
-<br>
-<div role="alert" class="ant-alert ant-alert-warning ant-alert-banner ant-alert-closable" data-show="true"><span role="img" aria-label="exclamation-circle" class="anticon anticon-exclamation-circle ant-alert-icon"><svg focusable="false" class="" data-icon="exclamation-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"></path></svg></span>
-  <div class="ant-alert-content">
-    <div class="ant-alert-message">Very long warning text warning text text text text text text text</div>
-    <!---->
-  </div>
-  <!----><button type="button" class="ant-alert-close-icon" tabindex="0"><span role="img" aria-label="close" class="anticon anticon-close"><svg focusable="false" class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></button>
-</div>
-<br>
-<div role="alert" class="ant-alert ant-alert-warning ant-alert-no-icon ant-alert-banner" data-show="true">
-  <!---->
-  <div class="ant-alert-content">
-    <div class="ant-alert-message">Warning text without icon</div>
-    <!---->
+  <div class="ant-space-item" style="margin-bottom: 8px;">
+    <div role="alert" class="ant-alert ant-alert-warning ant-alert-banner ant-alert-closable" data-show="true"><span role="img" aria-label="exclamation-circle" class="anticon anticon-exclamation-circle ant-alert-icon"><svg focusable="false" class="" data-icon="exclamation-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"></path></svg></span>
+      <div class="ant-alert-content">
+        <div class="ant-alert-message">Very long warning text warning text text text text text text text</div>
+        <!---->
+      </div>
+      <!----><button type="button" class="ant-alert-close-icon" tabindex="0"><span role="img" aria-label="close" class="anticon anticon-close"><svg focusable="false" class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></button>
+    </div>
   </div>
   <!---->
-  <!---->
-</div>
-<br>
-<div role="alert" class="ant-alert ant-alert-error ant-alert-banner" data-show="true"><span role="img" aria-label="close-circle" class="anticon anticon-close-circle ant-alert-icon"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span>
-  <div class="ant-alert-content">
-    <div class="ant-alert-message">Error text</div>
-    <!---->
+  <div class="ant-space-item" style="margin-bottom: 8px;">
+    <div role="alert" class="ant-alert ant-alert-warning ant-alert-no-icon ant-alert-banner" data-show="true">
+      <!---->
+      <div class="ant-alert-content">
+        <div class="ant-alert-message">Warning text without icon</div>
+        <!---->
+      </div>
+      <!---->
+      <!---->
+    </div>
   </div>
   <!---->
+  <div class="ant-space-item">
+    <div role="alert" class="ant-alert ant-alert-error ant-alert-banner" data-show="true"><span role="img" aria-label="close-circle" class="anticon anticon-close-circle ant-alert-icon"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span>
+      <div class="ant-alert-content">
+        <div class="ant-alert-message">Error text</div>
+        <!---->
+      </div>
+      <!---->
+      <!---->
+    </div>
+  </div>
   <!---->
 </div>
 `;
@@ -121,21 +132,29 @@ exports[`renders ./components/alert/demo/basic.vue correctly 1`] = `
 `;
 
 exports[`renders ./components/alert/demo/closable.vue correctly 1`] = `
-<div role="alert" class="ant-alert ant-alert-warning ant-alert-no-icon ant-alert-closable" data-show="true">
-  <!---->
-  <div class="ant-alert-content">
-    <div class="ant-alert-message">Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text</div>
-    <!---->
+<div style="width: 100%;" class="ant-space ant-space-vertical">
+  <div class="ant-space-item" style="margin-bottom: 8px;">
+    <div role="alert" class="ant-alert ant-alert-warning ant-alert-no-icon ant-alert-closable" data-show="true">
+      <!---->
+      <div class="ant-alert-content">
+        <div class="ant-alert-message">Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text</div>
+        <!---->
+      </div>
+      <!----><button type="button" class="ant-alert-close-icon" tabindex="0"><span role="img" aria-label="close" class="anticon anticon-close"><svg focusable="false" class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></button>
+    </div>
   </div>
-  <!----><button type="button" class="ant-alert-close-icon" tabindex="0"><span role="img" aria-label="close" class="anticon anticon-close"><svg focusable="false" class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></button>
-</div>
-<div role="alert" class="ant-alert ant-alert-error ant-alert-with-description ant-alert-no-icon ant-alert-closable" data-show="true">
   <!---->
-  <div class="ant-alert-content">
-    <div class="ant-alert-message">Error Text</div>
-    <div class="ant-alert-description">Error Description Error Description Error Description Error Description Error Description Error Description</div>
+  <div class="ant-space-item">
+    <div role="alert" class="ant-alert ant-alert-error ant-alert-with-description ant-alert-no-icon ant-alert-closable" data-show="true">
+      <!---->
+      <div class="ant-alert-content">
+        <div class="ant-alert-message">Error Text</div>
+        <div class="ant-alert-description">Error Description Error Description Error Description Error Description Error Description Error Description</div>
+      </div>
+      <!----><button type="button" class="ant-alert-close-icon" tabindex="0"><span role="img" aria-label="close" class="anticon anticon-close"><svg focusable="false" class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></button>
+    </div>
   </div>
-  <!----><button type="button" class="ant-alert-close-icon" tabindex="0"><span role="img" aria-label="close" class="anticon anticon-close"><svg focusable="false" class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></button>
+  <!---->
 </div>
 `;
 
@@ -151,186 +170,255 @@ exports[`renders ./components/alert/demo/close-text.vue correctly 1`] = `
 `;
 
 exports[`renders ./components/alert/demo/custom-icon.vue correctly 1`] = `
-<div role="alert" class="ant-alert ant-alert-success ant-alert-no-icon" data-show="true">
-  <!---->
-  <div class="ant-alert-content">
-    <div class="ant-alert-message">showIcon = false</div>
-    <!---->
+<div style="width: 100%;" class="ant-space ant-space-vertical">
+  <div class="ant-space-item" style="margin-bottom: 8px;">
+    <div role="alert" class="ant-alert ant-alert-success ant-alert-no-icon" data-show="true">
+      <!---->
+      <div class="ant-alert-content">
+        <div class="ant-alert-message">showIcon = false</div>
+        <!---->
+      </div>
+      <!---->
+      <!---->
+    </div>
   </div>
   <!---->
-  <!---->
-</div>
-<div role="alert" class="ant-alert ant-alert-success" data-show="true"><span role="img" aria-label="smile" class="anticon anticon-smile ant-alert-icon"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span>
-  <div class="ant-alert-content">
-    <div class="ant-alert-message">Success Tips</div>
-    <!---->
+  <div class="ant-space-item" style="margin-bottom: 8px;">
+    <div role="alert" class="ant-alert ant-alert-success" data-show="true"><span role="img" aria-label="smile" class="anticon anticon-smile ant-alert-icon"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span>
+      <div class="ant-alert-content">
+        <div class="ant-alert-message">Success Tips</div>
+        <!---->
+      </div>
+      <!---->
+      <!---->
+    </div>
   </div>
   <!---->
-  <!---->
-</div>
-<div role="alert" class="ant-alert ant-alert-info" data-show="true"><span role="img" aria-label="smile" class="anticon anticon-smile ant-alert-icon"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span>
-  <div class="ant-alert-content">
-    <div class="ant-alert-message">Informational Notes</div>
-    <!---->
+  <div class="ant-space-item" style="margin-bottom: 8px;">
+    <div role="alert" class="ant-alert ant-alert-info" data-show="true"><span role="img" aria-label="smile" class="anticon anticon-smile ant-alert-icon"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span>
+      <div class="ant-alert-content">
+        <div class="ant-alert-message">Informational Notes</div>
+        <!---->
+      </div>
+      <!---->
+      <!---->
+    </div>
   </div>
   <!---->
-  <!---->
-</div>
-<div role="alert" class="ant-alert ant-alert-warning" data-show="true"><span role="img" aria-label="smile" class="anticon anticon-smile ant-alert-icon"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span>
-  <div class="ant-alert-content">
-    <div class="ant-alert-message">Warning</div>
-    <!---->
+  <div class="ant-space-item" style="margin-bottom: 8px;">
+    <div role="alert" class="ant-alert ant-alert-warning" data-show="true"><span role="img" aria-label="smile" class="anticon anticon-smile ant-alert-icon"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span>
+      <div class="ant-alert-content">
+        <div class="ant-alert-message">Warning</div>
+        <!---->
+      </div>
+      <!---->
+      <!---->
+    </div>
   </div>
   <!---->
-  <!---->
-</div>
-<div role="alert" class="ant-alert ant-alert-error" data-show="true"><span role="img" aria-label="smile" class="anticon anticon-smile ant-alert-icon"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span>
-  <div class="ant-alert-content">
-    <div class="ant-alert-message">Error</div>
-    <!---->
+  <div class="ant-space-item" style="margin-bottom: 8px;">
+    <div role="alert" class="ant-alert ant-alert-error" data-show="true"><span role="img" aria-label="smile" class="anticon anticon-smile ant-alert-icon"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span>
+      <div class="ant-alert-content">
+        <div class="ant-alert-message">Error</div>
+        <!---->
+      </div>
+      <!---->
+      <!---->
+    </div>
   </div>
   <!---->
-  <!---->
-</div>
-<div role="alert" class="ant-alert ant-alert-success ant-alert-with-description" data-show="true"><span role="img" aria-label="smile" class="anticon anticon-smile ant-alert-icon"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span>
-  <div class="ant-alert-content">
-    <div class="ant-alert-message">Success Tips</div>
-    <div class="ant-alert-description">Detailed description and advices about successful copywriting.</div>
+  <div class="ant-space-item" style="margin-bottom: 8px;">
+    <div role="alert" class="ant-alert ant-alert-success ant-alert-with-description" data-show="true"><span role="img" aria-label="smile" class="anticon anticon-smile ant-alert-icon"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span>
+      <div class="ant-alert-content">
+        <div class="ant-alert-message">Success Tips</div>
+        <div class="ant-alert-description">Detailed description and advices about successful copywriting.</div>
+      </div>
+      <!---->
+      <!---->
+    </div>
   </div>
   <!---->
-  <!---->
-</div>
-<div role="alert" class="ant-alert ant-alert-info ant-alert-with-description" data-show="true"><span role="img" aria-label="smile" class="anticon anticon-smile ant-alert-icon"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span>
-  <div class="ant-alert-content">
-    <div class="ant-alert-message">Informational Notes</div>
-    <div class="ant-alert-description">Additional description and informations about copywriting.</div>
+  <div class="ant-space-item" style="margin-bottom: 8px;">
+    <div role="alert" class="ant-alert ant-alert-info ant-alert-with-description" data-show="true"><span role="img" aria-label="smile" class="anticon anticon-smile ant-alert-icon"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span>
+      <div class="ant-alert-content">
+        <div class="ant-alert-message">Informational Notes</div>
+        <div class="ant-alert-description">Additional description and informations about copywriting.</div>
+      </div>
+      <!---->
+      <!---->
+    </div>
   </div>
   <!---->
-  <!---->
-</div>
-<div role="alert" class="ant-alert ant-alert-warning ant-alert-with-description" data-show="true"><span role="img" aria-label="smile" class="anticon anticon-smile ant-alert-icon"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span>
-  <div class="ant-alert-content">
-    <div class="ant-alert-message">Warning</div>
-    <div class="ant-alert-description">This is a warning notice about copywriting.</div>
+  <div class="ant-space-item" style="margin-bottom: 8px;">
+    <div role="alert" class="ant-alert ant-alert-warning ant-alert-with-description" data-show="true"><span role="img" aria-label="smile" class="anticon anticon-smile ant-alert-icon"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span>
+      <div class="ant-alert-content">
+        <div class="ant-alert-message">Warning</div>
+        <div class="ant-alert-description">This is a warning notice about copywriting.</div>
+      </div>
+      <!---->
+      <!---->
+    </div>
   </div>
   <!---->
-  <!---->
-</div>
-<div role="alert" class="ant-alert ant-alert-error ant-alert-with-description" data-show="true"><span role="img" aria-label="smile" class="anticon anticon-smile ant-alert-icon"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span>
-  <div class="ant-alert-content">
-    <div class="ant-alert-message">Error</div>
-    <div class="ant-alert-description">This is an error message about copywriting.</div>
+  <div class="ant-space-item">
+    <div role="alert" class="ant-alert ant-alert-error ant-alert-with-description" data-show="true"><span role="img" aria-label="smile" class="anticon anticon-smile ant-alert-icon"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span>
+      <div class="ant-alert-content">
+        <div class="ant-alert-message">Error</div>
+        <div class="ant-alert-description">This is an error message about copywriting.</div>
+      </div>
+      <!---->
+      <!---->
+    </div>
   </div>
   <!---->
-  <!---->
 </div>
 `;
 
 exports[`renders ./components/alert/demo/description.vue correctly 1`] = `
-<div role="alert" class="ant-alert ant-alert-success ant-alert-with-description ant-alert-no-icon" data-show="true">
-  <!---->
-  <div class="ant-alert-content">
-    <div class="ant-alert-message">Success Text</div>
-    <div class="ant-alert-description">
-      <p> Success Description <span style="color: red;">Success</span> Description Success Description </p>
+<div style="width: 100%;" class="ant-space ant-space-vertical">
+  <div class="ant-space-item" style="margin-bottom: 8px;">
+    <div role="alert" class="ant-alert ant-alert-success ant-alert-with-description ant-alert-no-icon" data-show="true">
+      <!---->
+      <div class="ant-alert-content">
+        <div class="ant-alert-message">Success Text</div>
+        <div class="ant-alert-description">
+          <p> Success Description <span style="color: red;">Success</span> Description Success Description </p>
+        </div>
+      </div>
+      <!---->
+      <!---->
     </div>
   </div>
   <!---->
-  <!---->
-</div>
-<div role="alert" class="ant-alert ant-alert-info ant-alert-with-description ant-alert-no-icon" data-show="true">
-  <!---->
-  <div class="ant-alert-content">
-    <div class="ant-alert-message">Info Text</div>
-    <div class="ant-alert-description">Info Description Info Description Info Description Info Description</div>
+  <div class="ant-space-item" style="margin-bottom: 8px;">
+    <div role="alert" class="ant-alert ant-alert-info ant-alert-with-description ant-alert-no-icon" data-show="true">
+      <!---->
+      <div class="ant-alert-content">
+        <div class="ant-alert-message">Info Text</div>
+        <div class="ant-alert-description">Info Description Info Description Info Description Info Description</div>
+      </div>
+      <!---->
+      <!---->
+    </div>
   </div>
   <!---->
-  <!---->
-</div>
-<div role="alert" class="ant-alert ant-alert-warning ant-alert-with-description ant-alert-no-icon" data-show="true">
-  <!---->
-  <div class="ant-alert-content">
-    <div class="ant-alert-message">Warning Text</div>
-    <div class="ant-alert-description">Warning Description Warning Description Warning Description Warning Description</div>
+  <div class="ant-space-item" style="margin-bottom: 8px;">
+    <div role="alert" class="ant-alert ant-alert-warning ant-alert-with-description ant-alert-no-icon" data-show="true">
+      <!---->
+      <div class="ant-alert-content">
+        <div class="ant-alert-message">Warning Text</div>
+        <div class="ant-alert-description">Warning Description Warning Description Warning Description Warning Description</div>
+      </div>
+      <!---->
+      <!---->
+    </div>
   </div>
   <!---->
-  <!---->
-</div>
-<div role="alert" class="ant-alert ant-alert-error ant-alert-with-description ant-alert-no-icon" data-show="true">
-  <!---->
-  <div class="ant-alert-content">
-    <div class="ant-alert-message">Error Text</div>
-    <div class="ant-alert-description">Error Description Error Description Error Description Error Description</div>
+  <div class="ant-space-item">
+    <div role="alert" class="ant-alert ant-alert-error ant-alert-with-description ant-alert-no-icon" data-show="true">
+      <!---->
+      <div class="ant-alert-content">
+        <div class="ant-alert-message">Error Text</div>
+        <div class="ant-alert-description">Error Description Error Description Error Description Error Description</div>
+      </div>
+      <!---->
+      <!---->
+    </div>
   </div>
   <!---->
-  <!---->
 </div>
 `;
 
 exports[`renders ./components/alert/demo/icon.vue correctly 1`] = `
-<div role="alert" class="ant-alert ant-alert-success" data-show="true"><span role="img" aria-label="check-circle" class="anticon anticon-check-circle ant-alert-icon"><svg focusable="false" class="" data-icon="check-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"></path></svg></span>
-  <div class="ant-alert-content">
-    <div class="ant-alert-message">Success Tips</div>
-    <!---->
+<div style="width: 100%;" class="ant-space ant-space-vertical">
+  <div class="ant-space-item" style="margin-bottom: 8px;">
+    <div role="alert" class="ant-alert ant-alert-success" data-show="true"><span role="img" aria-label="check-circle" class="anticon anticon-check-circle ant-alert-icon"><svg focusable="false" class="" data-icon="check-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"></path></svg></span>
+      <div class="ant-alert-content">
+        <div class="ant-alert-message">Success Tips</div>
+        <!---->
+      </div>
+      <!---->
+      <!---->
+    </div>
   </div>
   <!---->
-  <!---->
-</div>
-<div role="alert" class="ant-alert ant-alert-info" data-show="true"><span role="img" aria-label="info-circle" class="anticon anticon-info-circle ant-alert-icon"><svg focusable="false" class="" data-icon="info-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm32 664c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V456c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272zm-32-344a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"></path></svg></span>
-  <div class="ant-alert-content">
-    <div class="ant-alert-message">Informational Notes</div>
-    <!---->
+  <div class="ant-space-item" style="margin-bottom: 8px;">
+    <div role="alert" class="ant-alert ant-alert-info" data-show="true"><span role="img" aria-label="info-circle" class="anticon anticon-info-circle ant-alert-icon"><svg focusable="false" class="" data-icon="info-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm32 664c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V456c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272zm-32-344a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"></path></svg></span>
+      <div class="ant-alert-content">
+        <div class="ant-alert-message">Informational Notes</div>
+        <!---->
+      </div>
+      <!---->
+      <!---->
+    </div>
   </div>
   <!---->
-  <!---->
-</div>
-<div role="alert" class="ant-alert ant-alert-warning" data-show="true"><span role="img" aria-label="exclamation-circle" class="anticon anticon-exclamation-circle ant-alert-icon"><svg focusable="false" class="" data-icon="exclamation-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"></path></svg></span>
-  <div class="ant-alert-content">
-    <div class="ant-alert-message">Warning</div>
-    <!---->
+  <div class="ant-space-item" style="margin-bottom: 8px;">
+    <div role="alert" class="ant-alert ant-alert-warning" data-show="true"><span role="img" aria-label="exclamation-circle" class="anticon anticon-exclamation-circle ant-alert-icon"><svg focusable="false" class="" data-icon="exclamation-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"></path></svg></span>
+      <div class="ant-alert-content">
+        <div class="ant-alert-message">Warning</div>
+        <!---->
+      </div>
+      <!---->
+      <!---->
+    </div>
   </div>
   <!---->
-  <!---->
-</div>
-<div role="alert" class="ant-alert ant-alert-error" data-show="true"><span role="img" aria-label="close-circle" class="anticon anticon-close-circle ant-alert-icon"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span>
-  <div class="ant-alert-content">
-    <div class="ant-alert-message">Error</div>
-    <!---->
+  <div class="ant-space-item" style="margin-bottom: 8px;">
+    <div role="alert" class="ant-alert ant-alert-error" data-show="true"><span role="img" aria-label="close-circle" class="anticon anticon-close-circle ant-alert-icon"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span>
+      <div class="ant-alert-content">
+        <div class="ant-alert-message">Error</div>
+        <!---->
+      </div>
+      <!---->
+      <!---->
+    </div>
   </div>
   <!---->
-  <!---->
-</div>
-<div role="alert" class="ant-alert ant-alert-success ant-alert-with-description" data-show="true"><span role="img" aria-label="check-circle" class="anticon anticon-check-circle ant-alert-icon"><svg focusable="false" class="" data-icon="check-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M699 353h-46.9c-10.2 0-19.9 4.9-25.9 13.3L469 584.3l-71.2-98.8c-6-8.3-15.6-13.3-25.9-13.3H325c-6.5 0-10.3 7.4-6.5 12.7l124.6 172.8a31.8 31.8 0 0051.7 0l210.6-292c3.9-5.3.1-12.7-6.4-12.7z"></path><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path></svg></span>
-  <div class="ant-alert-content">
-    <div class="ant-alert-message">Success Tips</div>
-    <div class="ant-alert-description">Detailed description and advices about successful copywriting.</div>
+  <div class="ant-space-item" style="margin-bottom: 8px;">
+    <div role="alert" class="ant-alert ant-alert-success ant-alert-with-description" data-show="true"><span role="img" aria-label="check-circle" class="anticon anticon-check-circle ant-alert-icon"><svg focusable="false" class="" data-icon="check-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M699 353h-46.9c-10.2 0-19.9 4.9-25.9 13.3L469 584.3l-71.2-98.8c-6-8.3-15.6-13.3-25.9-13.3H325c-6.5 0-10.3 7.4-6.5 12.7l124.6 172.8a31.8 31.8 0 0051.7 0l210.6-292c3.9-5.3.1-12.7-6.4-12.7z"></path><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path></svg></span>
+      <div class="ant-alert-content">
+        <div class="ant-alert-message">Success Tips</div>
+        <div class="ant-alert-description">Detailed description and advices about successful copywriting.</div>
+      </div>
+      <!---->
+      <!---->
+    </div>
   </div>
   <!---->
-  <!---->
-</div>
-<div role="alert" class="ant-alert ant-alert-info ant-alert-with-description" data-show="true"><span role="img" aria-label="info-circle" class="anticon anticon-info-circle ant-alert-icon"><svg focusable="false" class="" data-icon="info-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"></path></svg></span>
-  <div class="ant-alert-content">
-    <div class="ant-alert-message">Informational Notes</div>
-    <div class="ant-alert-description">Additional description and informations about copywriting.</div>
+  <div class="ant-space-item" style="margin-bottom: 8px;">
+    <div role="alert" class="ant-alert ant-alert-info ant-alert-with-description" data-show="true"><span role="img" aria-label="info-circle" class="anticon anticon-info-circle ant-alert-icon"><svg focusable="false" class="" data-icon="info-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"></path></svg></span>
+      <div class="ant-alert-content">
+        <div class="ant-alert-message">Informational Notes</div>
+        <div class="ant-alert-description">Additional description and informations about copywriting.</div>
+      </div>
+      <!---->
+      <!---->
+    </div>
   </div>
   <!---->
-  <!---->
-</div>
-<div role="alert" class="ant-alert ant-alert-warning ant-alert-with-description" data-show="true"><span role="img" aria-label="exclamation-circle" class="anticon anticon-exclamation-circle ant-alert-icon"><svg focusable="false" class="" data-icon="exclamation-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M464 688a48 48 0 1096 0 48 48 0 10-96 0zm24-112h48c4.4 0 8-3.6 8-8V296c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8z"></path></svg></span>
-  <div class="ant-alert-content">
-    <div class="ant-alert-message">Warning</div>
-    <div class="ant-alert-description">This is a warning notice about copywriting.</div>
+  <div class="ant-space-item" style="margin-bottom: 8px;">
+    <div role="alert" class="ant-alert ant-alert-warning ant-alert-with-description" data-show="true"><span role="img" aria-label="exclamation-circle" class="anticon anticon-exclamation-circle ant-alert-icon"><svg focusable="false" class="" data-icon="exclamation-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M464 688a48 48 0 1096 0 48 48 0 10-96 0zm24-112h48c4.4 0 8-3.6 8-8V296c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8z"></path></svg></span>
+      <div class="ant-alert-content">
+        <div class="ant-alert-message">Warning</div>
+        <div class="ant-alert-description">This is a warning notice about copywriting.</div>
+      </div>
+      <!---->
+      <!---->
+    </div>
   </div>
   <!---->
-  <!---->
-</div>
-<div role="alert" class="ant-alert ant-alert-error ant-alert-with-description" data-show="true"><span role="img" aria-label="close-circle" class="anticon anticon-close-circle ant-alert-icon"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M685.4 354.8c0-4.4-3.6-8-8-8l-66 .3L512 465.6l-99.3-118.4-66.1-.3c-4.4 0-8 3.5-8 8 0 1.9.7 3.7 1.9 5.2l130.1 155L340.5 670a8.32 8.32 0 00-1.9 5.2c0 4.4 3.6 8 8 8l66.1-.3L512 564.4l99.3 118.4 66 .3c4.4 0 8-3.5 8-8 0-1.9-.7-3.7-1.9-5.2L553.5 515l130.1-155c1.2-1.4 1.8-3.3 1.8-5.2z"></path><path d="M512 65C264.6 65 64 265.6 64 513s200.6 448 448 448 448-200.6 448-448S759.4 65 512 65zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path></svg></span>
-  <div class="ant-alert-content">
-    <div class="ant-alert-message">Error</div>
-    <div class="ant-alert-description">This is an error message about copywriting.</div>
+  <div class="ant-space-item">
+    <div role="alert" class="ant-alert ant-alert-error ant-alert-with-description" data-show="true"><span role="img" aria-label="close-circle" class="anticon anticon-close-circle ant-alert-icon"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M685.4 354.8c0-4.4-3.6-8-8-8l-66 .3L512 465.6l-99.3-118.4-66.1-.3c-4.4 0-8 3.5-8 8 0 1.9.7 3.7 1.9 5.2l130.1 155L340.5 670a8.32 8.32 0 00-1.9 5.2c0 4.4 3.6 8 8 8l66.1-.3L512 564.4l99.3 118.4 66 .3c4.4 0 8-3.5 8-8 0-1.9-.7-3.7-1.9-5.2L553.5 515l130.1-155c1.2-1.4 1.8-3.3 1.8-5.2z"></path><path d="M512 65C264.6 65 64 265.6 64 513s200.6 448 448 448 448-200.6 448-448S759.4 65 512 65zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path></svg></span>
+      <div class="ant-alert-content">
+        <div class="ant-alert-message">Error</div>
+        <div class="ant-alert-description">This is an error message about copywriting.</div>
+      </div>
+      <!---->
+      <!---->
+    </div>
   </div>
   <!---->
-  <!---->
 </div>
 `;
 
@@ -346,40 +434,54 @@ exports[`renders ./components/alert/demo/smooth-closed.vue correctly 1`] = `
 `;
 
 exports[`renders ./components/alert/demo/style.vue correctly 1`] = `
-<div role="alert" class="ant-alert ant-alert-success ant-alert-no-icon" data-show="true">
-  <!---->
-  <div class="ant-alert-content">
-    <div class="ant-alert-message">Success Text</div>
-    <!---->
+<div style="width: 100%;" class="ant-space ant-space-vertical">
+  <div class="ant-space-item" style="margin-bottom: 8px;">
+    <div role="alert" class="ant-alert ant-alert-success ant-alert-no-icon" data-show="true">
+      <!---->
+      <div class="ant-alert-content">
+        <div class="ant-alert-message">Success Text</div>
+        <!---->
+      </div>
+      <!---->
+      <!---->
+    </div>
   </div>
   <!---->
-  <!---->
-</div>
-<div role="alert" class="ant-alert ant-alert-info ant-alert-no-icon" data-show="true">
-  <!---->
-  <div class="ant-alert-content">
-    <div class="ant-alert-message">Info Text</div>
-    <!---->
+  <div class="ant-space-item" style="margin-bottom: 8px;">
+    <div role="alert" class="ant-alert ant-alert-info ant-alert-no-icon" data-show="true">
+      <!---->
+      <div class="ant-alert-content">
+        <div class="ant-alert-message">Info Text</div>
+        <!---->
+      </div>
+      <!---->
+      <!---->
+    </div>
   </div>
   <!---->
-  <!---->
-</div>
-<div role="alert" class="ant-alert ant-alert-warning ant-alert-no-icon" data-show="true">
-  <!---->
-  <div class="ant-alert-content">
-    <div class="ant-alert-message">Warning Text</div>
-    <!---->
+  <div class="ant-space-item" style="margin-bottom: 8px;">
+    <div role="alert" class="ant-alert ant-alert-warning ant-alert-no-icon" data-show="true">
+      <!---->
+      <div class="ant-alert-content">
+        <div class="ant-alert-message">Warning Text</div>
+        <!---->
+      </div>
+      <!---->
+      <!---->
+    </div>
   </div>
   <!---->
-  <!---->
-</div>
-<div role="alert" class="ant-alert ant-alert-error ant-alert-no-icon" data-show="true">
-  <!---->
-  <div class="ant-alert-content">
-    <div class="ant-alert-message">Error Text</div>
-    <!---->
+  <div class="ant-space-item">
+    <div role="alert" class="ant-alert ant-alert-error ant-alert-no-icon" data-show="true">
+      <!---->
+      <div class="ant-alert-content">
+        <div class="ant-alert-message">Error Text</div>
+        <!---->
+      </div>
+      <!---->
+      <!---->
+    </div>
   </div>
   <!---->
-  <!---->
 </div>
 `;
diff --git a/components/alert/demo/banner.vue b/components/alert/demo/banner.vue
index 71240270d..cab0cff28 100644
--- a/components/alert/demo/banner.vue
+++ b/components/alert/demo/banner.vue
@@ -17,15 +17,14 @@ Display Alert as a banner at top of page.
 </docs>
 
 <template>
-  <a-alert message="Warning text" banner />
-  <br />
-  <a-alert
-    message="Very long warning text warning text text text text text text text"
-    banner
-    closable
-  />
-  <br />
-  <a-alert :show-icon="false" message="Warning text without icon" banner />
-  <br />
-  <a-alert type="error" message="Error text" banner />
+  <a-space direction="vertical" style="width: 100%">
+    <a-alert message="Warning text" banner />
+    <a-alert
+      message="Very long warning text warning text text text text text text text"
+      banner
+      closable
+    />
+    <a-alert :show-icon="false" message="Warning text without icon" banner />
+    <a-alert type="error" message="Error text" banner />
+  </a-space>
 </template>
diff --git a/components/alert/demo/closable.vue b/components/alert/demo/closable.vue
index e5423e643..c75931f14 100644
--- a/components/alert/demo/closable.vue
+++ b/components/alert/demo/closable.vue
@@ -17,19 +17,21 @@ To show close button.
 </docs>
 
 <template>
-  <a-alert
-    message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"
-    type="warning"
-    closable
-    @close="onClose"
-  />
-  <a-alert
-    message="Error Text"
-    description="Error Description Error Description Error Description Error Description Error Description Error Description"
-    type="error"
-    closable
-    @close="onClose"
-  />
+  <a-space direction="vertical" style="width: 100%">
+    <a-alert
+      message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"
+      type="warning"
+      closable
+      @close="onClose"
+    />
+    <a-alert
+      message="Error Text"
+      description="Error Description Error Description Error Description Error Description Error Description Error Description"
+      type="error"
+      closable
+      @close="onClose"
+    />
+  </a-space>
 </template>
 
 <script lang="ts" setup>
diff --git a/components/alert/demo/custom-icon.vue b/components/alert/demo/custom-icon.vue
index d7a741972..75ba49089 100644
--- a/components/alert/demo/custom-icon.vue
+++ b/components/alert/demo/custom-icon.vue
@@ -17,53 +17,55 @@ Custom Icon make information more clear and more friendly.
 </docs>
 
 <template>
-  <a-alert message="showIcon = false" type="success">
-    <template #icon><smile-outlined /></template>
-  </a-alert>
-  <a-alert message="Success Tips" type="success" show-icon>
-    <template #icon><smile-outlined /></template>
-  </a-alert>
-  <a-alert message="Informational Notes" type="info" show-icon>
-    <template #icon><smile-outlined /></template>
-  </a-alert>
-  <a-alert message="Warning" type="warning" show-icon>
-    <template #icon><smile-outlined /></template>
-  </a-alert>
-  <a-alert message="Error" type="error" show-icon>
-    <template #icon><smile-outlined /></template>
-  </a-alert>
-  <a-alert
-    message="Success Tips"
-    description="Detailed description and advices about successful copywriting."
-    type="success"
-    show-icon
-  >
-    <template #icon><smile-outlined /></template>
-  </a-alert>
-  <a-alert
-    message="Informational Notes"
-    description="Additional description and informations about copywriting."
-    type="info"
-    show-icon
-  >
-    <template #icon><smile-outlined /></template>
-  </a-alert>
-  <a-alert
-    message="Warning"
-    description="This is a warning notice about copywriting."
-    type="warning"
-    show-icon
-  >
-    <template #icon><smile-outlined /></template>
-  </a-alert>
-  <a-alert
-    message="Error"
-    description="This is an error message about copywriting."
-    type="error"
-    show-icon
-  >
-    <template #icon><smile-outlined /></template>
-  </a-alert>
+  <a-space direction="vertical" style="width: 100%">
+    <a-alert message="showIcon = false" type="success">
+      <template #icon><smile-outlined /></template>
+    </a-alert>
+    <a-alert message="Success Tips" type="success" show-icon>
+      <template #icon><smile-outlined /></template>
+    </a-alert>
+    <a-alert message="Informational Notes" type="info" show-icon>
+      <template #icon><smile-outlined /></template>
+    </a-alert>
+    <a-alert message="Warning" type="warning" show-icon>
+      <template #icon><smile-outlined /></template>
+    </a-alert>
+    <a-alert message="Error" type="error" show-icon>
+      <template #icon><smile-outlined /></template>
+    </a-alert>
+    <a-alert
+      message="Success Tips"
+      description="Detailed description and advices about successful copywriting."
+      type="success"
+      show-icon
+    >
+      <template #icon><smile-outlined /></template>
+    </a-alert>
+    <a-alert
+      message="Informational Notes"
+      description="Additional description and informations about copywriting."
+      type="info"
+      show-icon
+    >
+      <template #icon><smile-outlined /></template>
+    </a-alert>
+    <a-alert
+      message="Warning"
+      description="This is a warning notice about copywriting."
+      type="warning"
+      show-icon
+    >
+      <template #icon><smile-outlined /></template>
+    </a-alert>
+    <a-alert
+      message="Error"
+      description="This is an error message about copywriting."
+      type="error"
+      show-icon
+    >
+      <template #icon><smile-outlined /></template>
+    </a-alert>
+  </a-space>
 </template>
 
 <script lang="ts" setup>
diff --git a/components/alert/demo/description.vue b/components/alert/demo/description.vue
index f1e3bdf88..d50c51a99 100644
--- a/components/alert/demo/description.vue
+++ b/components/alert/demo/description.vue
@@ -17,28 +17,30 @@ Additional description for alert message.
 </docs>
 
 <template>
-  <a-alert message="Success Text" type="success">
-    <template #description>
-      <p>
-        Success Description
-        <span style="color: red">Success</span>
-        Description Success Description
-      </p>
-    </template>
-  </a-alert>
-  <a-alert
-    message="Info Text"
-    description="Info Description Info Description Info Description Info Description"
-    type="info"
-  />
-  <a-alert
-    message="Warning Text"
-    description="Warning Description Warning Description Warning Description Warning Description"
-    type="warning"
-  />
-  <a-alert
-    message="Error Text"
-    description="Error Description Error Description Error Description Error Description"
-    type="error"
-  />
+  <a-space direction="vertical" style="width: 100%">
+    <a-alert message="Success Text" type="success">
+      <template #description>
+        <p>
+          Success Description
+          <span style="color: red">Success</span>
+          Description Success Description
+        </p>
+      </template>
+    </a-alert>
+    <a-alert
+      message="Info Text"
+      description="Info Description Info Description Info Description Info Description"
+      type="info"
+    />
+    <a-alert
+      message="Warning Text"
+      description="Warning Description Warning Description Warning Description Warning Description"
+      type="warning"
+    />
+    <a-alert
+      message="Error Text"
+      description="Error Description Error Description Error Description Error Description"
+      type="error"
+    />
+  </a-space>
 </template>
diff --git a/components/alert/demo/icon.vue b/components/alert/demo/icon.vue
index a9a7a4f71..1215fd749 100644
--- a/components/alert/demo/icon.vue
+++ b/components/alert/demo/icon.vue
@@ -17,32 +17,34 @@ Decent icon make information more clear and more friendly.
 </docs>
 
 <template>
-  <a-alert message="Success Tips" type="success" show-icon />
-  <a-alert message="Informational Notes" type="info" show-icon />
-  <a-alert message="Warning" type="warning" show-icon />
-  <a-alert message="Error" type="error" show-icon />
-  <a-alert
-    message="Success Tips"
-    description="Detailed description and advices about successful copywriting."
-    type="success"
-    show-icon
-  />
-  <a-alert
-    message="Informational Notes"
-    description="Additional description and informations about copywriting."
-    type="info"
-    show-icon
-  />
-  <a-alert
-    message="Warning"
-    description="This is a warning notice about copywriting."
-    type="warning"
-    show-icon
-  />
-  <a-alert
-    message="Error"
-    description="This is an error message about copywriting."
-    type="error"
-    show-icon
-  />
+  <a-space direction="vertical" style="width: 100%">
+    <a-alert message="Success Tips" type="success" show-icon />
+    <a-alert message="Informational Notes" type="info" show-icon />
+    <a-alert message="Warning" type="warning" show-icon />
+    <a-alert message="Error" type="error" show-icon />
+    <a-alert
+      message="Success Tips"
+      description="Detailed description and advices about successful copywriting."
+      type="success"
+      show-icon
+    />
+    <a-alert
+      message="Informational Notes"
+      description="Additional description and informations about copywriting."
+      type="info"
+      show-icon
+    />
+    <a-alert
+      message="Warning"
+      description="This is a warning notice about copywriting."
+      type="warning"
+      show-icon
+    />
+    <a-alert
+      message="Error"
+      description="This is an error message about copywriting."
+      type="error"
+      show-icon
+    />
+  </a-space>
 </template>
diff --git a/components/alert/demo/style.vue b/components/alert/demo/style.vue
index bd2008e2f..541aafd52 100644
--- a/components/alert/demo/style.vue
+++ b/components/alert/demo/style.vue
@@ -17,8 +17,10 @@ There are 4 types of Alert: `success`, `info`, `warning`, `error`.
 </docs>
 
 <template>
-  <a-alert message="Success Text" type="success" />
-  <a-alert message="Info Text" type="info" />
-  <a-alert message="Warning Text" type="warning" />
-  <a-alert message="Error Text" type="error" />
+  <a-space direction="vertical" style="width: 100%">
+    <a-alert message="Success Text" type="success" />
+    <a-alert message="Info Text" type="info" />
+    <a-alert message="Warning Text" type="warning" />
+    <a-alert message="Error Text" type="error" />
+  </a-space>
 </template>