divider fixes, documentation

pages/_docs/alerts.md

 ---
 title: Alerts
 menu: docs.alerts
+done: true
 ---
 
 Bootstrap provides an easy way to create predefined alert messages.
 
-## Default markup
+### Default markup
 
 {% example %}
 {% for variant in site.variants %}
@@ -17,7 +18,7 @@ Bootstrap provides an easy way to create predefined alert messages.
 {% endexample %}
 
 
-## Alert Links
+### Alert Links
 
 Add the `alert-link` class to any links inside the alert box to create "matching colored links":
 
@@ -31,7 +32,7 @@ Add the `alert-link` class to any links inside the alert box to create "matching
 {% endexample %}
 
 
-## Dismissible Alerts
+### Dismissible Alerts
 
 {% example %}
 {% for variant in site.variants %}
@@ -42,7 +43,7 @@ Add the `alert-link` class to any links inside the alert box to create "matching
 {% endfor %}
 {% endexample %}
 
-## Alerts with icons
+### Alerts with icons
 
 {% example %}
 {% for variant in site.variants %}
@@ -53,7 +54,7 @@ Add the `alert-link` class to any links inside the alert box to create "matching
 {% endfor %}
 {% endexample %}
 
-## Alert with avatar
+### Alert with avatar
 {% assign person = site.data.people[1] %}
 {% example %}
 {% for variant in site.variants %}
@@ -64,7 +65,7 @@ Add the `alert-link` class to any links inside the alert box to create "matching
 {% endfor %}
 {% endexample %}
 
-## Alert with buttons
+### Alert with buttons
 {% example %}
  {% capture variant-text %}
  	<h3>Some Title</h3>

pages/_docs/autosize.md

 ---
 title: Autosize
+done: true
 ---
 
 A small, stand-alone script to automatically adjust textarea height.

pages/_docs/avatars.md

 ---
 title: Avatars
 menu: docs.avatars
+done: true
 ---
 
 Create and group avatars of various shapes and sizes with one component.
 
-## Default markup
+### Default markup
 
 {% example html wrapper=avatar-list %}
 {% include ui/avatar.html person-id=1 %}
@@ -13,7 +14,7 @@ Create and group avatars of various shapes and sizes with one component.
 {% include ui/avatar.html person-id=3 %}
 {% endexample %}
 
-## Avatar size
+### Avatar size
 
 Using Bootstrap’s typical naming structure, you can create a standard avatar, or scale it up to different sizes based on what’s needed.
 
@@ -25,7 +26,7 @@ Using Bootstrap’s typical naming structure, you can create a standard avatar,
 {% include ui/avatar.html person-id=6 size="sm" %}
 {% endexample %}
 
-## Avatar status
+### Avatar status
 
 Add an online or offline status indicator to show user's availability.
 
@@ -38,7 +39,7 @@ Add an online or offline status indicator to show user's availability.
 {% include ui/avatar.html person-id=16 status="gray" status-text="5" %}
 {% endexample %}
 
-## Avatar shape
+### Avatar shape
 
 Change the shape of an avatar with the default Bootstrap image classes.
 
@@ -50,7 +51,7 @@ Change the shape of an avatar with the default Bootstrap image classes.
 {% include ui/avatar.html person-id=21 shape="rounded-lg" %}
 {% endexample %}
 
-## Initials
+### Initials
 
 {% example html wrapper=avatar-list %}
 {% include ui/avatar.html placeholder="AB" size="xl" %}
@@ -61,7 +62,7 @@ Change the shape of an avatar with the default Bootstrap image classes.
 {% endexample %}
 
 
-## Avatar initials color
+### Avatar initials color
 
 [See more]({% docs_url colors %})
 
@@ -73,7 +74,7 @@ Change the shape of an avatar with the default Bootstrap image classes.
 {% include ui/avatar.html placeholder="IJ" color="purple" %}
 {% endexample %}
 
-## Avatar initials icons
+### Avatar initials icons
 
 {% example html wrapper=avatar-list %}
 {% include ui/avatar.html icon="user" %}
@@ -81,7 +82,7 @@ Change the shape of an avatar with the default Bootstrap image classes.
 {% include ui/avatar.html icon="user-plus" %}
 {% endexample %}
 
-## Avatars list
+### Avatars list
 
 {% example %}
 <div class="avatar-list">

pages/_docs/badges.md

 ---
 title: Badges
 menu: docs.badges
