segmentio · jedrzejchalubek · Sep 30, 2019 · Sep 27, 2019 · Sep 27, 2019 · Sep 30, 2019
@@ -0,0 +1,4 @@
+<div markdown="div" class="alert alert--{{ include.type }}" role="alert">
+  {% include_relative assets/icons/alerts/{{ include.type }}.svg %}
+  {{ include.content }}
+</div>
@@ -26,6 +26,7 @@ $color-values: (
   secondary: #1f477d,
   secondary-dark: #435a6f,
   gray-light: #f7f9fa,
+  gray-lighter: #f9fafb,
   gray: #a5b0ba,
   code-gray: #435a6f,
   code-green: #52bd95,

@@ -0,0 +1,48 @@
+.alert {
+  background-color: color(gray-lighter);
+  border-radius: 4px;
+  font-size: 14px;
+  line-height: 1.57;
+  padding: 15px 20px 15px 50px;
+  position: relative;
+
+  &::before {
+    content: "";
+    border-radius: 2px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 3px;
+  }
+
+  svg {
+    position: absolute;
+    left: 20px;
+    top: 22px;
+  }
+
+  &--info {
+    &::before {
+      background-color: color(info);
+    }
+  }
+
+  &--success {
+    &::before {
+      background-color: color(success);
+    }
+  }
+
+  &--warning {
+    &::before {
+      background-color: color(warning);
+    }
+  }
+
+  &--error {
+    &::before {
+      background-color: color(error);
+    }
+  }
+}
@@ -42,6 +42,7 @@
 @import "components/logo";
 @import "components/note";
 @import "components/button-link";
+@import "components/alert";
 
 // Pages
 // =================================================

@@ -37,3 +37,8 @@ layout: page
   Server-side data management is when tag sends data into your web server, then your web server passes that data to the destination system/server.
 {% endcapture %}
 {% include components/note.html title="Server-side tracking" content=server_side_tracking buttonTitle="Find out more" buttonHref="https://segment.com" %}
+
+{% include components/alert.html type="info" content="This is my sample note." %}
+{% include components/alert.html type="success" content="This is my sample note." %}
+{% include components/alert.html type="warning" content="This is my sample note." %}
+{% include components/alert.html type="error" content="This is my sample note." %}