general alert styles

_src/_assets/scss/_alerts.scss

@@ -0,0 +1,44 @@
+//
+// Alerts
+// ---
+// ipdb.io
+//
+
+.alert {
+    font-size: $font-size-small;
+    padding: $spacer;
+    margin-bottom: $spacer;
+    border-radius: $border-radius;
+    text-align: left;
+
+    // Improve alignment and spacing of inner content
+    > p + p {
+        margin-top: 5px;
+    }
+
+    > p:last-child { margin-bottom: 0; }
+
+    &.hide {
+        display: none;
+    }
+}
+
+// Alerts
+@mixin alert-variant($background, $text-color) {
+    background-color: $background;
+    color: $text-color;
+
+    .alert__link { color: darken($text-color, 10%); }
+}
+
+.alert--success {
+    @include alert-variant($brand-success, darken($brand-success, 40%));
+}
+
+.alert--info {
+    @include alert-variant($brand-05, $text-color);
+}
+
+.alert--danger {
+    @include alert-variant($brand-failure, darken($brand-failure, 40%));
+}

_src/_assets/scss/ipdb.scss

@@ -16,6 +16,7 @@
 @import 'logo';
 @import 'caretakers';
 @import 'board';
+@import 'alerts';
 @import 'cookiebanner';
 
 .content--page--markdown {

_src/styleguide.md

@@ -145,6 +145,29 @@ All `form__control` elements require an empty placeholder to make browser valida
     </div>
 </form>
 
+## Alerts
+
+<div class="alert alert--info">
+    <p>
+        <strong class="alert__title">Great to hear from  you!</strong>
+        We’ll get in touch soon.
+    </p>
+</div>
+
+<div class="alert alert--success">
+    <p>
+        <strong class="alert__title">Great to hear from  you!</strong>
+        We’ll get in touch soon.
+    </p>
+</div>
+
+<div class="alert alert--danger">
+    <p>
+        <strong class="alert__title">Oops, there was an error</strong>
+        Would you mind trying again?
+    </p>
+</div>
+
 ## Section header
 
 <header class="section__header">