From c4a8eda3e8ad032e908d6edeb4fba89e4cd31719 Mon Sep 17 00:00:00 2001
From: "mintlify[bot]" <109931778+mintlify[bot]@users.noreply.github.com>
Date: Mon, 1 Dec 2025 19:06:00 +0000
Subject: [PATCH 1/4] Update components/tiles.mdx
---
components/tiles.mdx | 84 ++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 84 insertions(+)
create mode 100644 components/tiles.mdx
diff --git a/components/tiles.mdx b/components/tiles.mdx
new file mode 100644
index 000000000..5717d81a9
--- /dev/null
+++ b/components/tiles.mdx
@@ -0,0 +1,84 @@
+---
+title: "Tiles"
+description: "Display visual previews with titles and descriptions in a grid layout."
+keywords: ["tiles", "visual preview", "grid", "showcase"]
+---
+
+Use tiles to create visual showcase elements with a patterned background, title, and description. Tiles are ideal for displaying component previews, feature highlights, or navigation items in a grid layout.
+
+
+ 
+ 
+
+
+```mdx Tile example
+
+ 
+ 
+
+```
+
+## Grid layout
+
+Combine tiles with the [Columns component](/components/columns) to create a responsive grid of visual previews.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```mdx Grid layout example
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+## Dark mode support
+
+Tiles support light and dark mode images using Tailwind CSS classes. Use `className="block dark:hidden"` for light mode images and `className="hidden dark:block"` for dark mode images.
+
+```mdx Dark mode support
+
+ 
+ 
+
+```
+
+## Properties
+
+
+ URL to navigate to when the tile is clicked.
+
+
+
+ The title displayed below the tile preview.
+
+
+
+ A short description displayed below the title.
+
+
+
+ Content displayed inside the tile preview area, typically images or SVGs.
+
From 63df6b058d4d64c2fe7825b87ab299fd43466e70 Mon Sep 17 00:00:00 2001
From: "mintlify[bot]" <109931778+mintlify[bot]@users.noreply.github.com>
Date: Mon, 1 Dec 2025 19:06:13 +0000
Subject: [PATCH 2/4] Update docs.json
---
docs.json | 1 +
1 file changed, 1 insertion(+)
diff --git a/docs.json b/docs.json
index e368f6a4f..a1002947f 100644
--- a/docs.json
+++ b/docs.json
@@ -94,6 +94,7 @@
"components/responses",
"components/steps",
"components/tabs",
+ "components/tiles",
"components/tooltips",
"components/update",
"components/view"
From a3637f16dfd8f83c9003413d3599c301276e846f Mon Sep 17 00:00:00 2001
From: pqoqubbw
Date: Mon, 1 Dec 2025 20:18:41 +0100
Subject: [PATCH 3/4] update examples
---
components/tiles.mdx | 59 +++++++++++++-------------------
images/tiles/accordion-dark.svg | 24 +++++++++++++
images/tiles/accordion-light.svg | 24 +++++++++++++
3 files changed, 72 insertions(+), 35 deletions(-)
create mode 100644 images/tiles/accordion-dark.svg
create mode 100644 images/tiles/accordion-light.svg
diff --git a/components/tiles.mdx b/components/tiles.mdx
index 5717d81a9..488abf0df 100644
--- a/components/tiles.mdx
+++ b/components/tiles.mdx
@@ -6,15 +6,15 @@ keywords: ["tiles", "visual preview", "grid", "showcase"]
Use tiles to create visual showcase elements with a patterned background, title, and description. Tiles are ideal for displaying component previews, feature highlights, or navigation items in a grid layout.
-
-
-
+
+ 
+ 
```mdx Tile example
-
-
-
+
+
+
```
@@ -23,48 +23,37 @@ Use tiles to create visual showcase elements with a patterned background, title,
Combine tiles with the [Columns component](/components/columns) to create a responsive grid of visual previews.
-
-
-
+
+
+
-
-
-
+
+
+
-
-
-
+
+
+
```mdx Grid layout example
-
-
-
+
+
+
-
-
-
+
+
+
-
-
-
+
+
+
```
-## Dark mode support
-
-Tiles support light and dark mode images using Tailwind CSS classes. Use `className="block dark:hidden"` for light mode images and `className="hidden dark:block"` for dark mode images.
-
-```mdx Dark mode support
-
-
-
-
-```
-
## Properties
diff --git a/images/tiles/accordion-dark.svg b/images/tiles/accordion-dark.svg
new file mode 100644
index 000000000..dbcdf5af5
--- /dev/null
+++ b/images/tiles/accordion-dark.svg
@@ -0,0 +1,24 @@
+
diff --git a/images/tiles/accordion-light.svg b/images/tiles/accordion-light.svg
new file mode 100644
index 000000000..fa608eeb9
--- /dev/null
+++ b/images/tiles/accordion-light.svg
@@ -0,0 +1,24 @@
+
From 7f7796820c099b4a0b8deaa0039c310c4869a85b Mon Sep 17 00:00:00 2001
From: Ethan Palm <56270045+ethanpalm@users.noreply.github.com>
Date: Mon, 1 Dec 2025 14:24:21 -0800
Subject: [PATCH 4/4] Apply suggestions from code review
---
components/tiles.mdx | 18 +++++++++---------
1 file changed, 9 insertions(+), 9 deletions(-)
diff --git a/components/tiles.mdx b/components/tiles.mdx
index 488abf0df..f4ff3db51 100644
--- a/components/tiles.mdx
+++ b/components/tiles.mdx
@@ -6,13 +6,13 @@ keywords: ["tiles", "visual preview", "grid", "showcase"]
Use tiles to create visual showcase elements with a patterned background, title, and description. Tiles are ideal for displaying component previews, feature highlights, or navigation items in a grid layout.
-
+
```mdx Tile example
-
+
@@ -20,18 +20,18 @@ Use tiles to create visual showcase elements with a patterned background, title,
## Grid layout
-Combine tiles with the [Columns component](/components/columns) to create a responsive grid of visual previews.
+Combine tiles with the [columns component](/components/columns) to create a responsive grid of visual previews.
-
+
-
+
-
+
@@ -39,15 +39,15 @@ Combine tiles with the [Columns component](/components/columns) to create a resp
```mdx Grid layout example
-
+
-
+
-
+