Saltar al contenido principal
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.
Vista previa del componente AccordionVista previa del componente Accordion (modo oscuro)

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.
Vista previa del componente AccordionVista previa del componente Accordion (modo oscuro)

Accordion

Dos variantes

Vista previa del componente AccordionVista previa del componente Accordion (modo oscuro)

Accordion

Dos variantes

Vista previa del componente AccordionVista previa del componente Accordion (modo oscuro)

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

​
href
string
required
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
required
Contenido que se muestra dentro del área de vista previa de la tarjeta, normalmente imágenes o SVG.