diff --git a/examples/docs/en-US/alert.md b/examples/docs/en-US/alert.md
index 230e29551..7369a72bd 100644
--- a/examples/docs/en-US/alert.md
+++ b/examples/docs/en-US/alert.md
@@ -7,6 +7,15 @@
     }
   }
 </script>
+<style>
+  .demo-box.demo-alert .el-alert {
+    margin: 20px 0 0;
+  }
+
+  .demo-box.demo-alert .el-alert:first-child {
+    margin: 0;
+  }
+</style>
 
 ## Alert
 
diff --git a/examples/docs/en-US/button.md b/examples/docs/en-US/button.md
index e88ee7d39..b6e36794f 100644
--- a/examples/docs/en-US/button.md
+++ b/examples/docs/en-US/button.md
@@ -22,6 +22,51 @@
     }
   }
 </script>
+<style>
+  .demo-box.demo-button {
+    .el-row {
+      margin-bottom: 10px;
+    }
+    .el-button + .el-button {
+      margin-left: 10px;
+    }
+    .el-button-group {
+      margin-bottom: 20px;
+
+      .el-button + .el-button {
+        margin-left: 0;
+      }
+
+      & + .el-button-group {
+        margin-left: 10px;
+      }
+    }
+  }
+
+  .demo-box.demo-button .intro-block {
+    padding: 0;
+  }
+
+  .demo-button .intro-block .block {
+    padding: 30px 24px;
+    overflow: hidden;
+    border-bottom: solid 1px #EFF2F6;
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
+  .demo-button .intro-block .demonstration {
+    font-size: 14px;
+    color: #8492a6;
+    line-height: 44px;
+  }
+
+  .demo-button .intro-block .wrapper {
+    float: right;
+    margin-right: 20px;
+  }
+</style>
 
 ## Button
 
diff --git a/examples/docs/en-US/carousel.md b/examples/docs/en-US/carousel.md
index cfea588dd..a63e75c71 100644
--- a/examples/docs/en-US/carousel.md
+++ b/examples/docs/en-US/carousel.md
@@ -10,6 +10,55 @@
     }
   }
 </script>
+<style>
+  .demo-carousel .block {
+    padding: 30px;
+    text-align: center;
+    border-right: solid 1px #EFF2F6;
+    float: left;
+    width: 50%;
+    box-sizing: border-box;
+    &:last-child {
+      border-right: none;
+    }
+  }
+
+  .demo-carousel .demonstration {
+    display: block;
+    color: #8492a6;
+    font-size: 14px;
+    margin-bottom: 20px;
+  }
+
+  .demo-carousel .el-carousel__container {
+    text-align: center;
+  }
+
+  .demo-carousel .el-carousel__item {
+    h3 {
+      color: #fff;
+      font-size: 18px;
+      line-height: 300px;
+      margin: 0;
+    }
+    &:nth-child(2n) {
+      background-color: #99a9bf;
+    }
+    &:nth-child(2n+1) {
+      background-color: #d3dce6;
+    }
+  }
+
+  .demo-carousel .small h3 {
+    font-size: 14px;
+    line-height: 150px;
+  }
+
+  .demo-carousel .medium h3 {
+    font-size: 14px;
+    line-height: 200px;
+  }
+</style>
 ## Carousel
 
 Loop a series of images or texts in a limited space
@@ -45,11 +94,11 @@ Loop a series of images or texts in a limited space
     line-height: 150px;
     margin: 0;
   }
-  
+
   .el-carousel__item:nth-child(2n) {
     background-color: #99a9bf;
   }
-  
+
   .el-carousel__item:nth-child(2n+1) {
     background-color: #d3dce6;
   }
@@ -79,11 +128,11 @@ Indicators can be displayed outside the carousel
     line-height: 300px;
     margin: 0;
   }
-  
+
   .el-carousel__item:nth-child(2n) {
     background-color: #99a9bf;
   }
-  
+
   .el-carousel__item:nth-child(2n+1) {
     background-color: #d3dce6;
   }
@@ -113,11 +162,11 @@ You can define when arrows are displayed
     line-height: 300px;
     margin: 0;
   }
-  
+
   .el-carousel__item:nth-child(2n) {
     background-color: #99a9bf;
   }
-  
+
   .el-carousel__item:nth-child(2n+1) {
     background-color: #d3dce6;
   }
