From 7b7265347ccac7275d693fdffb0e9a35cf187752 Mon Sep 17 00:00:00 2001
From: BG-Software <73077398+BG-Software-BG@users.noreply.github.com>
Date: Sun, 4 May 2025 12:59:19 +0200
Subject: [PATCH] Fix ribbon component in the documentation (#2323)

---
 .changeset/new-rats-argue.md          |  5 +++
 docs/content/ui/components/ribbons.md | 55 ++-------------------------
 2 files changed, 9 insertions(+), 51 deletions(-)
 create mode 100644 .changeset/new-rats-argue.md

diff --git a/.changeset/new-rats-argue.md b/.changeset/new-rats-argue.md
new file mode 100644
index 000000000..2e33170ea
--- /dev/null
+++ b/.changeset/new-rats-argue.md
@@ -0,0 +1,5 @@
+---
+"@tabler/docs": patch
+---
+
+Fix ribbon component in the documentation
diff --git a/docs/content/ui/components/ribbons.md b/docs/content/ui/components/ribbons.md
index cdd553302..d2d6f8549 100644
--- a/docs/content/ui/components/ribbons.md
+++ b/docs/content/ui/components/ribbons.md
@@ -18,15 +18,6 @@ Use the `ribbon` class to add the default ribbon to any section of your interfac
 {%- endcapture %}
 {% include "docs/example.html" html=html card column %}
 
-```html
-<div class="card">
-  <div class="card-body"></div>
-  <div class="ribbon">
-    {% include "ui/icon.html" icon="star" %}
-  </div>
-</div>
-```
-
 ## Ribbon position
 
 You can change the position of a ribbon by adding one of the following classes to the element:
@@ -48,18 +39,9 @@ Using multiple classes at once will give you more position options. For example,
 {%- endcapture %}
 {% include "docs/example.html" html=html column %}
 
-```html
-<div class="card">
-  <div class="card-body"></div>
-  <div class="ribbon ribbon-top ribbon-start">
-    {% include "ui/icon.html" icon="star" %}
-  </div>
-</div>
-```
-
 ## Ribbon color
 
-Customize the ribbon's background color. You can click [here](/img/ui/base/colors) to see the list of available colors.
+Customize the ribbon's background color. You can click [here](/ui/base/colors) to see the list of available colors.
 
 {% capture html -%}
 <div class="card">
@@ -71,15 +53,6 @@ Customize the ribbon's background color. You can click [here](/img/ui/base/color
 {%- endcapture %}
 {% include "docs/example.html" html=html column %}
 
-```html
-<div class="card">
-  <div class="card-body"></div>
-  <div class="ribbon bg-red">
-    {% include "ui/icon.html" icon="star" %}
-  </div>
-</div>
-```
-
 ## Ribbon text
 
 Add your own text to a ribbon to display any additional information and make it easy to spot for users.
@@ -87,25 +60,14 @@ Add your own text to a ribbon to display any additional information and make it
 {% capture html -%}
 <div class="card">
   <div class="card-body" style="height: 5rem"></div>
-  <div class="ribbon bg-green">
-    {% include "ui/icon.html" icon="star" %}
-  </div>
+  <div class="ribbon bg-green">NEW</div>
 </div>
 {%- endcapture %}
 {% include "docs/example.html" html=html column %}
 
-```html
-<div class="card">
-  <div class="card-body"></div>
-  <div class="ribbon bg-green">
-    {% include "ui/icon.html" icon="star" %}
-  </div>
-</div>
-```
+## Bookmark ribbon
 
-## Ribbon style
-
-Change the style of a ribbon to make it go well with your interface design.
+Use the `.ribbon-bookmark` class to create a bookmark ribbon. It is a special style of ribbon that is used to highlight important elements in your interface.
 
 {% capture html -%}
 <div class="card w-100">
@@ -116,12 +78,3 @@ Change the style of a ribbon to make it go well with your interface design.
 </div>
 {%- endcapture %}
 {% include "docs/example.html" html=html column %}
-
-```html
-<div class="card">
-  <div class="card-body"></div>
-  <div class="ribbon ribbon-bookmark bg-orange">
-    {% include "ui/icon.html" icon="star" %}
-  </div>
-</div>
-```