Update labels docs to Pug template

2 files changed, 49 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>
diff --git a/docs/src/contents/labels.pug b/docs/src/contents/labels.pug
index e69de29..2d55412 100644
--- a/docs/src/contents/labels.pug
+++ b/docs/src/contents/labels.pug
@@ -0,0 +1,32 @@
+p Labels are formatted text tags for highlighted, informative information.
+
+.columns
+  .column
+    span.label.mr-1 default label
+    span.label.label-primary.mr-1 primary label
+    span.label.label-secondary.mr-1 secondary label
+    span.label.label-success.mr-1 success label
+    span.label.label-warning.mr-1 warning label
+    span.label.label-error error label
+  
+p
+  | Add the #[code label] class to #{'<span>'} or #{'<small>'} elements.
+  | You can add another class #[code label-primary], #[code label-secondary], #[code label-success], #[code label-warning] and #[code label-error] for colored labels.
+
+.columns
+  .column
+    span.label.label-rounded.mr-1 default label
+    span.label.label-rounded.label-primary primary label
+
+p
+  | Add the #[code label-rounded] class to have rounded labels.
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      <!-- normal labels -->
+      <span class="label">default label</span>
+      <span class="label label-primary">primary label</span>
+
+      <!-- rounded labels -->
+      <span class="label label-rounded label-primary">primary label</span>
\ No newline at end of file