added blurb circle

Author: shadowcodex

_data/components.json

@@ -83,5 +83,10 @@
         "title": "Blurb List",
         "permalink": "components/blurb-list",
         "image": "imgs/blurb-list.png"
+    },
+    {
+        "title": "Blurb Circle",
+        "permalink": "components/blurb-circle",
+        "image": "imgs/blurb-circle.png"
     }
 ]

components/blurb-circle.html

@@ -0,0 +1,54 @@
+---
+title: 'Blurb Circle'
+description: 'A feature or details component. (horizontal blurb with circle icon)'
+permalink: '/components/blurb-circle/'
+layout: component
+---
+<p>Font Awesome Required for icons in form</p>
+<p>Code:</p>
+{% highlight html %}
+<link rel="stylesheet" href="../../css/font-awesome.min.css">
+{% endhighlight %}
+<hr>
+<br>
+<link rel="stylesheet" href="../../css/font-awesome.min.css">
+<div class="row justify-content-md-center">
+    <div class="col-md-4 col-lg-4 col-xl-4">
+        <!-- Start Blurb -->
+        <div class="row">
+            <div class="col-3">
+                <div class="rounded-circle bg-primary text-white">
+                    <i class="fa fa-check fa-2x ml-3 mt-3 mr-3 mb-3" aria-hidden="true"></i>
+                </div>                
+            </div>
+            <div class="col-9">
+                <strong>A Catchy Title</strong><br>
+                Phasellus ultrices sem faucibus, dapibus sem at, ornare quam.
+            </div>
+        </div>
+        <!-- End Blurb -->
+    </div>
+</div>
+<br>
+<p>Code:</p>
+{% highlight html %}
+<div class="row justify-content-md-center">
+        <div class="col-md-4 col-lg-4 col-xl-4">
+            <!-- Start Blurb -->
+            <div class="row">
+                <div class="col-3">
+                    <div class="rounded-circle bg-primary text-white">
+                        <i class="fa fa-check fa-2x ml-3 mt-3 mr-3 mb-3" aria-hidden="true"></i>
+                    </div>                
+                </div>
+                <div class="col-9">
+                    <strong>A Catchy Title</strong><br>
+                    Phasellus ultrices sem faucibus, dapibus sem at, ornare quam.
+                </div>
+            </div>
+            <!-- End Blurb -->
+        </div>
+    </div>
+{% endhighlight %}
+<hr>
+<br>