diff --git a/src/.vuepress/config.js b/src/.vuepress/config.js
index c41f660c0f..ea75b73831 100644
--- a/src/.vuepress/config.js
+++ b/src/.vuepress/config.js
@@ -150,17 +150,29 @@ module.exports = {
     },
     smoothScroll: false
   },
-  plugins: {
-    '@vuepress/pwa': {
-      serviceWorker: true,
-      updatePopup: {
-        '/': {
-          message: 'New content is available.',
-          buttonText: 'Refresh'
+  plugins: [
+    [
+      '@vuepress/pwa',
+      {
+        serviceWorker: true,
+        updatePopup: {
+          '/': {
+            message: 'New content is available.',
+            buttonText: 'Refresh'
+          }
         }
       }
-    }
-  },
+    ],
+    [
+      'vuepress-plugin-container',
+      {
+        type: 'info',
+        before: info =>
+          `<div class="custom-block info"><p class="custom-block-title">${info}</p>`,
+        after: '</div>'
+      }
+    ]
+  ],
   markdown: {
     /** @param {import('markdown-it')} md */
     extendMarkdown: md => {
diff --git a/src/.vuepress/styles/index.styl b/src/.vuepress/styles/index.styl
index 972f43696d..769b790e4b 100644
--- a/src/.vuepress/styles/index.styl
+++ b/src/.vuepress/styles/index.styl
@@ -8,3 +8,82 @@
   user-select: none;
   overflow-x: auto;
 }
+
+.custom-block {
+  padding: 0.1rem 1.5rem;
+  margin: 2em 0;
+  border-left-width: 0.5rem;
+  border-left-style: solid;
+  background-color: #f8f8f8;
+  position: relative;
+  border-bottom-right-radius: 2px;
+  border-top-right-radius: 2px;
+  max-width: 80%;
+  margin: 1rem 0;
+
+  &::before {
+    position: absolute;
+    top: 14px;
+    left: -14px;
+    color: #fff;
+    width: 20px;
+    height: 20px;
+    border-radius: 100%;
+    text-align: center;
+    line-height: 20px;
+    font-weight: bold;
+    font-family: 'Dosis', 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
+    font-size: 14px;
+  }
+
+  .custom-block-title {
+    font-weight: 600;
+    margin-bottom: -0.4rem;
+  }
+
+  &.info {
+    border-color: #007bff;
+  }
+
+  &.tip {
+    border-color: #42b983;
+  }
+
+  &.warning {
+    border-color: #dcbc1e;
+    background-color: #f8f8f8;
+  }
+
+  &.danger {
+    border-color: #f66;
+    background-color: #f8f8f8;
+
+    &::before {
+      content: '!';
+      background-color: #f66;
+    }
+  }
+
+  &.details {
+    display: block;
+    position: relative;
+    border-radius: 2px;
+    margin: 1.6em 0;
+    padding: 1.6em;
+    background-color: #eee;
+    h4 {
+      margin-top: 0;
+    }
+    figure,
+    p {
+      &:last-child {
+        margin-bottom: 0;
+        padding-bottom: 0;
+      }
+    }
+    summary {
+      outline: none;
+      cursor: pointer;
+    }
+  }
+}