@@ -147,11 +196,11 @@ When a page is wide enough but has limited height, you can activate card mode fo
     line-height: 200px;
     margin: 0;
   }
-  
+
   .el-carousel__item:nth-child(2n) {
     background-color: #99a9bf;
   }
-  
+
   .el-carousel__item:nth-child(2n+1) {
     background-color: #d3dce6;
   }
diff --git a/examples/docs/en-US/cascader.md b/examples/docs/en-US/cascader.md
index 0b16c6c34..0ccb07199 100644
--- a/examples/docs/en-US/cascader.md
+++ b/examples/docs/en-US/cascader.md
@@ -247,6 +247,37 @@
   };
 </script>
 
+<style>
+  .demo-cascader {
+    .el-cascader {
+      width: 222px;
+    }
+  }
+  .demo-cascader-size {
+    .el-cascader {
+      vertical-align: top;
+      margin-right: 15px;
+    }
+  }
+  .demo-cascader .block {
+    padding: 30px 0;
+    text-align: center;
+    border-right: solid 1px #EFF2F6;
+    float: left;
+    width: 50%;
+    box-sizing: border-box;
+    &:last-child {
+      border-right: none;
+    }
+  }
+  .demo-cascader .demonstration {
+    display: block;
+    color: #8492a6;
+    font-size: 14px;
+    margin-bottom: 20px;
+  }
+</style>
+
 ## Cascader
 
 If the options have a clear hierarchical structure, Cascader can be used to view and select them.
diff --git a/examples/docs/en-US/collapse.md b/examples/docs/en-US/collapse.md
index a4d70cf68..c09bd4912 100644
--- a/examples/docs/en-US/collapse.md
+++ b/examples/docs/en-US/collapse.md
@@ -14,6 +14,16 @@
   }
 </script>
 
+<style>
+  .demo-collapse {
+    .el-collapse-item__header {
+      .header-icon {
+        margin-left: 5px;
+      }
+    }
+  }
+</style>
+
 ## Collapse
 
 Use Collapse to store contents.
diff --git a/examples/docs/en-US/color-picker.md b/examples/docs/en-US/color-picker.md
index 0de276cd2..dd5672ba5 100644
--- a/examples/docs/en-US/color-picker.md
+++ b/examples/docs/en-US/color-picker.md
@@ -16,6 +16,26 @@
   }
 </script>
 
+<style>
+  .demo-color-picker .block {
+    padding: 30px 0;
+    text-align: center;
+    border-right: solid 1px #EFF2F6;
+    float: left;
+    width: 50%;
+    box-sizing: border-box;
+    &:last-child {
+      border-right: none;
+    }
+  }
+  .demo-color-picker .demonstration {
+    display: block;
+    color: #8492a6;
+    font-size: 14px;
+    margin-bottom: 20px;
+  }
+</style>
+
 ## ColorPicker
 
 ColorPicker is a color selector supporting multiple color formats.
diff --git a/examples/docs/en-US/color.md b/examples/docs/en-US/color.md
index ccfa83c0c..bb7717b02 100644
--- a/examples/docs/en-US/color.md
+++ b/examples/docs/en-US/color.md
@@ -1,3 +1,89 @@
+<style>
+  .demo-color-box {
+    border-radius: 4px;
+    padding: 20px;
+    height: 74px;
+    box-sizing: border-box;
+    color: #fff;
+    font-size: 14px;
+
+    & .value {
+      font-size: 12px;
+      opacity: 0.69;
+      line-height: 24px;
+    }
+  }
+  .demo-color-box-group {
+    .demo-color-box {
+      border-radius: 0;
+    }
+    .demo-color-box:first-child {
+      border-radius: 4px 4px 0 0;
+    }
+    .demo-color-box:last-child {
+      border-radius: 0 0 4px 4px;
+    }
+  }
+  .bg-blue-light {
+    background-color: #58b7ff;
+  }
+  .bg-blue,
+  .bg-info {
+    background-color: #20a0ff;
+  }
+  .bg-blue-dark {
+    background-color: #1d8ce0;
+  }
+
+  .bg-success {
+    background-color: #13CE66;
+  }
+  .bg-warning {
+    background-color: #f7ba2a;
+  }
+  .bg-danger {
+    background-color: #ff4949;
+  }
+
+  .bg-black {
+    background-color: #1f2d3d;
+  }
+  .bg-black-light {
+    background-color: #324057;
+  }
+  .bg-black-lighter {
+    background-color: #475669;
+  }
+
+  .bg-silver {
+    background-color: #8492a6;
+  }
+  .bg-silver-light {
+    background-color: #99a9bf;
+  }
+  .bg-silver-lighter {
+    background-color: #c0ccda;
+  }
+
+  .bg-gray {
+    background-color: #d3dce6;
+  }
+  .bg-gray-light {
+    background-color: #e5e9f2;
+  }
+  .bg-gray-lighter {
+    background-color: #eff2f7;
+  }
+
+  .bg-white-dark {
+    background-color: #f9fafc;
+  }
+
+  .color-gray {
+    color: #5e6d82;
+  }
+</style>
+
 ## Color
 Element uses a specific set of palettes to specify colors to provide a consistent look and feel for the products you build.
 
