Tarjeta
Las tarjetas son componentes versátiles para destacar contenido, crear enlaces de navegación u organizar información en secciones distintas.
El componente <Card> te ofrece un contenedor estilizado y clicable para enlazar a otras páginas, mostrar funcionalidades o agrupar contenido relacionado. Combina tarjetas con <Columns> para crear diseños de cuadrícula.
Uso
<Card title="Quickstart" icon="rocket" href="/quickstart">
Launch your docs in minutes.
</Card>Tarjeta básica
Una tarjeta simple con un título:
<Card title="Getting Started">
Set up your first project in under five minutes.
</Card>Tarjeta con icono
Añade un icono para hacer las tarjetas más visualmente distintivas:
<Card title="Documentation" icon="book">
Explore our complete documentation to learn all features.
</Card>Tarjeta con enlace
Las tarjetas pueden enlazar a otras páginas:
<Card title="API Reference" icon="code" href="/introduction">
View the complete API documentation.
</Card>Tarjeta con flecha
Añade un indicador de flecha para mostrar que la tarjeta enlaza a algún lugar. Las flechas aparecen automáticamente para los enlaces externos, pero también puedes habilitarlas para los enlaces internos:
<Card title="Quickstart" icon="github" href="/quickstart" arrow={true}>
Check out the source code and contribute.
</Card>Los enlaces externos muestran la flecha automáticamente:
<Card title="External Resource" href="https://example.com">
This card links to an external site.
</Card>Tarjeta con CTA
Añade un texto de llamada a la acción debajo del contenido de la tarjeta:
<Card title="Quickstart" icon="star" href="/quickstart" cta="Upgrade now">
Unlock advanced features and priority support.
</Card>Combina la flecha y el CTA para mayor énfasis:
<Card title="Quickstart" icon="rocket" href="/quickstart" arrow={true} cta="Start building">
Everything you need to launch your first project.
</Card>Tarjeta con imagen
Muestra una imagen en la parte superior de la tarjeta:
<Card title="Visual Guide" img="/_jd/images/card-example.webp?v=moa8o29o">
A card featuring an image header.
</Card>Cuadrícula de tarjetas con Columns
Usa Columns para organizar varias tarjetas en una cuadrícula responsive:
<Columns cols={2}>
<Card title="Quickstart" icon="rocket" href="/quickstart">
Get up and running in minutes.
</Card>
<Card title="Tutorials" icon="graduation-cap" href="/content/mdx-basics">
Step-by-step learning paths.
</Card>
<Card title="Examples" icon="flask" href="/components/overview">
Real-world code examples.
</Card>
</Columns>Diseño de tres columnas
<Columns cols={3}>
<Card title="Docs" icon="book">
Documentation
</Card>
<Card title="API" icon="code">
API Reference
</Card>
<Card title="Blog" icon="newspaper">
Latest updates
</Card>
</Columns>Props
El título que se muestra en la parte superior de la tarjeta.
Nombre del icono de Font Awesome (p. ej., "book", "code", "rocket"). Los iconos usan la variante Light para coincidir con el estilo limpio de la documentación.
URL a la que enlaza la tarjeta. Puede ser interna (/docs/intro) o externa (https://example.com).
Ruta a una imagen que se muestra en la parte superior de la tarjeta.
Muestra un indicador de flecha (↗) en la esquina superior derecha. Se habilita automáticamente para los enlaces externos (URL que comienzan con http:// o https://). Establece en true para mostrar en enlaces internos, o en false para ocultar en enlaces externos.
Texto de llamada a la acción personalizado que se muestra debajo del contenido de la tarjeta. Solo es visible cuando también se proporciona href.
Props de Columns
Número de columnas en la cuadrícula. Acepta 1, 2, 3 o 4.