mintlify__docs/es/components/tiles.mdx

---
title: "Mosaicos"
description: "Usa el componente tiles para mostrar vistas previas visuales con miniaturas de imágenes, títulos y descripciones en un diseño de cuadrícula adaptable."
keywords: ["mosaicos", "vista previa visual", "cuadrícula", "exhibición"]
boost: 3
---

Usa mosaicos para crear elementos visuales de presentación con un fondo con patrón, título y descripción. Los mosaicos son ideales para mostrar vistas previas de componentes, destacar funcionalidades o elementos de navegación en un diseño de cuadrícula.

<Tile href="/es/components/tiles" title="Título del mosaico" description="Descripción breve">
  <img src="/images/tiles/placeholder-light.svg" alt="Marcador de posición de vista previa del mosaico" className="block dark:hidden" />

  <img src="/images/tiles/placeholder-dark.svg" alt="Marcador de posición de vista previa del mosaico (modo oscuro)" className="hidden dark:block" />
</Tile>

```mdx Tile example
<Tile href="/your-link" title="Tile title" description="Short description">
  <img src="/images/your-preview-light.svg" alt="Tile preview" className="block dark:hidden" />
  <img src="/images/your-preview-dark.svg" alt="Tile preview (dark mode)" className="hidden dark:block" />
</Tile>
```

El contenido (`children`) de un mosaico puede ser cualquier imagen, SVG u otro nodo de React que quieras mostrar en el área de vista previa. Proporciona recursos separados para modo claro y oscuro usando las clases utilitarias `block dark:hidden` y `hidden dark:block` para que la vista previa coincida con el tema activo.

<div id="image-guidelines">
  ### Directrices para imágenes
</div>

El área de vista previa del mosaico es un contenedor responsive de altura fija. Para obtener resultados consistentes entre mosaicos y diseños de cuadrícula:

- **Relación de aspecto**: Usa una relación horizontal de 16:9 o 4:3. Las imágenes verticales se recortan de forma incómoda.
- **Dimensiones**: Diseña para al menos 800×450 píxeles para que las vistas previas se mantengan nítidas en pantallas retina.
- **Formato**: Prefiere SVG para ilustraciones, mockups de UI y diagramas. Usa WebP o PNG para fotografías y capturas de pantalla.
- **Tamaño de archivo**: Mantén cada recurso por debajo de 200 KB para preservar el rendimiento de carga de la página, especialmente en cuadrículas con varios mosaicos.
- **Padding**: Incorpora cualquier padding circundante dentro del propio recurso. El mosaico no añade margen interno alrededor de la imagen hija.

<div id="grid-layout">
  ## Diseño en cuadrícula
</div>

Combina mosaicos con el [componente Columns](/es/components/columns) para crear una cuadrícula adaptable de vistas previas.

<Columns cols={3}>
  <Tile href="/es/components/tiles" title="Mosaico uno" description="Descripción breve">
    <img src="/images/tiles/placeholder-light.svg" alt="Marcador de posición de vista previa del mosaico" className="block dark:hidden" />

    <img src="/images/tiles/placeholder-dark.svg" alt="Marcador de posición de vista previa del mosaico (modo oscuro)" className="hidden dark:block" />
  </Tile>

  <Tile href="/es/components/tiles" title="Mosaico dos" description="Descripción breve">
    <img src="/images/tiles/placeholder-light.svg" alt="Marcador de posición de vista previa del mosaico" className="block dark:hidden" />

    <img src="/images/tiles/placeholder-dark.svg" alt="Marcador de posición de vista previa del mosaico (modo oscuro)" className="hidden dark:block" />
  </Tile>

  <Tile href="/es/components/tiles" title="Mosaico tres" description="Descripción breve">
    <img src="/images/tiles/placeholder-light.svg" alt="Marcador de posición de vista previa del mosaico" className="block dark:hidden" />

    <img src="/images/tiles/placeholder-dark.svg" alt="Marcador de posición de vista previa del mosaico (modo oscuro)" className="hidden dark:block" />
  </Tile>
</Columns>

```mdx Grid layout example
<Columns cols={3}>
  <Tile href="/link-one" title="Tile one" description="Short description">
    <img src="/images/preview-one-light.svg" alt="Tile preview" className="block dark:hidden" />
    <img src="/images/preview-one-dark.svg" alt="Tile preview (dark mode)" className="hidden dark:block" />
  </Tile>
  <Tile href="/link-two" title="Tile two" description="Short description">
    <img src="/images/preview-two-light.svg" alt="Tile preview" className="block dark:hidden" />
    <img src="/images/preview-two-dark.svg" alt="Tile preview (dark mode)" className="hidden dark:block" />
  </Tile>
  <Tile href="/link-three" title="Tile three" description="Short description">
    <img src="/images/preview-three-light.svg" alt="Tile preview" className="block dark:hidden" />
    <img src="/images/preview-three-dark.svg" alt="Tile preview (dark mode)" className="hidden dark:block" />
  </Tile>
</Columns>
```

<div id="properties">
  ## Propiedades
</div>

<ResponseField name="href" type="string" required>
  URL a la que se redirige cuando se hace clic en la tarjeta.
</ResponseField>

<ResponseField name="title" type="string">
  El título que se muestra debajo de la vista previa de la tarjeta.
</ResponseField>

<ResponseField name="description" type="string">
  Una breve descripción que se muestra debajo del título.
</ResponseField>

<ResponseField name="children" type="React.ReactNode" required>
  Contenido que se muestra dentro del área de vista previa de la tarjeta, normalmente imágenes o SVG.
</ResponseField>