Tile
Los Tiles muestran previews de contenido con un fondo de patrón estilizado y un área de imagen destacada, perfectos para mostrar integraciones, plantillas o galerías visuales.
Los Tiles muestran previews con imagen en primer plano y fondos con patrones. Úsalos en lugar de Cards cuando una captura de pantalla o un logotipo importa más que el texto — páginas de integraciones, galerías de plantillas y showcases visuales.
Las capturas de pantalla muestran la interfaz en inglés.
Usa Tiles cuando:
- Las previews visuales son más importantes que las descripciones de texto
- Mostrar integraciones con logotipos o capturas de pantalla
- Construir galerías de plantillas, temas o ejemplos
- Mostrar capturas de pantalla con títulos y descripciones opcionales
Uso
<Tile href="/components/tabs" title="Tabs Component">
<img src="/_jd/images/tabs-preview.png?v=moa8o29o" alt="Tabs" />
</Tile>Tile básico
Un tile simple con una imagen de preview y título:
<Tile href="/components/tabs" title="Tabs Component">
<img src="/_jd/images/tabs-preview.webp?v=moa8o29o" alt="Tabs" />
</Tile>Tile con descripción
Agrega una descripción para más contexto:
<Tile
href="/components/tabs"
title="Tabs Component"
description="Organize content into switchable tabbed sections"
>
<img src="/_jd/images/tabs-preview.webp?v=moa8o29o" alt="Tabs" />
</Tile>Tile vs Card
| Característica | Tile | Card |
|---|---|---|
| Énfasis visual | Imagen en primer plano con fondo de patrón | Ícono + título + descripción |
| Ideal para | Integraciones, plantillas, galerías | Navegación, listas de funciones, CTAs |
| Manejo de imagen | Área de preview grande | Ícono pequeño |
| Contenido de texto | Título + descripción opcional | Título + descripción + ícono |
Regla general: Si tienes una captura de pantalla o un logotipo para mostrar, usa Tile. Si el contenido es principalmente texto, usa Card.
Diseño en cuadrícula
Usa Columns para mostrar múltiples Tiles en una cuadrícula:
Imágenes en modo oscuro
Usa clases de Tailwind para mostrar imágenes diferentes en modo claro y oscuro:
<Tile href="/customization/theming" title="Theming">
<img src="/_jd/images/logo-light.webp?v=moa8o29o" alt="Theme" className="dark:hidden" data-no-style="true" />
<img src="/_jd/images/logo-dark.webp?v=moa8o29o" alt="Theme" className="hidden dark:block" data-no-style="true" />
</Tile>El atributo noStyle evita el estilo de imagen predeterminado para que las clases de modo oscuro funcionen correctamente.
Props
La URL a la que enlaza el tile. Admite tanto rutas internas (/docs/intro) como URLs externas (https://example.com). Los enlaces externos se abren en una nueva pestaña.
Texto del título que se muestra debajo del área de preview.
Texto de descripción opcional debajo del título.
Contenido a mostrar en el área de preview. Normalmente imágenes o SVGs.