diff --git a/examples/docs/en-US/date-picker.md b/examples/docs/en-US/date-picker.md
index 36ab0cb03..532e1a5b1 100644
--- a/examples/docs/en-US/date-picker.md
+++ b/examples/docs/en-US/date-picker.md
@@ -63,6 +63,30 @@
   };
 </script>
 
+<style>
+  .demo-block.demo-date-picker .source {
+    padding: 0;
+    display: flex;
+  }
+
+  .demo-date-picker .block {
+    padding: 30px 0;
+    text-align: center;
+    border-right: solid 1px #EFF2F6;
+    flex: 1;
+    &:last-child {
+      border-right: none;
+    }
+  }
+
+  .demo-date-picker .demonstration {
+    display: block;
+    color: #8492a6;
+    font-size: 14px;
+    margin-bottom: 20px;
+  }
+</style>
+
 ## DatePicker
 
 Use Date Picker for date input.
diff --git a/examples/docs/en-US/datetime-picker.md b/examples/docs/en-US/datetime-picker.md
index 63a984b06..d9291931c 100644
--- a/examples/docs/en-US/datetime-picker.md
+++ b/examples/docs/en-US/datetime-picker.md
@@ -72,6 +72,30 @@
   };
 </script>
 
+<style>
+.demo-block.demo-datetime-picker .source {
+    padding: 0;
+    display: flex;
+  }
+
+  .demo-datetime-picker .block {
+    padding: 30px 0;
+    text-align: center;
+    border-right: solid 1px #EFF2F6;
+    flex: 1;
+    &:last-child {
+      border-right: none;
+    }
+  }
+
+  .demo-datetime-picker .demonstration {
+    display: block;
+    color: #8492a6;
+    font-size: 14px;
+    margin-bottom: 20px;
+  }
+</style>
+
 ## DateTimePicker
 
 Select date and time in one picker.
diff --git a/examples/docs/en-US/dialog.md b/examples/docs/en-US/dialog.md
index 8ed07c91d..27e4e6a12 100644
--- a/examples/docs/en-US/dialog.md
+++ b/examples/docs/en-US/dialog.md
@@ -47,6 +47,29 @@
   };
 </script>
 
+<style>
+  .demo-box.demo-dialog {
+    .dialog-footer button:first-child {
+      margin-right: 10px;
+    }
+    .full-image {
+      width: 100%;
+    }
+    .el-dialog__wrapper {
+      margin: 0;
+    }
+    .el-select {
+      width: 300px;
+    }
+    .el-input {
+      width: 300px;
+    }
+    .el-button--text {
+      margin-right: 15px;
+    }
+  }
+</style>
+
 ## Dialog
 
 Informs users while preserving the current page state.
