Card
Aprende a usar el componente Card para crear contenedores clicables y con estilo, con iconos, imágenes, enlaces y CTA en diseños de cuadrícula.
El componente <Card> es un contenedor con estilo y con capacidad de clic. Úsalo para enlazar a otras páginas o agrupar contenido relacionado. Combina las cards con <Columns> para crear diseños en cuadrícula.
Uso
<Card title="Quickstart" icon="rocket" href="/quickstart">
Launch your docs in minutes.
</Card>Card básica
Una card simple con un título:
<Card title="Getting Started">
Set up your first project in under five minutes.
</Card>Card con icono
Agrega un icono para que las cards sean más distintivas visualmente:
<Card title="Documentation" icon="book">
Explore our complete documentation to learn all features.
</Card>Card con enlace
Las cards pueden enlazar a otras páginas:
<Card title="API Reference" icon="code" href="/introduction">
View the complete API documentation.
</Card>Card con flecha
Agrega un indicador de flecha para mostrar que la card enlaza a algún lugar. Las flechas aparecen automáticamente en los enlaces externos, pero también puedes habilitarlas para 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>Card con CTA
Agrega un texto de llamada a la acción debajo del contenido de la card:
<Card title="Quickstart" icon="star" href="/quickstart" cta="Upgrade now">
Unlock advanced features and priority support.
</Card>Combina flecha y CTA para un mayor énfasis:
<Card title="Quickstart" icon="rocket" href="/quickstart" arrow={true} cta="Start building">
Everything you need to launch your first project.
</Card>Card con imagen
Muestra una imagen en la parte superior de la card:
<Card title="Visual Guide" img="/_jd/images/card-example.webp?v=mrtvmucv">
A card featuring an image header.
</Card>Cuadrícula de cards con Columns
Usa Columns para organizar varias cards en una cuadrícula responsiva:
<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 mostrado en la parte superior de la card.
Nombre de icono de Font Awesome (por ejemplo, "book", "code", "rocket"). Se renderiza en la variante Solid de forma predeterminada; agrega un prefijo de estilo como light/book para cambiar el grosor. Consulta Iconos.
URL a la que enlaza la card. Puede ser interna (/docs/intro) o externa (https://example.com).
Ruta a una imagen mostrada en la parte superior de la card.
Muestra un indicador de flecha (↗) en la esquina superior derecha. Se habilita automáticamente para enlaces externos (URLs que comienzan con http:// o https://). Configúralo en true para mostrarlo en enlaces internos, o en false para ocultarlo en enlaces externos.
Texto de llamada a la acción personalizado mostrado debajo del contenido de la card. 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.