From d1e3507b165b44217df73f7f682bbd765387539f Mon Sep 17 00:00:00 2001
From: madrilene <hola@lenesaile.com>
Date: Fri, 29 Nov 2024 18:10:37 +0100
Subject: [PATCH] document button styling

---
 src/docs/card.njk        |  7 ++++---
 src/pages/styleguide.njk | 28 ++++++++++++++++++++++++++++
 2 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/src/docs/card.njk b/src/docs/card.njk
index 1ca75cb..4996337 100644
--- a/src/docs/card.njk
+++ b/src/docs/card.njk
@@ -39,7 +39,7 @@ title: Card
   &lt;custom-card&gt;
 	{% image "path-to-img", "alt-text" %}
 	&lt;span slot="date"&gt;&lt;/span&gt;
-	&lt;span slot="tag" class="button post-tag"&gt;&lt;/span&gt;
+	&lt;span slot="tag" class="button"&gt;&lt;/span&gt;
 	&lt;h2 slot="headline"&gt;&lt;/h2&gt;
 	&lt;p slot="content"&gt;&lt;/p&gt;
 	&lt;footer slot="footer"&gt;&lt;/footer&gt;
@@ -52,7 +52,7 @@ title: Card
   <custom-card>
     {% image "./src/assets/images/gallery/asturias-3.jpg", "Close-up of a delicate white flower with a yellow center, surrounded by green leaves" %}
     <span slot="date">1516</span>
-    <span slot="tag" class="button post-tag">Default</span>
+    <span slot="tag" class="button" data-small-button>Default</span>
     <h2 slot="headline">Utopia</h2>
     <p slot="content">
       Among them, there is no sort of traffic, no knowledge of letters, no understanding of numbers, no name
@@ -66,7 +66,8 @@ title: Card
     {% image "./src/assets/images/gallery/asturias-3.jpg", "Close-up of a delicate white flower with a yellow center, surrounded by green leaves" %}
     <span slot="date">18.02.1984</span>
     <div slot="tag" webc:nokeep>
-      <span class="button post-tag">clickable</span><span class="button post-tag">square image</span>
+      <span class="button" data-small-button>clickable</span
+      ><span class="button" data-small-button>square image</span>
     </div>
     <footer slot="footer"><a href="#">Link in the footer makes whole card a link</a></footer>
     <h2 slot="headline">The order does not matter</h2>
diff --git a/src/pages/styleguide.njk b/src/pages/styleguide.njk
index 32eb056..7a2d534 100644
--- a/src/pages/styleguide.njk
+++ b/src/pages/styleguide.njk
@@ -30,6 +30,34 @@ customGradients:
     </p>
   </header>
 
+  <section class="flow region region-space-m">
+    <h2 class="heading-line">Buttons</h2>
+    <ul class="cluster" role="list">
+      <li>
+        <a href="#" class="button">Default button</a>
+      </li>
+      <li>
+        <a href="#" class="button" data-button-variant="primary">blue button</a>
+      </li>
+      <li>
+        <a href="#" class="button" data-button-variant="secondary">red button</a>
+      </li>
+      <li>
+        <a href="#" class="button" data-button-variant="tertiary">yellow button</a>
+      </li>
+
+      <li>
+        <a href="#" class="button" data-ghost-button>Ghost button</a>
+      </li>
+      <li>
+        <a href="#" class="button" data-button-radius="hard">Hard edges</a>
+      </li>
+      <li>
+        <a href="#" class="button"> {% svg "misc/star" %} Button with icon </a>
+      </li>
+    </ul>
+  </section>
+
   <div class="full colors | section">
     <section class="section__inner wrapper flow region">
       <h2 class="heading-line">Colors</h2>