---
title: 磁贴
description: 磁贴以样式化图案背景和醒目的图片区域展示内容预览，适用于集成、模板或视觉画廊。
---
> **For AI agents:** the complete documentation index is at [llms.txt](/docs/llms.txt). Append `.md` to any page URL for its markdown version.
磁贴以图片优先的方式展示带图案背景的预览。当截图或徽标比文字更重要时，请使用磁贴替代卡片，例如集成页面、模板画廊和图片内容较多的页面。
屏幕截图显示的是英文界面。
使用磁贴的场景：
- **视觉预览** 比文字描述更重要
- **展示集成** 的徽标或截图
- **构建画廊**，展示模板、主题或示例
- **展示截图**，并附带标题和可选描述
## 用法
```mdx
```
## 基本 Tile
包含预览图片和标题的简单磁贴：
```mdx
```
## 带描述的 Tile
添加描述以提供更多上下文：
```mdx
```
## Tile 与 Card
| 特性 | Tile | Card |
|---------|------|------|
| 视觉重点 | 图片优先，带图案背景 | 图标 + 标题 + 描述 |
| 适用场景 | 集成、模板、画廊 | 导航、功能列表、CTA |
| 图片处理 | 大型预览区域 | 小型图标 |
| 文字内容 | 标题 + 可选描述 | 标题 + 描述 + 图标 |
**经验法则：** 如果要展示截图或徽标，请使用 Tile。如果内容主要是文字，请使用 Card。
## 网格布局
使用 `Columns` 在网格中显示多个 Tile：
## 深色模式图片
使用 Tailwind 类在浅色和深色模式下显示不同图片：
```mdx
```
`noStyle` 属性会阻止默认图片样式，使深色模式类正常生效。
## 属性
磁贴链接指向的 URL。支持内部路径（`/docs/intro`）和外部 URL（`https://example.com`）。外部链接会在新标签页中打开。
显示在预览区域下方的标题文字。
标题下方的可选描述文字。
要显示在预览区域中的内容，通常为图片或 SVG。
## 接下来做什么？
浏览所有可用组件
了解如何在 MDX 中使用组件