diff --git a/docs/source/docs/examples/alerts.blade.md b/docs/source/docs/examples/alerts.blade.md
index dd47ef44b..0575981ad 100644
--- a/docs/source/docs/examples/alerts.blade.md
+++ b/docs/source/docs/examples/alerts.blade.md
@@ -18,6 +18,18 @@ description: null
 </div>
 @endcomponent
 
+### Modern with Badge
+
+@component('_partials.code-sample', ['lang' => 'html', 'class' => 'px-0 py-0'])
+<div class="bg-indigo-darkest text-center py-4 lg:px-4">
+  <div class="p-2 bg-indigo-darker items-center text-indigo-lightest leading-none lg:rounded-full flex lg:inline-flex" role="alert">
+    <span class="flex rounded-full bg-indigo uppercase px-2 py-1 text-xs font-bold mr-3">New</span>
+    <span class="font-semibold mr-2 text-left flex-1">Get the coolest t-shirts from our brand new store</span>
+    <svg class="opacity-75 h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.95 10.707l.707-.707L8 4.343 6.586 5.757 10.828 10l-4.242 4.243L8 15.657l4.95-4.95z"/></svg>
+  </div>
+</div>
+@endcomponent
+
 ### Left Accent Border
 
 @component('_partials.code-sample', ['lang' => 'html'])