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.

Título del mosaico

Descripción breve

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.

​

Directrices para imágenes

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.

​

Diseño en cuadrícula

Combina mosaicos con el componente Columns para crear una cuadrícula adaptable de vistas previas.

Mosaico uno

Descripción breve

Mosaico dos

Descripción breve

Mosaico tres

Descripción breve

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>

​

Propiedades

href · string · requerido

URL a la que se redirige cuando se hace clic en la tarjeta.

title · string

El título que se muestra debajo de la vista previa de la tarjeta.

description · string

Una breve descripción que se muestra debajo del título.

children · React.ReactNode · requerido

Contenido que se muestra dentro del área de vista previa de la tarjeta, normalmente imágenes o SVG.