Tile
Los Tiles muestran vistas previas de contenido con fondo de patrón estilizado y área de imagen destacada. Úsalos para integraciones o galerías.
Los Tiles muestran vistas previas centradas en la imagen con fondos con patrón. Úsalos en lugar de Cards cuando una captura de pantalla o un logotipo importan más que el texto: páginas de integraciones, galerías de plantillas y páginas con mucho contenido visual.
Las capturas de pantalla muestran la interfaz en inglés.
Usa Tiles cuando:
- Las vistas previas visuales son más importantes que las descripciones de texto
- Estás presentando integraciones con logotipos o capturas de pantalla
- Estás creando galerías de plantillas, temas o ejemplos
- Estás mostrando capturas de pantalla con títulos y descripciones opcionales
Uso
<Tile href="/components/tabs" title="Tabs Component">
<img src="/_jd/images/tabs-preview.webp?v=mrtvmucv" alt="Tabs" />
</Tile>Tile básico
Un tile simple con una imagen de vista previa y un título:
<Tile href="/components/tabs" title="Tabs Component">
<img src="/_jd/images/tabs-preview.webp?v=mrtvmucv" 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=mrtvmucv" alt="Tabs" />
</Tile>Tile vs Card
| Característica | Tile | Card |
|---|---|---|
| Énfasis visual | Imagen en primer plano con fondo con patrón | Icono + título + descripción |
| Ideal para | Integraciones, plantillas, galerías | Navegación, listas de funciones, CTAs |
| Manejo de imágenes | Área de vista previa grande | Icono pequeño |
| Contenido de texto | Título + descripción opcional | Título + descripción + icono |
Regla general: Si tienes una captura de pantalla o un logotipo que mostrar, usa Tile. Si el contenido es principalmente texto, usa Card.
Diseño en cuadrícula
Usa Columns para mostrar varios Tiles en una cuadrícula:
Imágenes en modo oscuro
Usa clases de Tailwind para mostrar imágenes diferentes en los modos claro y oscuro:
<Tile href="/customization/theming" title="Theming">
<img src="/_jd/images/logo-light.webp?v=mrtvmucv" alt="Theme" className="dark:hidden" data-no-style="true" />
<img src="/_jd/images/logo-dark.webp?v=mrtvmucv" 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 vista previa.
Texto de descripción opcional debajo del título.
Contenido que se muestra en el área de vista previa. Normalmente imágenes o SVGs.