diff --git a/source/_patterns/00-atoms/17-alerts/alert-colors.mustache b/source/_patterns/00-atoms/17-alerts/alert-colors.mustache
new file mode 100644
index 0000000000000000000000000000000000000000..3479e7f3b40812a7e9acffed6c0ef34263887712
--- /dev/null
+++ b/source/_patterns/00-atoms/17-alerts/alert-colors.mustache
@@ -0,0 +1,10 @@
+<div class="inline-flex flex-col sm:flex-row space-y-8 sm:space-y-0 sm:space-x-8">
+  <div class="inline-flex flex-col space-y-2">
+    {{> atoms-alert(classes: "alert--black", icon: "ico--pirati") }}
+    {{> atoms-alert(classes: "alert--grey-125", icon: "ico--pirati") }}
+    {{> atoms-alert(classes: "alert--red-600", icon: "ico--pirati") }}
+    {{> atoms-alert(classes: "alert--yellow-400", icon: "ico--pirati") }}
+    {{> atoms-alert(classes: "alert--green-400", icon: "ico--pirati") }}
+    {{> atoms-alert(classes: "alert--blue-300", icon: "ico--pirati") }}
+  </div>
+</div>
diff --git a/source/_patterns/00-atoms/17-alerts/alert-faded.mustache b/source/_patterns/00-atoms/17-alerts/alert-faded.mustache
new file mode 100644
index 0000000000000000000000000000000000000000..9a6594f16dfaa4d561f54dbe321faf33e7cbf4cc
--- /dev/null
+++ b/source/_patterns/00-atoms/17-alerts/alert-faded.mustache
@@ -0,0 +1,10 @@
+<div class="inline-flex flex-col sm:flex-row space-y-8 sm:space-y-0 sm:space-x-8">
+  <div class="inline-flex flex-col space-y-2">
+    {{> atoms-alert(classes: "alert--black alert--faded", icon: "ico--pirati") }}
+    {{> atoms-alert(classes: "alert--grey-125 alert--faded", icon: "ico--pirati") }}
+    {{> atoms-alert(classes: "alert--red-600 alert--faded", icon: "ico--pirati") }}
+    {{> atoms-alert(classes: "alert--yellow-400 alert--faded", icon: "ico--pirati") }}
+    {{> atoms-alert(classes: "alert--green-400 alert--faded", icon: "ico--pirati") }}
+    {{> atoms-alert(classes: "alert--blue-300 alert--faded", icon: "ico--pirati") }}
+  </div>
+</div>
diff --git a/source/_patterns/00-atoms/17-alerts/alert-semantic.mustache b/source/_patterns/00-atoms/17-alerts/alert-semantic.mustache
new file mode 100644
index 0000000000000000000000000000000000000000..50784151fbd42fb668bcf17ce086a92da5b26cb3
--- /dev/null
+++ b/source/_patterns/00-atoms/17-alerts/alert-semantic.mustache
@@ -0,0 +1,10 @@
+<div class="inline-flex flex-col sm:flex-row space-y-8 sm:space-y-0 sm:space-x-8">
+  <div class="inline-flex flex-col space-y-2">
+    {{> atoms-alert(classes: "alert--dark", icon: "ico--pirati") }}
+    {{> atoms-alert(classes: "alert--light", icon: "ico--pirati") }}
+    {{> atoms-alert(classes: "alert--error", icon: "ico--pirati") }}
+    {{> atoms-alert(classes: "alert--warning", icon: "ico--pirati") }}
+    {{> atoms-alert(classes: "alert--success", icon: "ico--pirati") }}
+    {{> atoms-alert(classes: "alert--info", icon: "ico--pirati") }}
+  </div>
+</div>
diff --git a/source/_patterns/00-atoms/17-alerts/alert.mustache b/source/_patterns/00-atoms/17-alerts/alert.mustache
new file mode 100644
index 0000000000000000000000000000000000000000..a442a8f31042d7a95395407bd9fa65ebc9b50a30
--- /dev/null
+++ b/source/_patterns/00-atoms/17-alerts/alert.mustache
@@ -0,0 +1,6 @@
+<span class="alert {{ classes }}">
+  {{# icon }}
+    <i class="alert__icon {{ icon }}"></i>
+  {{/ icon }}
+  <span>{{ excerpt.short }}</span>
+</span>
diff --git a/source/css/atoms/alert.pcss b/source/css/atoms/alert.pcss
new file mode 100644
index 0000000000000000000000000000000000000000..75bc1fe91eb1c95a181c11f78a898693c424024c
--- /dev/null
+++ b/source/css/atoms/alert.pcss
@@ -0,0 +1,41 @@
+.alert {
+  @apply p-4 flex leading-snug;
+
+  &--dark,
+  &--black {
+    @apply bg-black text-white;
+  }
+
+  &--light,
+  &--grey-125 {
+    @apply bg-grey-125 text-grey-300;
+  }
+
+  &--error,
+  &--red-600 {
+    @apply bg-red-600 text-white;
+  }
+
+  &--warning,
+  &--yellow-400 {
+    @apply bg-yellow-400 text-black;
+  }
+
+  &--success,
+  &--green-400 {
+    @apply bg-green-400 text-white;
+  }
+
+  &--info,
+  &--blue-300 {
+    @apply bg-blue-300 text-white;
+  }
+
+  &--faded {
+    @apply bg-opacity-75;
+  }
+}
+
+.alert__icon {
+  @apply mr-2;
+}
diff --git a/source/css/style.pcss b/source/css/style.pcss
index 18db66fbcf208f412e0c5b64c4165654f8fca975..61e863014f6c06c60d056bc312bf0fcc1f0c3836 100644
--- a/source/css/style.pcss
+++ b/source/css/style.pcss
@@ -19,6 +19,7 @@
  * Custom components
  */
 @import "./atoms/animations.pcss";
+@import "./atoms/alert.pcss";
 @import "./atoms/avatar.pcss";
 @import "./atoms/card.pcss";
 @import "./atoms/contact-line.pcss";