Update labels docs to Pug template

1 files changed, 17 insertions, 0 deletions

diff --git a/docs/elements.html b/docs/elements.html
index f971860..ae803f4 100644
--- a/docs/elements.html
+++ b/docs/elements.html
@@ -1213,6 +1213,23 @@
           </div>
           <div class="container">
             <h3 class="s-title" id="labels"><a class="anchor" href="#labels" aria-hidden="true">#</a>Labels</h3>
+            <p>Labels are formatted text tags for highlighted, informative information.</p>
+            <div class="columns">
+              <div class="column"><span class="label mr-1">default label</span><span class="label label-primary mr-1">primary label</span><span class="label label-secondary mr-1">secondary label</span><span class="label label-success mr-1">success label</span><span class="label label-warning mr-1">warning label</span><span class="label label-error">error label</span></div>
+            </div>
+            <p>Add the <code>label</code> class to &lt;span&gt; or &lt;small&gt; elements.
+              You can add another class <code>label-primary</code>, <code>label-secondary</code>, <code>label-success</code>, <code>label-warning</code> and <code>label-error</code> for colored labels.
+            </p>
+            <div class="columns">
+              <div class="column"><span class="label label-rounded mr-1">default label</span><span class="label label-rounded label-primary">primary label</span></div>
+            </div>
+            <p>Add the <code>label-rounded</code> class to have rounded labels.</p>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- normal labels --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"label"</span>&gt;</span>default label<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"label label-primary"</span>&gt;</span>primary label<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
+
+<span class="hljs-comment">&lt;!-- rounded labels --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"label label-rounded label-primary"</span>&gt;</span>primary label<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span></code></pre>
           </div>
           <div class="container">
             <h3 class="s-title" id="codes"><a class="anchor" href="#codes" aria-hidden="true">#</a>Codes</h3>