+done: true
 ---
 
 A small count and labeling component. Please read the [official Bootstrap documentation](https://getbootstrap.com/docs/4.3/components/badge/) for a full list of options.

pages/_docs/divider.md

 ---
 title: Divider
+description: A divider visually segments content into groups
 ---
 
-{% example html %}
+### Default markup
+
+{% example html max-width=300 %}
 <p>
-  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequatur maxime quia reprehenderit tempore? Aliquid atque deserunt dolore explicabo in, itaque laborum magnam minus odio placeat quibusdam reiciendis rem voluptatibus?
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequatur maxime quia reprehenderit tempore? 
 </p>
 <h6 class="divider">OR</h6>
 <p>
-  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit! Aspernatur aut explicabo labore odit quisquam?
+  Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
 </p>
 {% endexample %}

pages/_docs/toasts.md

 ---
 title: Toasts
 menu: docs.toasts
+description: The toast component is like an alert box that is only shown for a couple of seconds when something happens (i.e. when the user clicks on a button, submits a form, etc.).
 ---
 
-The toast component is like an alert box that is only shown for a couple of seconds when something happens (i.e. when the user clicks on a button, submits a form, etc.).
 
-## Default markup
+
+### Default markup
 
 {% example %}
 {% include ui/toast.html %}

pages/_docs/tooltips.md

 ---
 title: Tooltips
 menu: docs.tooltips
+description: The Tooltip component is small pop-up box that appears when the user moves the mouse pointer over an element.
 ---
 
-The Tooltip component is small pop-up box that appears when the user moves the mouse pointer over an element:
-
-
-## Default markup
+### Default markup
 
 {% example html wrapper=btn-list %}
 <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
@@ -23,7 +21,7 @@ The Tooltip component is small pop-up box that appears when the user moves the m
 </button>
 {% endexample %}
 
-## Tooltip with HTML
+### Tooltip with HTML
 
 {% example html wrapper=btn-list %}
 <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">

pages/_layouts/docs.html

@@ -26,7 +26,7 @@ page-title: Documentation
 			<div class="card-body p-lg-8">
 
 				<div class="markdown">
-					<h2 class="h1 mt-0 mb-4">{{ page.title }}{% if page.done %} {% include ui/icon.html icon="check" color="green" %}{% endif %}</h2>
+					<h2 class="mt-0 mb-4">{{ page.title }}{% if page.done %} {% include ui/icon.html icon="check" color="green" %}{% endif %}</h2>
 
 					{% if page.description %}
 					<p>{{ page.description }}</p>

pages/_plugins/jekyll-example.rb

@@ -5,7 +5,7 @@ module Jekyll
     class ExampleBlock < Liquid::Block
       include Liquid::StandardFilters
 
-      SYNTAX = /^([a-zA-Z0-9.+#-]+)((\s+\w+(=((\w|[0-9_-])+|"([0-9]+\s)*[0-9]+"))?)*)$/
+      SYNTAX = /^([a-zA-Z0-9.+#-]+)((\s+[\w-]+(=((\w|[0-9_-])+|"([0-9]+\s)*[0-9]+"))?)*)$/
 
       def initialize(tag_name, markup, tokens)
         super
@@ -18,7 +18,7 @@ module Jekyll
           @options = {}
           if defined?($2) && $2 != ''
             # Split along 3 possible forms -- key="<quoted list>", key=value, or key
-            $2.scan(/(?:\w+(?:=(?:(?:\w|[0-9_-])+|"[^"]*")?)?)/) do |opt|
+            $2.scan(/(?:[\w-]+(?:=(?:(?:\w|[0-9_-])+|"[^"]*")?)?)/) do |opt|
               key, value = opt.split('=')
               # If a quoted list, convert to array
               if value && value.include?("\"")
@@ -60,7 +60,7 @@ Valid syntax: example <lang> [id=foo]
       def example(output)
         output = output.gsub(/<hide>/, "").gsub(/<\/hide>/, "")
 
-        "<div class=\"example" + (@options[:columns] ? " example-bg" : "") + "\"" + (@options[:id] ? " data-example-id=\"#{@options[:id]}\"" : "") + ">\n" + (@options[:columns] ? "<div class=\"example-column example-column-" + @options[:columns] + "\">\n" : "") + (@options[:wrapper] ? "<div class=\"" + @options[:wrapper] + "\">\n" : "") + "#{output}" + (@options[:wrapper] ? "\n</div>" : "") + (@options[:columns] ? "\n</div>" : "") + "\n</div>"
+        "<div class=\"example" + (@options[:columns] ? " example-bg" : "") + "\"" + (@options[:id] ? " data-example-id=\"#{@options[:id]}\"" : "") + ">\n" + (@options[:columns] ? "<div class=\"example-column example-column-" + @options[:columns] + "\">\n" : "") + (@options[:wrapper] ? "<div class=\"" + @options[:wrapper] + "\">\n" : "") + (@options[:"max-width"] ? "<div style=\"max-width: " + @options[:"max-width"] + "px; margin: 0 auto;\">\n" : "") + "#{output}" + (@options[:wrapper] ? "\n</div>" : "") + (@options[:columns] ? "\n</div>" : "") + (@options[:"max-width"] ? "\n</div>" : "") + "\n</div>"
       end
 
       def remove_example_classes(code)

scss/ui/_lists.scss

@@ -17,7 +17,6 @@
 .list-timeline-time {
   float: right;
   margin-left: 1rem;
-  font-style: italic;
   color: $text-muted;
 }
 

scss/ui/_typo.scss

@@ -101,10 +101,11 @@ Divider
   flex: 0;
   align-items: center;
   width: 100%;
-  margin: 2rem auto;
+  margin: 1.5rem auto;
   font-size: $h6-font-size;
   color: $text-muted;
   letter-spacing: .5px;
+  font-weight: 400;
 
   &::before,
   &::after {