divider jekyll element added (#409)

divider jekyll element added

pages/_docs/divider.md

@@ -6,20 +6,34 @@ done: true
 
 ### Default markup
 
-{% example html max-width=300 %}
-<p>
-  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequatur maxime quia reprehenderit tempore? 
-</p>
-<div class="hr-text">Left divider</div>
+{% example html columns=1 %}
 <p>
   Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
 </p>
-<div class="hr-text hr-text-center">Centered divider</div>
+{% include ui/hr.html text="Left divider" %}
 <p>
   Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
 </p>
-<div class="hr-text hr-text-right">Right divider</div>
+{% include ui/hr.html text="Centered divider" position="center" %}
+<p>
+  Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
+</p>
+{% include ui/hr.html text="Right divider" position="right" %}
 <p>
   Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
 </p>
 {% endexample %}
+
+### Divider color
+
+Customize the color of the divider. You can click [here]({% docs_url colors %}) to see the list of available colors.
+
+{% example html columns=1 %}
+<p>
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.
+</p>
+{% include ui/hr.html text="Green divider" color="green" %}
+<p>
+   Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
+</p>
+{% endexample %}

pages/_includes/ui/hr.html

@@ -0,0 +1 @@
+<div class="hr-text{% if include.position %} hr-text-{{ include.position | downcase }}{% endif %}{% if include.color %} text-{{ include.color }}{% endif %}">{{ include.text | default: 'Label' }}</div>