callouts added

public/docs/_includes/styleguide/_alerts.jade

@@ -4,7 +4,7 @@
     p.
       Please use alerts sparingly throughout the docs.
       They are meant to draw attention on important occasions.
-      Alerts should not be used for multi-line content or stacked
+      Alerts should not be used for multi-line content (user callouts insteads) or stacked
       on top of each other.
 
   .showcase-content

public/docs/_includes/styleguide/_callouts.jade

@@ -0,0 +1,38 @@
+#sg-callouts.showcase.shadow-1
+  header.showcase-header
+    h2 Callouts
+    p.
+      Please use callouts sparingly throughout the docs.
+      Callouts (like alerts) are meant to draw attention on important occasions.
+      Unlike alerts, callouts are designed to display multi-line content.
+
+  .showcase-content
+    .l-sub-section
+      h3 Adding a Callout
+
+      .callout.is-critical
+        header A Critical Title
+        p.
+          Pitchfork hoodie semiotics, roof party pop-up paleo messenger bag cred Carles tousled Truffaut yr. Semiotics viral freegan VHS, Shoreditch disrupt McSweeney's. Intelligentsia kale chips Vice four dollar toast, Schlitz crucifix
+      .callout.is-important
+        header A Very Important Title
+        p.
+          A vePitchfork hoodie semiotics, roof party pop-up paleo messenger bag cred Carles tousled Truffaut yr. Semiotics viral freegan VHS, Shoreditch disrupt McSweeney's. Intelligentsia kale chips Vice four dollar toast, Schlitz crucifix
+      .callout.is-helpful
+        header A Very Helpful Title
+        p.
+          Pitchfork hoodie semiotics, roof party pop-up paleo messenger bag cred Carles tousled Truffaut yr. Semiotics viral freegan VHS, Shoreditch disrupt McSweeney's. Intelligentsia kale chips Vice four dollar toast, Schlitz crucifix
+
+      pre.prettyprint.linenums.lang-html
+        code.
+          .callout.is-critical
+            header A Critical Title
+            p Pitchfork hoodie semiotics, roof party pop-up paleo messenger bag cred Carles tousled Truffaut yr. Semiotics viral freegan VHS, Shoreditch disrupt McSweeney's. Intelligentsia kale chips Vice four dollar toast, Schlitz crucifix
+
+          .callout.is-important
+            header A Very Important Title
+            p A vePitchfork hoodie semiotics, roof party pop-up paleo messenger bag cred Carles tousled Truffaut yr. Semiotics viral freegan VHS, Shoreditch disrupt McSweeney's. Intelligentsia kale chips Vice four dollar toast, Schlitz crucifix
+
+          .callout.is-helpful
+            header A Very Helpful Title
+            p Pitchfork hoodie semiotics, roof party pop-up paleo messenger bag cred Carles tousled Truffaut yr. Semiotics viral freegan VHS, Shoreditch disrupt McSweeney's. Intelligentsia kale chips Vice four dollar toast, Schlitz crucifix

public/docs/styleguide.jade

@@ -3,6 +3,7 @@
     != partial("/_includes/styleguide/_layouts")
     != partial("/_includes/styleguide/_code-examples")
     != partial("/_includes/styleguide/_alerts")
+    != partial("/_includes/styleguide/_callouts")
     != partial("/_includes/styleguide/_tables")
     != partial("/_includes/styleguide/_aside")
 

public/resources/css/main.scss

@@ -31,6 +31,7 @@
 @import 'module/bio-card';
 @import 'module/overlay';
 @import 'module/alert';
+@import 'module/callout';
 @import 'module/card';
 @import 'module/modal';
 @import 'module/shadow';

public/resources/css/module/_callout.scss

@@ -0,0 +1,46 @@
+.callout {
+  @extend .alert;
+  padding: 0px;
+
+  header {
+    color: $snow;
+    padding: 0px ($unit * 2);
+    line-height: $unit * 4;
+    font-size: 14px;
+    font-weight: 500;
+    text-transform: uppercase;
+  }
+
+  p {
+    padding: $unit * 2;
+    margin: 0px;
+    font-size: 14px;
+  }
+
+  &.is-critical {
+    border-color: $cardinal;
+    background: $peach;
+
+    header {
+      background: $cardinal;
+    }
+  }
+
+  &.is-important {
+    border-color: $citrus;
+    background: $sand;
+
+    header {
+      background: $citrus;
+    }
+  }
+
+  &.is-helpful {
+    border-color: $blueberry;
+    background: $light;
+
+    header {
+      background: $blueberry;
+    }
+  }
+}