Update old docs to new Pug templates

1 files changed, 44 insertions, 0 deletions

diff --git a/docs/src/contents/chips.pug b/docs/src/contents/chips.pug
new file mode 100644
index 0000000..ff02780
--- /dev/null
+++ b/docs/src/contents/chips.pug
@@ -0,0 +1,44 @@
+p Chips are complex entities in small blocks. 
+
+.columns
+  .column.col-12
+    span.chip
+      | Crime
+    span.chip
+      | Drama
+    span.chip
+      | Biography
+      a.btn.btn-clear(href="#" aria-label="Close" role="button")
+    span.chip
+      | Mystery
+      a.btn.btn-clear(href="#" aria-label="Close" role="button")
+  .column.col-12
+    .chip
+      figure.avatar.avatar-sm(data-initial="TS" style="background-color: #5755d9;")
+      | Tony Stark
+    .chip
+      img.avatar.avatar-sm(src="img/avatar-1.png" alt="Thor Odinson")
+      | Thor Odinson
+    .chip
+      img.avatar.avatar-sm(src="img/avatar-4.png" alt="Steve Rogers")
+      | Steve Rogers
+
+p
+  | Add a container element with the #[code chip] class.
+  | And add child text element, buttons or avatars with the #[code avatar] class.
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      <span class="chip">Crime</span>
+  
+      <span class="chip">
+        Biography
+        <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a>
+      </span>
+
+      <div class="chip">
+        <img src="img/avatar-1.png" class="avatar avatar-sm">
+        Yan Zhu
+        <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a>
+      </div>
\ No newline at end of file