> ## Documentation Index
> Fetch the complete documentation index at: https://adminroletesting-mintlify-999c9ea9.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# 磁贴
> 使用 tiles 组件在响应式网格布局中展示带有图片缩略图、标题和描述的视觉预览。
使用磁贴来创建带有图案背景、标题和说明的视觉展示元素。磁贴非常适合在网格布局中展示组件预览、功能亮点或导航项。
```mdx Tile example theme={null}
```
磁贴的 `children` 可以是任何你想在预览区域中显示的图片、SVG 或其他 React 节点。使用 `block dark:hidden` 和 `hidden dark:block` 工具类分别提供浅色和深色模式资源，使预览与当前主题相匹配。
### 图片指南
磁贴的预览区域是一个高度固定的响应式容器。为了在不同磁贴和网格布局中获得一致的效果：
* **宽高比**：使用 16:9 或 4:3 的横向比例。竖向图片裁剪效果不佳。
* **尺寸**：以至少 800×450 像素进行设计，以便在 retina 显示屏上保持清晰。
* **格式**：插画、UI 稿和示意图优先使用 SVG。照片和截图使用 WebP 或 PNG。
* **文件大小**：将每个资源保持在 200 KB 以下，以保证页面加载性能，尤其是在多磁贴网格中。
* **内边距**：将周围的任何内边距烘焙进资源本身。磁贴不会在子图片周围额外添加内边距。
## 网格布局
将磁贴与 [Columns 组件](/zh/components/columns) 组合使用，以创建响应式的视觉预览网格。
```mdx Grid layout example theme={null}
```
## 属性
点击卡片时要跳转到的 URL。
显示在卡片预览下方的标题。
显示在标题下方的简短说明。
显示在卡片预览区域的内容，通常为图片或 SVG 图像。