> ## Documentation Index
> Fetch the complete documentation index at: https://adminroletesting-mintlify-999c9ea9.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Mosaicos

> 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.

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="https://mintcdn.com/adminroletesting-mintlify-999c9ea9/0Zwe9lMo9rReaVb6/images/tiles/placeholder-light.svg?fit=max&auto=format&n=0Zwe9lMo9rReaVb6&q=85&s=0381c4d4eda95d87c8cd2e975c0b98ab" alt="Marcador de posición de vista previa del mosaico" className="block dark:hidden" width="184" height="100" data-path="images/tiles/placeholder-light.svg" />

  <img src="https://mintcdn.com/adminroletesting-mintlify-999c9ea9/0Zwe9lMo9rReaVb6/images/tiles/placeholder-dark.svg?fit=max&auto=format&n=0Zwe9lMo9rReaVb6&q=85&s=4a42e4a99e2c8f6e82c3771bcf31770f" alt="Marcador de posición de vista previa del mosaico (modo oscuro)" className="hidden dark:block" width="184" height="100" data-path="images/tiles/placeholder-dark.svg" />
</Tile>

```mdx Tile example theme={null}
<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="https://mintcdn.com/adminroletesting-mintlify-999c9ea9/0Zwe9lMo9rReaVb6/images/tiles/placeholder-light.svg?fit=max&auto=format&n=0Zwe9lMo9rReaVb6&q=85&s=0381c4d4eda95d87c8cd2e975c0b98ab" alt="Marcador de posición de vista previa del mosaico" className="block dark:hidden" width="184" height="100" data-path="images/tiles/placeholder-light.svg" />

    <img src="https://mintcdn.com/adminroletesting-mintlify-999c9ea9/0Zwe9lMo9rReaVb6/images/tiles/placeholder-dark.svg?fit=max&auto=format&n=0Zwe9lMo9rReaVb6&q=85&s=4a42e4a99e2c8f6e82c3771bcf31770f" alt="Marcador de posición de vista previa del mosaico (modo oscuro)" className="hidden dark:block" width="184" height="100" data-path="images/tiles/placeholder-dark.svg" />
  </Tile>

  <Tile href="/es/components/tiles" title="Mosaico dos" description="Descripción breve">
    <img src="https://mintcdn.com/adminroletesting-mintlify-999c9ea9/0Zwe9lMo9rReaVb6/images/tiles/placeholder-light.svg?fit=max&auto=format&n=0Zwe9lMo9rReaVb6&q=85&s=0381c4d4eda95d87c8cd2e975c0b98ab" alt="Marcador de posición de vista previa del mosaico" className="block dark:hidden" width="184" height="100" data-path="images/tiles/placeholder-light.svg" />

    <img src="https://mintcdn.com/adminroletesting-mintlify-999c9ea9/0Zwe9lMo9rReaVb6/images/tiles/placeholder-dark.svg?fit=max&auto=format&n=0Zwe9lMo9rReaVb6&q=85&s=4a42e4a99e2c8f6e82c3771bcf31770f" alt="Marcador de posición de vista previa del mosaico (modo oscuro)" className="hidden dark:block" width="184" height="100" data-path="images/tiles/placeholder-dark.svg" />
  </Tile>

  <Tile href="/es/components/tiles" title="Mosaico tres" description="Descripción breve">
    <img src="https://mintcdn.com/adminroletesting-mintlify-999c9ea9/0Zwe9lMo9rReaVb6/images/tiles/placeholder-light.svg?fit=max&auto=format&n=0Zwe9lMo9rReaVb6&q=85&s=0381c4d4eda95d87c8cd2e975c0b98ab" alt="Marcador de posición de vista previa del mosaico" className="block dark:hidden" width="184" height="100" data-path="images/tiles/placeholder-light.svg" />

    <img src="https://mintcdn.com/adminroletesting-mintlify-999c9ea9/0Zwe9lMo9rReaVb6/images/tiles/placeholder-dark.svg?fit=max&auto=format&n=0Zwe9lMo9rReaVb6&q=85&s=4a42e4a99e2c8f6e82c3771bcf31770f" alt="Marcador de posición de vista previa del mosaico (modo oscuro)" className="hidden dark:block" width="184" height="100" data-path="images/tiles/placeholder-dark.svg" />
  </Tile>
</Columns>

```mdx Grid layout example theme={null}
<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>