磁贴
磁贴以样式化图案背景和醒目的图片区域展示内容预览，适用于集成、模板或视觉画廊。
磁贴以图片优先的方式展示带图案背景的预览。当截图或徽标比文字更重要时，请使用磁贴替代卡片，例如集成页面、模板画廊和图片内容较多的页面。
屏幕截图显示的是英文界面。
使用磁贴的场景：
- 视觉预览 比文字描述更重要
- 展示集成 的徽标或截图
- 构建画廊，展示模板、主题或示例
- 展示截图，并附带标题和可选描述
用法
<Tile href="/components/tabs" title="Tabs Component">
<img src="/_jd/images/tabs-preview.webp?v=mst25htz" alt="Tabs" />
</Tile>基本 Tile
包含预览图片和标题的简单磁贴：
<Tile href="/components/tabs" title="Tabs Component">
<img src="/_jd/images/tabs-preview.webp?v=mst25htz" alt="Tabs" />
</Tile>带描述的 Tile
添加描述以提供更多上下文：
<Tile
href="/components/tabs"
title="Tabs Component"
description="Organize content into switchable tabbed sections"
>
<img src="/_jd/images/tabs-preview.webp?v=mst25htz" alt="Tabs" />
</Tile>Tile 与 Card
| 特性 | Tile | Card |
|---|---|---|
| 视觉重点 | 图片优先，带图案背景 | 图标 + 标题 + 描述 |
| 适用场景 | 集成、模板、画廊 | 导航、功能列表、CTA |
| 图片处理 | 大型预览区域 | 小型图标 |
| 文字内容 | 标题 + 可选描述 | 标题 + 描述 + 图标 |
经验法则： 如果要展示截图或徽标，请使用 Tile。如果内容主要是文字，请使用 Card。
网格布局
使用 Columns 在网格中显示多个 Tile：
深色模式图片
使用 Tailwind 类在浅色和深色模式下显示不同图片：
<Tile href="/customization/theming" title="Theming">
<img src="/_jd/images/logo-light.webp?v=mst25htz" alt="Theme" className="dark:hidden" data-no-style="true" />
<img src="/_jd/images/logo-dark.webp?v=mst25htz" alt="Theme" className="hidden dark:block" data-no-style="true" />
</Tile>noStyle 属性会阻止默认图片样式，使深色模式类正常生效。
属性
磁贴链接指向的 URL。支持内部路径（/docs/intro）和外部 URL（https://example.com）。外部链接会在新标签页中打开。
显示在预览区域下方的标题文字。
标题下方的可选描述文字。
要显示在预览区域中的内容，通常为图片或 SVG。