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.

​

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.