# Mosaicos (/es/components/tiles)

<!-- agent-signals: reading_time_min: 3 · est_tokens: 1381 · updated: 2026-07-30 -->
Related: [Accordions](/es/components/accordions.md), [Insignia](/es/components/badge.md), [Banner](/es/components/banner.md), [Avisos](/es/components/callouts.md), [Tarjetas](/es/components/cards.md), [Grupos de código](/es/components/code-groups.md)

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="/_assets/9e6575f0f7972e0454d56d7ab0a2533e656893c7e463e2260219a35cde95a861" alt="Marcador de posición de vista previa del mosaico" className="block dark:hidden" />

  <img src="/_assets/cc7bd3930b4208388c59af871814e660f682871602d61942be9bf31eb8580d25" alt="Marcador de posición de vista previa del mosaico (modo oscuro)" className="hidden dark:block" />
</Tile>

```mdx title="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 [#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 [#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="/_assets/9e6575f0f7972e0454d56d7ab0a2533e656893c7e463e2260219a35cde95a861" alt="Marcador de posición de vista previa del mosaico" className="block dark:hidden" />

    <img src="/_assets/cc7bd3930b4208388c59af871814e660f682871602d61942be9bf31eb8580d25" 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="/_assets/9e6575f0f7972e0454d56d7ab0a2533e656893c7e463e2260219a35cde95a861" alt="Marcador de posición de vista previa del mosaico" className="block dark:hidden" />

    <img src="/_assets/cc7bd3930b4208388c59af871814e660f682871602d61942be9bf31eb8580d25" 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="/_assets/9e6575f0f7972e0454d56d7ab0a2533e656893c7e463e2260219a35cde95a861" alt="Marcador de posición de vista previa del mosaico" className="block dark:hidden" />

    <img src="/_assets/cc7bd3930b4208388c59af871814e660f682871602d61942be9bf31eb8580d25" alt="Marcador de posición de vista previa del mosaico (modo oscuro)" className="hidden dark:block" />
  </Tile>
</Columns>

```mdx title="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 [#propiedades]
</div>

<ResponseField name="href" type="string">
  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">
  Contenido que se muestra dentro del área de vista previa de la tarjeta, normalmente imágenes o SVG.
</ResponseField>