diff --git a/app/assets/javascripts/app/views/layout_ref/content.jst.eco b/app/assets/javascripts/app/views/layout_ref/content.jst.eco
index 58120f393..b534259fd 100644
--- a/app/assets/javascripts/app/views/layout_ref/content.jst.eco
+++ b/app/assets/javascripts/app/views/layout_ref/content.jst.eco
@@ -60,6 +60,16 @@
 
   <hr>
 
+  <h2>Alerts</h2>
+
+  <pre>&lt;div class=&quot;alert alert--info&quot; role=&quot;alert&quot;&gt;Account must be manually configured&lt;/div&gt;</pre>
+  <div class="alert alert--info horizontal" role="alert">Account must be manually configured <code class="align-right">.alert--info</code></div>
+  <div class="alert alert--success horizontal" role="alert">Connection established! <code class="align-right">.alert--success</code></div>
+  <div class="alert alert--warning horizontal" role="alert">Delete Cookies? <code class="align-right">.alert--warning</code></div>
+  <div class="alert alert--danger horizontal" role="alert">System Shutting Down! <code class="align-right">.alert--danger</code></div>
+
+  <hr>
+
   <h2>User Selection</h2>
 
     <form>
diff --git a/app/assets/stylesheets/zammad.css.scss b/app/assets/stylesheets/zammad.css.scss
index 4cdb79efd..9ba3b0e25 100644
--- a/app/assets/stylesheets/zammad.css.scss
+++ b/app/assets/stylesheets/zammad.css.scss
@@ -3335,6 +3335,31 @@ footer {
     color: hsl(204,3%,72%);
   }
 
+.alert {
+  padding: 10px 15px;
+  border-radius: 3px;
+  
+  &.alert--info {
+    border-color: hsl(188,50%,72%);
+    background: hsl(191,53%,79%);
+  }
+
+  &.alert--success {
+    border-color: hsl(145,51%,70%);
+    background: hsl(145,51%,77%);
+  }
+
+  &.alert--warning {
+    border-color: hsl(43,92%,71%);
+    background: hsl(42,94%,80%);
+  }
+
+  &.alert--danger {
+    border-color: hsl(9,72%,62%);
+    background: hsl(12,73%,66%);
+  }
+}
+
 .tags {
   margin-bottom: 20px;
 }