Update old docs to new Pug templates

1 files changed, 47 insertions, 0 deletions

diff --git a/docs/src/contents/steps.pug b/docs/src/contents/steps.pug
new file mode 100644
index 0000000..5cf8b84
--- /dev/null
+++ b/docs/src/contents/steps.pug
@@ -0,0 +1,47 @@
+p Steps are progress indicators of a sequence of task steps.
+
+.columns
+  .column.col-12
+    ul.step
+      li.step-item
+        a.tooltip(href="#steps" data-tooltip="Step 1 Tooltip")
+      li.step-item.active
+        a.tooltip(href="#steps" data-tooltip="Step 2 Tooltip")
+      li.step-item
+        a.tooltip(href="#steps" data-tooltip="Step 3 Tooltip")
+      li.step-item
+        a.tooltip(href="#steps" data-tooltip="Step 4 Tooltip")
+  .column.col-12
+    ul.step
+      li.step-item
+        a.tooltip(href="#steps" data-tooltip="Step 1 Tooltip") Step 1
+      li.step-item
+        a.tooltip(href="#steps" data-tooltip="Step 2 Tooltip") Step 2
+      li.step-item.active
+        a.tooltip(href="#steps" data-tooltip="Step 3 Tooltip") Step 3
+      li.step-item
+        a.tooltip(href="#steps" data-tooltip="Step 4 Tooltip") Step 4
+
+p
+  | Add a container element with the #[code step] class.
+  | And add child elements with the #[code step-item] class.
+  | The #[code step-item] with the #[code active] class will be highlighted and indicate the current state of progress.
+  
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      <ul class="step">
+        <li class="step-item">
+          <a href="#" class="tooltip" data-tooltip="Step 1">Step 1</a>
+        </li>
+        <li class="step-item active">
+          <a href="#" class="tooltip" data-tooltip="Step 2">Step 2</a>
+        </li>
+        <li class="step-item">
+          <a href="#" class="tooltip" data-tooltip="Step 3">Step 3</a>
+        </li>
+        <li class="step-item">
+          <a href="#" class="tooltip" data-tooltip="Step 4">Step 4</a>
+        </li>
+      </ul>
+