diff --git a/docs/source/_assets/less/markdown.less b/docs/source/_assets/less/markdown.less
index 6cb26ce84..21cc173b2 100644
--- a/docs/source/_assets/less/markdown.less
+++ b/docs/source/_assets/less/markdown.less
@@ -91,7 +91,7 @@
     @apply .text-dark-soft;
   }
 
-  > :not(pre) > code[class*="language-"], > pre[class*="language-"] {
+  > :not(pre) > code[class*="language-"], > pre[class*="language-"], pre[class*="language-"]& {
     @apply .bg-light-soft;
     @apply .text-sm;
     @apply .leading-loose;
diff --git a/docs/source/examples/alerts.blade.md b/docs/source/examples/alerts.blade.md
index 96476c29b..d63bee23c 100644
--- a/docs/source/examples/alerts.blade.md
+++ b/docs/source/examples/alerts.blade.md
@@ -5,15 +5,57 @@ title: "Alerts"
 
 # Alerts
 
-We don't ship alert components because every app has it's own visual style, but they are easy af to make.
+We don't ship alert components because every app has it's own visual style, and they are so easy to build out of utilities.
 
-@foreach($page->colors as $color)
-<div class="bg-{{$color}}-lightest border border-{{$color}}-light rounded p-4 mb-4">
-    <div class="text-bold text-{{$color}}-dark">
-        Alert message
-    </div>
-    <div class="text-{{$color}}-dark">
-        Some additional text to explain what happened.
+Here's a bunch of examples:
+
+### Bootstrap Style
+
+<div class="border border-dark-softer rounded mask">
+  <div class="p-6 border-b border-dark-softer">
+    <div class="bg-red-lightest border border-red-light text-red-dark px-4 py-3 rounded">
+      <strong>Holy smokes!</strong> Something seriously bad happened.
     </div>
+  </div>
+  <div>
+    <pre class="markdown language-html" style="margin: 0;"><code>{{
+'<div class="bg-red-lightest border border-red-light text-red-dark px-4 py-3 rounded">
+  <strong>Holy smokes!</strong> Something seriously bad happened.
+</div>'
+    }}</code></pre>
+  </div>
+</div>
+
+### HelpScout Style
+
+<div class="border border-dark-softer rounded mask">
+  <div class="p-6 border-b border-dark-softer">
+    <div class="bg-orange-lightest border-l-4 border-orange text-orange-dark p-4">
+      Something not ideal might be happening.
+    </div>
+  </div>
+  <div>
+    <pre class="markdown language-html" style="margin: 0;"><code>{{
+'<div class="bg-orange-lightest border-l-4 border-orange text-orange-dark p-4">
+  Something not ideal might be happening.
+</div>'
+    }}</code></pre>
+  </div>
+</div>
+
+### Heroku Style
+
+<div class="border border-dark-softer rounded mask">
+  <div class="p-6 border-b border-dark-softer">
+    <div class="bg-blue text-light text-sm text-bold px-4 py-3">
+      Something happened that you should know about but is probably good or at least not bad.
+    </div>
+  </div>
+  <div>
+    <pre class="markdown language-html" style="margin: 0;"><code>{{
+'<div class="bg-blue text-light text-sm text-bold px-4 py-3">
+  Something happened that you should know about but is probably good or at least not bad.
+</div>'
+    }}</code></pre>
+  </div>
 </div>
-@endforeach