--- title: Tarjeta description: Las tarjetas son componentes versátiles para destacar contenido, crear enlaces de navegación u organizar información en secciones distintas. --- El componente `` te ofrece un contenedor estilizado y clicable para enlazar a otras páginas, mostrar funcionalidades o agrupar contenido relacionado. Combina tarjetas con `` para crear diseños de cuadrícula. ## Uso ```mdx Launch your docs in minutes. ``` ## Tarjeta básica Una tarjeta simple con un título: Set up your first project in under five minutes. ```mdx Set up your first project in under five minutes. ``` ## Tarjeta con icono Añade un icono para hacer las tarjetas más visualmente distintivas: Explore our complete documentation to learn all features. ```mdx Explore our complete documentation to learn all features. ``` ## Tarjeta con enlace Las tarjetas pueden enlazar a otras páginas: View the complete API documentation. ```mdx View the complete API documentation. ``` ## 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: Check out the source code and contribute. ```mdx Check out the source code and contribute. ``` Los enlaces externos muestran la flecha automáticamente: This card links to an external site. ```mdx This card links to an external site. ``` ## Tarjeta con CTA Añade un texto de llamada a la acción debajo del contenido de la tarjeta: Unlock advanced features and priority support. ```mdx Unlock advanced features and priority support. ``` Combina la flecha y el CTA para mayor énfasis: Everything you need to launch your first project. ```mdx Everything you need to launch your first project. ``` ## Tarjeta con imagen Muestra una imagen en la parte superior de la tarjeta: A card featuring an image header. ```mdx A card featuring an image header. ``` ## Cuadrícula de tarjetas con Columns Usa `Columns` para organizar varias tarjetas en una cuadrícula responsive: Get up and running in minutes. Step-by-step learning paths. Real-world code examples. ```mdx Get up and running in minutes. Step-by-step learning paths. Real-world code examples. ``` ### Diseño de tres columnas Documentation API Reference Latest updates ```mdx Documentation API Reference Latest updates ``` ## 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. ## ¿Qué sigue? Browse all available components Learn how to use components in MDX