Add vertical divider

1 files changed, 48 insertions, 1 deletions

diff --git a/docs/utilities.html b/docs/utilities.html
index e70372a..96eec15 100644
--- a/docs/utilities.html
+++ b/docs/utilities.html
@@ -206,13 +206,60 @@
             </div>
           </div>
 
+          <div class="columns">
+            <div class="column">
+              <form class="bg-gray">
+                <div class="form-group">
+                  <label class="form-label" for="input-example-1">Email</label>
+                  <input class="form-input" type="text" id="input-example-1" placeholder="Email" />
+                </div>
+                <div class="form-group">
+                  <label class="form-label" for="input-example-2">Password</label>
+                  <input class="form-input" type="password" id="input-example-2" placeholder="Password" />
+                </div>
+                <div class="form-group">
+                  <label class="form-checkbox">
+                    <input type="checkbox" />
+                    <i class="form-icon"></i> Remember me
+                  </label>
+                </div>
+                <div class="form-group">
+                  <button class="btn btn-primary">Sign in</button>
+                </div>
+              </form>
+            </div>
+            <div class="divider-vert" data-content="OR"></div>
+            <div class="column">
+              <form class="bg-gray">
+                <div class="form-group">
+                  <label class="form-label" for="input-example-3">Email</label>
+                  <input class="form-input" type="text" id="input-example-3" placeholder="Email" />
+                </div>
+                <div class="form-group">
+                  <button class="btn btn-primary btn-block">Sign up</button>
+                  <button class="btn btn-link btn-block">Learn more</button>
+                </div>
+              </form>
+            </div>
+          </div>
+
 <!-- shape utilities example -->
 <pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- divider element --&gt;</span>
 &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;divider&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
 <span class="com">&lt;!-- divider element with text --&gt;</span>
 &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;divider text-center&quot;</span> <span class="atn">data-content</span>=<span class="atv">&quot;OR&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-</code></pre>
 
+<span class="com">&lt;!-- vertical divider element with text --&gt;</span>
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;columns&quot;</span>&gt;
+  &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;column&quot;</span>&gt;
+    <span class="com">&lt;!-- column content --&gt;</span>
+  &lt;<span class="tag">/div</span>&gt;
+  &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;divider-vert&quot;</span> <span class="atn">data-content</span>=<span class="atv">&quot;OR&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
+  &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;column&quot;</span>&gt;
+    <span class="com">&lt;!-- column content --&gt;</span>
+  &lt;<span class="tag">/div</span>&gt;
+&lt;<span class="tag">/div</span>&gt;
+</code></pre>
         </section>
 
         <section id="loading" class="container">