Docs(web): Add Pill demo #DS-904

- Pill demo in web is now same as demo-react in web and web-twig
lmc-eu · Sep 18, 2023 · 3b96db5 · 3b96db5
1 parent 5eeedf3
commit 3b96db5
Showing 1 changed file with 32 additions and 16 deletions.
diff --git a/packages/web/src/scss/components/Pill/index.html b/packages/web/src/scss/components/Pill/index.html
@@ -1,20 +1,36 @@
 {{#> layout/plain }}
 
-<div class="mb-500">
-  <span class="Pill Pill--primary">3</span>
-  <span class="Pill Pill--secondary">3</span>
-  <span class="Pill Pill--tertiary">3</span>
-  <span class="Pill Pill--inverted">3</span>
-</div>
-<div class="mb-500">
-  <span class="Pill Pill--selected">333</span>
-  <span class="Pill Pill--unselected">333</span>
-</div>
-<div>
-  <span class="Pill Pill--success">3</span>
-  <span class="Pill Pill--informative">3</span>
-  <span class="Pill Pill--warning">3</span>
-  <span class="Pill Pill--danger">3</span>
-</div>
+<section class="docs-Section">
+
+  <h2 class="docs-Heading">Colors</h2>
+
+  <div class="docs-Stack docs-Stack--start">
+
+    <span class="Pill Pill--primary">3</span>
+    <span class="Pill Pill--secondary">3</span>
+    <span class="Pill Pill--tertiary">3</span>
+    <span class="Pill Pill--inverted">3</span>
+    <span class="Pill Pill--selected">3</span>
+    <span class="Pill Pill--unselected">3</span>
+    <span class="Pill Pill--success">3</span>
+    <span class="Pill Pill--informative">3</span>
+    <span class="Pill Pill--warning">3</span>
+    <span class="Pill Pill--danger">3</span>
+
+  </div>
+
+</section>
+
+<section class="docs-Section">
+
+  <h2 class="docs-Heading">Long Text</h2>
+
+  <div class="docs-Stack docs-Stack--start">
+
+    <span class="Pill Pill--selected">333</span>
+
+  </div>
+
+</section>
 
 {{/layout/plain }}