diff --git a/assets/css/_page/_single.scss b/assets/css/_page/_single.scss
index e58deb69..3a88af9d 100644
--- a/assets/css/_page/_single.scss
+++ b/assets/css/_page/_single.scss
@@ -470,6 +470,7 @@
       }
     }
 
+    @import '../_partials/_single/alert';
     @import '../_partials/_single/code';
     @import '../_shortcodes';
   }
diff --git a/assets/css/_partials/_maps/_alert.scss b/assets/css/_partials/_maps/_alert.scss
new file mode 100644
index 00000000..4a612839
--- /dev/null
+++ b/assets/css/_partials/_maps/_alert.scss
@@ -0,0 +1,16 @@
+// Color map of alert [$type $border-color $color, ... ]
+$alert-color-map:
+  'note' #0969da #0969da,
+  'tip' #1a7f37 #1a7f37,
+  'important' #8250df #8250df,
+  'warning' #bf8700 #9a6700,
+  'caution' #cf222e #d1242f,
+  !default;
+
+$alert-color-map-dark:
+  'note' #316dca #478be6,
+  'tip' #347d39 #57ab5a,
+  'important' #8256d0 #986ee2,
+  'warning' #966600 #c69026,
+  'caution' #c93c37 #e5534b,
+  !default;
diff --git a/assets/css/_partials/_single/_alert.scss b/assets/css/_partials/_single/_alert.scss
new file mode 100644
index 00000000..492d6474
--- /dev/null
+++ b/assets/css/_partials/_single/_alert.scss
@@ -0,0 +1,44 @@
+.alert {
+  padding: 0.5rem 1rem;
+  margin-block: 1rem;
+  color: inherit;
+  border-left: 0.25em solid var(--#{$prefix}alert-border-color);
+
+  > :first-child {
+    margin-top: 0;
+  }
+  > :last-child {
+    margin-bottom: 0;
+  }
+
+  .alert-title {
+    display: flex;
+    font-weight: 500;
+    align-items: center;
+    line-height: 1;
+    margin-bottom: 1rem;
+    color: var(--#{$prefix}alert-color);
+
+    > svg.icon {
+      width: initial;
+      height: initial;
+      margin-right: 0.5rem;
+    }
+  }
+
+  @each $type, $border-color, $color in $alert-color-map {
+    &.alert-#{$type} {
+      --#{$prefix}alert-border-color: #{$border-color};
+      --#{$prefix}alert-color: #{$color};
+    }
+  }
+
+  [data-theme='dark'] & {
+    @each $type, $border-color, $color in $alert-color-map-dark {
+      &.alert-#{$type} {
+        --#{$prefix}alert-border-color: #{$border-color};
+        --#{$prefix}alert-color: #{$color};
+      }
+    }
+  }
+}
diff --git a/assets/css/_variables.scss b/assets/css/_variables.scss
index 4e8a17dd..e92cf487 100644
--- a/assets/css/_variables.scss
+++ b/assets/css/_variables.scss
@@ -176,6 +176,7 @@ $github-corner-fill-dark: $header-background-color !default;
 // ========== GitHub Corners ========== //
 
 @import '_partials/_maps/admonition';
+@import '_partials/_maps/alert';
 @import '_partials/_maps/code-highlight';
 @import '_partials/_maps/code-type';
 @import '_partials/_maps/colors';