From 6f96282f3ca7099b0461cf2fc3377f24cb182743 Mon Sep 17 00:00:00 2001
From: Bartosz-Do <xbartoszdobija@gmail.com>
Date: Sat, 12 Sep 2026 18:10:29 +0200
Subject: [PATCH] Show diagonal pattern on the card background-pattern docs
 example (#3039)

Closes #3032
---
 .../fix-background-pattern-docs-example.md    |   5 +
 .../ui/utilities/background-patterns.mdx      | 104 +++++++++---------
 2 files changed, 57 insertions(+), 52 deletions(-)
 create mode 100644 .changeset/fix-background-pattern-docs-example.md

diff --git a/.changeset/fix-background-pattern-docs-example.md b/.changeset/fix-background-pattern-docs-example.md
new file mode 100644
index 000000000..56b4f3310
--- /dev/null
+++ b/.changeset/fix-background-pattern-docs-example.md
@@ -0,0 +1,5 @@
+---
+"@tabler/docs": patch
+---
+
+Fixed the "Card on a background pattern" docs example so the preview shows the `.bg-pattern-diagonal` background.
diff --git a/docs/content/ui/utilities/background-patterns.mdx b/docs/content/ui/utilities/background-patterns.mdx
index 5004f4673..7ca15f0e2 100644
--- a/docs/content/ui/utilities/background-patterns.mdx
+++ b/docs/content/ui/utilities/background-patterns.mdx
@@ -81,7 +81,7 @@ Use `.bg-pattern-transparent` when you need a checkerboard-style transparent bac
   <Illustration image="boy-with-key.svg" class="d-block mx-auto mw-100" height={200} />
 </Example>
 <Example codeOnly>
-<div class="bg-pattern-transparent p-4"></div>
+  <div class="bg-pattern-transparent p-4"></div>
 </Example>
 
 ## Pattern sizes
@@ -96,30 +96,30 @@ Use size utilities to control pattern density:
 Look at the following examples to see how the pattern sizes work:
 
 <Example hideCode>
-<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-4 g-3">
-  <div class="col">
-    <div class="bg-pattern-circles bg-pattern-sm border rounded mb-2" style="height: 6rem;"></div>
-    <code>.bg-pattern-sm</code>
+  <div class="row row-cols-1 row-cols-sm-2 row-cols-lg-4 g-3">
+    <div class="col">
+      <div class="bg-pattern-circles bg-pattern-sm border rounded mb-2" style="height: 6rem;"></div>
+      <code>.bg-pattern-sm</code>
+    </div>
+    <div class="col">
+      <div class="bg-pattern-circles bg-pattern-md border rounded mb-2" style="height: 6rem;"></div>
+      <code>.bg-pattern-md</code>
+    </div>
+    <div class="col">
+      <div class="bg-pattern-circles bg-pattern-lg border rounded mb-2" style="height: 6rem;"></div>
+      <code>.bg-pattern-lg</code>
+    </div>
+    <div class="col">
+      <div class="bg-pattern-circles bg-pattern-xl border rounded mb-2" style="height: 6rem;"></div>
+      <code>.bg-pattern-xl</code>
+    </div>
   </div>
-  <div class="col">
-    <div class="bg-pattern-circles bg-pattern-md border rounded mb-2" style="height: 6rem;"></div>
-    <code>.bg-pattern-md</code>
-  </div>
-  <div class="col">
-    <div class="bg-pattern-circles bg-pattern-lg border rounded mb-2" style="height: 6rem;"></div>
-    <code>.bg-pattern-lg</code>
-  </div>
-  <div class="col">
-    <div class="bg-pattern-circles bg-pattern-xl border rounded mb-2" style="height: 6rem;"></div>
-    <code>.bg-pattern-xl</code>
-  </div>
-</div>
 </Example>
 <Example codeOnly>
-<div class="bg-pattern-circles bg-pattern-sm"></div>
-<div class="bg-pattern-circles bg-pattern-md"></div>
-<div class="bg-pattern-circles bg-pattern-lg"></div>
-<div class="bg-pattern-circles bg-pattern-xl"></div>
+  <div class="bg-pattern-circles bg-pattern-sm"></div>
+  <div class="bg-pattern-circles bg-pattern-md"></div>
+  <div class="bg-pattern-circles bg-pattern-lg"></div>
+  <div class="bg-pattern-circles bg-pattern-xl"></div>
 </Example>
 
 ## Pattern opacity
@@ -132,49 +132,49 @@ Use opacity utilities to control how strong the texture is:
 - `.bg-pattern-opacity-darker`
 
 <Example hideCode>
-<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-4 g-3">
-  <div class="col">
-    <div class="bg-pattern-circles bg-pattern-opacity-lighter border rounded mb-2" style="height: 6rem;"></div>
-    <code>.bg-pattern-opacity-lighter</code>
+  <div class="row row-cols-1 row-cols-sm-2 row-cols-lg-4 g-3">
+    <div class="col">
+      <div class="bg-pattern-circles bg-pattern-opacity-lighter border rounded mb-2" style="height: 6rem;"></div>
+      <code>.bg-pattern-opacity-lighter</code>
+    </div>
+    <div class="col">
+      <div class="bg-pattern-circles bg-pattern-opacity-light border rounded mb-2" style="height: 6rem;"></div>
+      <code>.bg-pattern-opacity-light</code>
+    </div>
+    <div class="col">
+      <div class="bg-pattern-circles bg-pattern-opacity-dark border rounded mb-2" style="height: 6rem;"></div>
+      <code>.bg-pattern-opacity-dark</code>
+    </div>
+    <div class="col">
+      <div class="bg-pattern-circles bg-pattern-opacity-darker border rounded mb-2" style="height: 6rem;"></div>
+      <code>.bg-pattern-opacity-darker</code>
+    </div>
   </div>
-  <div class="col">
-    <div class="bg-pattern-circles bg-pattern-opacity-light border rounded mb-2" style="height: 6rem;"></div>
-    <code>.bg-pattern-opacity-light</code>
-  </div>
-  <div class="col">
-    <div class="bg-pattern-circles bg-pattern-opacity-dark border rounded mb-2" style="height: 6rem;"></div>
-    <code>.bg-pattern-opacity-dark</code>
-  </div>
-  <div class="col">
-    <div class="bg-pattern-circles bg-pattern-opacity-darker border rounded mb-2" style="height: 6rem;"></div>
-    <code>.bg-pattern-opacity-darker</code>
-  </div>
-</div>
 </Example>
 <Example codeOnly>
-<div class="bg-pattern-circles bg-pattern-opacity-lighter"></div>
-<div class="bg-pattern-circles bg-pattern-opacity-light"></div>
-<div class="bg-pattern-circles bg-pattern-opacity-dark"></div>
-<div class="bg-pattern-circles bg-pattern-opacity-darker"></div>
+  <div class="bg-pattern-circles bg-pattern-opacity-lighter"></div>
+  <div class="bg-pattern-circles bg-pattern-opacity-light"></div>
+  <div class="bg-pattern-circles bg-pattern-opacity-dark"></div>
+  <div class="bg-pattern-circles bg-pattern-opacity-darker"></div>
 </Example>
 
 ## Examples
 
 Look at the following examples to see how background patterns can be used in real layouts.
 
-### Card with background pattern
+### Card on a background pattern
 
-Card with a background pattern in the body can be used to add a decorative touch to the card. This is useful when you want to add a subtle pattern to the card without affecting the readability of the content.
+Placing a card on a patterned background adds a decorative touch to the surrounding area while keeping the card itself clean. Wrap the card in an element with a `.bg-pattern-*` class so the pattern shows around the card without affecting the readability of its content.
 
-<Example hideCode>
-<div class="card">
-  <div class="card-body">Here is example of a card with a background pattern.</div>
-</div>
+<Example hideCode class="bg-pattern-diagonal">
+  <div class="card">
+    <div class="card-body">Here is an example of a card placed on a background pattern.</div>
+  </div>
 </Example>
 <Example codeOnly>
-<div class="bg-pattern-diagonal">
-  <div class="card">...</div>
-</div>
+  <div class="bg-pattern-diagonal">
+    <div class="card">...</div>
+  </div>
 </Example>
 
 ## Accessibility