diff --git a/examples/docs/en-US/dropdown.md b/examples/docs/en-US/dropdown.md
index 7cd32d5b5..0db59d883 100644
--- a/examples/docs/en-US/dropdown.md
+++ b/examples/docs/en-US/dropdown.md
@@ -1,3 +1,43 @@
+<style>
+  .demo-box {
+    .el-dropdown {
+      vertical-align: top;
+
+      & + .el-dropdown {
+        margin-left: 15px;
+      }
+    }
+    .el-dropdown-link {
+      cursor: pointer;
+      color: #20a0ff;
+    }
+    .el-icon-caret-bottom {
+      font-size: 12px;
+    }
+  }
+
+  .block-col-2 {
+    margin: -24px;
+
+    .el-col {
+      padding: 30px 0;
+      text-align: center;
+      border-right: 1px solid #eff2f6;
+
+      &:last-child {
+        border-right: 0;
+      }
+    }
+  }
+
+ .demo-dropdown .demonstration {
+   display: block;
+   color: #8492a6;
+   font-size: 14px;
+   margin-bottom: 20px;
+ }
+</style>
+
 <script>
   export default {
     methods: {
diff --git a/examples/docs/en-US/icon.md b/examples/docs/en-US/icon.md
index 47d4cfb9d..6c72c9313 100644
--- a/examples/docs/en-US/icon.md
+++ b/examples/docs/en-US/icon.md
@@ -10,7 +10,63 @@
   }
 </script>
 
-## Icon 
+<style>
+  .demo-icon .source > i {
+    font-size: 24px;
+    color: #8492a6;
+    margin: 0 20px;
+    font-size: 1.5em;
+    vertical-align: middle;
+  }
+
+  .demo-icon .source > button {
+    margin: 0 20px;
+  }
+
+  .icon-list {
+    overflow: hidden;
+    list-style: none;
+    padding: 0;
+    border: solid 1px #eaeefb;
+    border-radius: 4px;
+  }
+  .icon-list li {
+    float: left;
+    width: 16.66%;
+    text-align: center;
+    height: 120px;
+    line-height: 120px;
+    color: #666;
+    font-size: 13px;
+    transition: color .15s linear;
+
+    border-right: 1px solid #eee;
+    border-bottom: 1px solid #eee;
+    margin-right: -1px;
+    margin-bottom: -1px;
+
+    @utils-vertical-center;
+
+    & span {
+      display: inline-block;
+      line-height: normal;
+      vertical-align: middle;
+      font-family: 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',SimSun,sans-serif;
+      color: #99a9bf;
+    }
+    & i {
+      display: block;
+      font-size: 24px;
+      margin-bottom: 15px;
+      color: #8492a6;
+    }
+    &:hover {
+      color: rgb(92, 182, 255);
+    }
+  }
+</style>
+
+## Icon
 
 Element provides a set of common icons.
 
diff --git a/examples/docs/en-US/input-number.md b/examples/docs/en-US/input-number.md
index e43b88267..69bc688b9 100644
--- a/examples/docs/en-US/input-number.md
+++ b/examples/docs/en-US/input-number.md
@@ -18,6 +18,14 @@
   };
 </script>
 
+<style>
+  .demo-box.demo-input-number {
+    .el-input-number + .el-input-number {
+      margin-left: 10px;
+    }
+  }
+</style>
+
 ## InputNumber
 
 Input numerical values with a customizable range.
