Update labels docs to Pug template

1 files changed, 32 insertions, 0 deletions

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