Feature/callout documentation

_config.yml

@@ -150,6 +150,8 @@ defaults:
         title: Navigation
       - folder: calendar-table
         title: Calendar table
+      - folder: callouts
+        title: Callouts
 
 - scope: # TEMPLATES CATEGORY
     path: _templates

_patterns/callouts/callout-guidance.md

@@ -0,0 +1,8 @@
+{% assign ID = "callouts" %}
+
+{% capture content %}
+- You can use these classes on paragraphs or a wrapping element, like an `<aside>` or a `<div>`.
+- Use the `.callout--calendar` to highlight an important date, but use the [Calendar table pattern](/patterns/calendar-table) for a table of dates.
+{% endcapture %}
+
+{% include guidance.liquid  content = content  ID = ID %}

_patterns/callouts/index.md

@@ -0,0 +1,14 @@
+---
+layout: collections/item
+title: Callouts
+section: Callouts
+sections:
+  - headline: Callouts
+  - code:
+    - scss: assets/sass/components/_typogaphy
+    - markup: callouts-examples
+  - md: Callout guidance
+---
+
+Use callouts to notify and alert users of important snippets of information.
+{: .abstract }

_patterns/index.md

@@ -8,5 +8,6 @@ layout: collections/overview
 Guidance on:
 - using site, local and contents navigation
 - tables for showing date information.
+- alerts and callouts
 
 We are working on more patterns.