diff --git a/examples/docs/en-US/layout.md b/examples/docs/en-US/layout.md
index 5deffeb4f..ca2970fa7 100644
--- a/examples/docs/en-US/layout.md
+++ b/examples/docs/en-US/layout.md
@@ -1,3 +1,34 @@
+<style>
+  .demo-layout {
+    .el-row {
+      margin-bottom: 20px;
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+    .el-col {
+      border-radius: 4px;
+    }
+    .bg-purple-dark {
+      background: #99a9bf;
+    }
+    .bg-purple {
+      background: #d3dce6;
+    }
+    .bg-purple-light {
+      background: #e5e9f2;
+    }
+    .grid-content {
+      border-radius: 4px;
+      min-height: 36px;
+    }
+    .row-bg {
+      padding: 10px 0;
+      background-color: #f9fafc;
+    }
+  }
+</style>
+
 ## Layout
 
 Quickly and easily create layouts with the basic 24-column.
diff --git a/examples/docs/en-US/loading.md b/examples/docs/en-US/loading.md
index e340a0b9c..5b3826ca1 100644
--- a/examples/docs/en-US/loading.md
+++ b/examples/docs/en-US/loading.md
@@ -1,3 +1,9 @@
+<style>
+  .demo-loading .el-table {
+    border: none;
+  }
+</style>
+
 <script>
   export default {
     data() {
diff --git a/examples/docs/en-US/menu.md b/examples/docs/en-US/menu.md
index ff89b548d..ea60f81b5 100644
--- a/examples/docs/en-US/menu.md
+++ b/examples/docs/en-US/menu.md
@@ -1,3 +1,33 @@
+<style>
+  .demo-box.demo-menu {
+    .el-menu-demo {
+      padding-left: 55px;
+    }
+    .el-menu-vertical-demo {
+      width: 200px;
+      min-height: 400px;
+    }
+    .line {
+      height: 1px;
+      background-color: #e0e6ed;
+      margin: 35px -24px;
+    }
+    h5 {
+      font-size: 14px;
+      color: #8492a6;
+      margin-top: 10px;
+    }
+    .tac {
+      text-align: center;
+
+      .el-menu-vertical-demo {
+        display: inline-block;
+        text-align: left;
+      }
+    }
+  }
+</style>
+
 <script>
   export default {
     data() {
diff --git a/examples/docs/en-US/pagination.md b/examples/docs/en-US/pagination.md
index 47e881378..5f182f5ac 100644
--- a/examples/docs/en-US/pagination.md
+++ b/examples/docs/en-US/pagination.md
@@ -1,3 +1,53 @@
+<style>
+  .demo-pagination .source.first {
+    padding: 0;
+  }
+
+  .demo-pagination .first .block {
+    padding: 30px 0;
+    text-align: center;
+    border-right: solid 1px #EFF2F6;
+    float: left;
+    width: 50%;
+    box-sizing: border-box;
+
+    &:last-child {
+      border-right: none;
+    }
+  }
+
+  .demo-pagination .first .demonstration {
+    display: block;
+    color: #8492a6;
+    font-size: 14px;
+    margin-bottom: 20px;
+  }
+
+  .demo-pagination .source.last {
+    padding: 0;
+  }
+
+  .demo-pagination .last .block {
+    padding: 30px 24px;
+    border-bottom: solid 1px #EFF2F6;
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
+  .demo-pagination .last .demonstration {
+    font-size: 14px;
+    color: #8492a6;
+    line-height: 44px;
+  }
+
+  .demo-pagination .last .demonstration + .el-pagination {
+    float: right;
+    width: 70%;
+    margin: 5px 20px 0 0;
+  }
+</style>
+
 ## Pagination
 
 If you have too much data to display in one page, use pagination.
diff --git a/examples/docs/en-US/popover.md b/examples/docs/en-US/popover.md
index bd6a6e46f..b3b6d1464 100644
--- a/examples/docs/en-US/popover.md
+++ b/examples/docs/en-US/popover.md
@@ -1,3 +1,17 @@
+<style>
+  .demo-box.demo-popover {
+    .el-popover + .el-popover {
+      margin-left: 10px;
+    }
+    .el-input {
+      width: 360px;
+    }
+    .el-button {
+      margin-left: 10px;
+    }
+  }
+</style>
+
 <script>
   export default {
     data() {
diff --git a/examples/docs/en-US/rate.md b/examples/docs/en-US/rate.md
index af259e2fe..ecdf40a05 100644
--- a/examples/docs/en-US/rate.md
+++ b/examples/docs/en-US/rate.md
@@ -1,3 +1,24 @@
+<style>
+  .demo-rate .block {
+    padding: 30px 0;
+    text-align: center;
+    border-right: solid 1px #EFF2F6;
+    float: left;
+    width: 50%;
+    box-sizing: border-box;
+    &:last-child {
+      border-right: none;
+    }
+  }
+
+  .demo-rate .demonstration {
+    display: block;
+    color: #8492a6;
+    font-size: 14px;
+    margin-bottom: 20px;
+  }
+</style>
+
 <script>
   export default {
     data() {
diff --git a/examples/docs/en-US/select.md b/examples/docs/en-US/select.md
index aa39ddd29..09a1a3f8d 100644
--- a/examples/docs/en-US/select.md
+++ b/examples/docs/en-US/select.md
@@ -105,7 +105,7 @@
         states: ["Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "Delaware", "Florida", "Georgia", "Hawaii", "Idaho", "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky", "Louisiana", "Maine", "Maryland", "Massachusetts", "Michigan", "Minnesota", "Mississippi", "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire", "New Jersey", "New Mexico", "New York", "North Carolina", "North Dakota", "Ohio", "Oklahoma", "Oregon", "Pennsylvania", "Rhode Island", "South Carolina", "South Dakota", "Tennessee", "Texas", "Utah", "Vermont", "Virginia", "Washington", "West Virginia", "Wisconsin", "Wyoming"]
       };
     },
-    
+
     mounted() {
       this.list = this.states.map(item => { return { value: item, label: item }; });
     },
@@ -126,6 +126,12 @@
   };
 </script>
 
+<style>
+  .demo-select .el-select {
+    width: 240px;
+  }
+</style>
+
 ## Select
 
 When there are plenty of options, use a drop-down menu to display and select desired ones.
@@ -236,7 +242,7 @@ Disable the whole component.
     </el-option>
   </el-select>
 </template>
-  
+
 <script>
   export default {
     data() {
diff --git a/examples/docs/en-US/switch.md b/examples/docs/en-US/switch.md
index 650231755..fcad1182b 100644
--- a/examples/docs/en-US/switch.md
+++ b/examples/docs/en-US/switch.md
@@ -1,3 +1,11 @@
+<style>
+  .demo-box.demo-switch {
+    .el-switch {
+      margin: 20px 20px 20px 0;
+    }
+  }
+</style>
+
 <script>
   export default {
     data() {
diff --git a/examples/docs/en-US/table.md b/examples/docs/en-US/table.md
index bfd61cfb3..e56176d6c 100644
--- a/examples/docs/en-US/table.md
+++ b/examples/docs/en-US/table.md
@@ -278,6 +278,32 @@
   };
 </script>
 
+<style>
+  .el-table .info-row {
+    background: #c9e5f5;
+  }
+
+  .el-table .positive-row {
+    background: #e2f0e4;
+  }
+
+  .demo-table .name-wrapper {
+    display: inline-block;
+  }
+
+  .demo-table .demo-table-expand {
+    label {
+      width: 90px;
+      color: #99a9bf;
+    }
+    .el-form-item {
+      margin-right: 0;
+      margin-bottom: 0;
+      width: 50%;
+    }
+  }
+</style>
+
 ## Table
 
 Display multiple data with similar format. You can sort, filter, compare your data in a table.
@@ -1563,7 +1589,7 @@ For table of numbers, you can add an extra row at the table footer displaying ea
       label="Amount 3">
     </el-table-column>
   </el-table>
-  
+
   <el-table
     :data="tableData6"
     border
diff --git a/examples/docs/en-US/tag.md b/examples/docs/en-US/tag.md
index 4f8cabb49..c56099328 100644
--- a/examples/docs/en-US/tag.md
+++ b/examples/docs/en-US/tag.md
@@ -39,6 +39,29 @@
   }
 </script>
 
+<style>
+  .demo-box.demo-tag {
+    .el-tag + .el-tag {
+      margin-left: 10px;
+    }
+    .button-new-tag {
+      margin-left: 10px;
+      height: 24px;
+      line-height: 22px;
+      padding: 0 *;
+    }
+    .input-new-tag {
+      width: 78px;
+      margin-left: 10px;
+      vertical-align: bottom;
+
+      .el-input__inner {
+        height: 24px;
+      }
+    }
+  }
+</style>
+
 ## Tag
 
 Used for marking and selection.
diff --git a/examples/docs/en-US/time-picker.md b/examples/docs/en-US/time-picker.md
index 555218d19..6873514bc 100644
--- a/examples/docs/en-US/time-picker.md
+++ b/examples/docs/en-US/time-picker.md
@@ -1,3 +1,11 @@
+<style>
+  .demo-box {
+    .el-date-editor + .el-date-editor {
+      margin-left: 10px;
+    }
+  }
+</style>
+
 ## TimePicker
 
 Use Time Picker for time input.
diff --git a/examples/docs/en-US/transfer.md b/examples/docs/en-US/transfer.md
index 5bb9fa0ad..0b0306335 100644
--- a/examples/docs/en-US/transfer.md
+++ b/examples/docs/en-US/transfer.md
@@ -1,3 +1,12 @@
+<style>
+  .demo-transfer {
+    .transfer-footer {
+      margin-left: 20px;
+      padding: 6px 5px;
+    }
+  }
+</style>
+
 <script>
   export default {
     data() {
diff --git a/examples/docs/en-US/transition.md b/examples/docs/en-US/transition.md
index ab37ab55f..c330a2e06 100644
--- a/examples/docs/en-US/transition.md
+++ b/examples/docs/en-US/transition.md
@@ -154,6 +154,21 @@ import Vue from 'vue'
 Vue.component(CollapseTransition.name, CollapseTransition)
 ```
 
+<style>
+  .transition-box {
+    margin-bottom: 10px;
+    width: 200px;
+    height: 100px;
+    border-radius: 4px;
+    background-color: #20A0FF;
+    text-align: center;
+    color: #fff;
+    padding: 40px 20px;
+    margin-right: 20px;
+    box-sizing: border-box;
+  }
+</style>
+
 <script>
   module.exports = {
     data: () => ({
diff --git a/examples/docs/en-US/tree.md b/examples/docs/en-US/tree.md
index df886c02b..325212fe4 100644
--- a/examples/docs/en-US/tree.md
+++ b/examples/docs/en-US/tree.md
@@ -1,3 +1,25 @@
+<style>
+  .demo-tree {
+    .leaf {
+      width: 20px;
+      background: #ddd;
+    }
+
+    .folder {
+      width: 20px;
+      background: #888;
+    }
+
+    .buttons {
+      margin-top: 20px;
+    }
+
+    .filter-tree {
+      margin-top: 20px;
+    }
+  }
+</style>
+
 <script>
   const data = [{
     label: 'Level one 1',
@@ -114,7 +136,7 @@
         if (node.data.name === 'region1') {
           hasChild = true;
         } else if (node.data.name === 'region2') {
-          hasChild = false;          
+          hasChild = false;
         } else {
           hasChild = Math.random() > 0.5;
         }
diff --git a/examples/docs/en-US/typography.md b/examples/docs/en-US/typography.md
index d442a25eb..22f8289be 100644
--- a/examples/docs/en-US/typography.md
+++ b/examples/docs/en-US/typography.md
@@ -1,3 +1,77 @@
+<style>
+  .demo-typo-box {
+    height: 200px;
+    width: 200px;
+    position: relative;
+    border: 1px solid #eaeefb;
+    font-size: 40px;
+    color: #1f2d3d;
+    text-align: center;
+    line-height: 162px;
+    padding-bottom: 36px;
+    box-sizing: border-box;
+    display: inline-block;
+    margin-right: 17px;
+    border-radius: 4px;
+
+    .name {
+      position: absolute;
+      bottom: 0;
+      width: 100%;
+      height: 35px;
+      border-top: 1px solid #eaeefb;
+      font-size: 14px;
+      color: #8492a6;
+      line-height: 35px;
+      text-align: left;
+      text-indent: 10px;
+      font-family: 'Helvetica Neue';
+    }
+  }
+  .demo-typo-size {
+    .h1 {
+      font-size: 20px;
+    }
+    .h2 {
+      font-size: 18px;
+    }
+    .h3 {
+      font-size: 16px;
+    }
+    .text-regular {
+      font-size: 14px;
+    }
+    .text-small {
+      font-size: 13px;
+    }
+    .text-smaller {
+      font-size: 12px;
+    }
+    .color-dark-light {
+      color: #99a9bf;
+    }
+  }
+  .typo-PingFang {
+    font-family: 'PingFang SC';
+  }
+  .typo-Hiragino {
+    font-family: 'Hiragino Sans GB';
+  }
+  .typo-Microsoft {
+    font-family: 'Microsoft YaHei';
+  }
+  /* 英文 */
+  .typo-Helvetica-Neue {
+    font-family: 'Helvetica Neue';
+  }
+  .typo-Helvetica {
+    font-family: 'Helvetica';
+  }
+  .typo-Arial {
+    font-family: 'Arial';
+  }
+</style>
+
 ## Typography
 
 We create a font convention to ensure the best presentation across different platforms.
diff --git a/examples/docs/en-US/upload.md b/examples/docs/en-US/upload.md
index 97d5655a0..d600898ca 100644
--- a/examples/docs/en-US/upload.md
+++ b/examples/docs/en-US/upload.md
@@ -1,3 +1,44 @@
+<style>
+  .upload-tip {
+    color: #8492a6;
+    font-size: 12px;
+    margin-top: 7px;
+  }
+  .demo-box {
+    margin-bottom: 24px;
+
+    .upload-demo {
+      width: 360px;
+    }
+    .avatar-uploader {
+      .el-upload {
+        border: 1px dashed #d9d9d9;
+        border-radius: 6px;
+        cursor: pointer;
+        position: relative;
+        overflow: hidden;
+
+        &:hover {
+          border-color: #20a0ff;
+        }
+      }
+      .avatar-uploader-icon {
+        font-size: 28px;
+        color: #8c939d;
+        width: 178px;
+        height: @width;
+        line-height: @height;
+        text-align: center;
+      }
+      .avatar {
+        width: 178px;
+        height: @width;
+        display: block;
+      }
+    }
+  }
+</style>
+
 <script>
   export default {
     data() {