Mosaicos

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.

Accordion

Dos variantes

Tile example

<Tile href="/es/components/accordions" title="Accordion" description="Dos variantes">
  <img src="/images/tiles/accordion-light.svg" alt="Vista previa del componente Accordion" className="block dark:hidden" />
  <img src="/images/tiles/accordion-dark.svg" alt="Vista previa del componente Accordion (modo oscuro)" className="hidden dark:block" />
</Tile>

Diseño en cuadrícula

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

Accordion

Dos variantes

Accordion

Dos variantes

Accordion

Dos variantes

Grid layout example

<Columns cols={3}>
  <Tile href="/components/accordions" title="Accordion" description="Dos variantes">
    <img src="/images/tiles/accordion-light.svg" alt="Vista previa del componente Accordion" className="block dark:hidden" />
    <img src="/images/tiles/accordion-dark.svg" alt="Vista previa del componente Accordion (modo oscuro)" className="hidden dark:block" />
  </Tile>
  <Tile href="/components/accordions" title="Accordion" description="Dos variantes">
    <img src="/images/tiles/accordion-light.svg" alt="Vista previa del componente Accordion" className="block dark:hidden" />
    <img src="/images/tiles/accordion-dark.svg" alt="Vista previa del componente Accordion (modo oscuro)" className="hidden dark:block" />
  </Tile>
  <Tile href="/components/accordions" title="Accordion" description="Dos variantes">
    <img src="/images/tiles/accordion-light.svg" alt="Vista previa del componente Accordion" className="block dark:hidden" />
    <img src="/images/tiles/accordion-dark.svg" alt="Vista previa del componente Accordion (modo oscuro)" className="hidden dark:block" />
  </Tile>
</Columns>

Propiedades

string

requerido

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

string

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

string

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

React.ReactNode

requerido

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

Tabs

Tooltips

Primeros pasos

Organizar

Personalizar

Crear contenido

Documentar APIs

Desplegar

Optimizar

Diseño en cuadrícula

Propiedades

​Diseño en cuadrícula

​Propiedades

Diseño en cuadrícula

Propiedades