Skip to main content
Usa tarjetas para crear contenedores visuales para el contenido. Las tarjetas son contenedores flexibles que pueden incluir texto, iconos, imágenes y enlaces.

​
Tarjeta básica

Título de la tarjeta

Así es como se usa una tarjeta con un icono y un enlace. Al hacer clic en esta tarjeta, irás a la página de Columns.
Card example

​
Variantes de tarjetas

Las tarjetas admiten varias opciones de diseño y estilo para adaptarse a diferentes necesidades de contenido.

​
Diseño horizontal

Agrega la propiedad horizontal para mostrar las tarjetas en un diseño horizontal más compacto.

Tarjeta horizontal

Este es un ejemplo de una tarjeta horizontal.
Horizontal card example

​
Tarjetas con imagen

Agrega una propiedad img para mostrar una imagen en la parte superior de la tarjeta.
yosemite

Tarjeta con imagen

Este es un ejemplo de una tarjeta con imagen.
Image card example
Puedes personalizar el texto de la llamada a la acción y controlar si aparece una flecha. De forma predeterminada, las flechas solo se muestran en los enlaces externos.

Tarjeta de enlace

Este es un ejemplo de una tarjeta con un ícono y un enlace. Al hacer clic en esta tarjeta, irás a la página Columns.
Link card example

​
Agrupar tarjetas

Usa el componente Columns para organizar varias tarjetas lado a lado. El componente Columns admite entre una y cuatro columnas y se ajusta automáticamente para pantallas más pequeñas.

Primera tarjeta

Esta es la primera tarjeta.

Segunda tarjeta

Esta es la segunda tarjeta.
Columns example

​
Propiedades

​
string
requerido
El título que se muestra en la tarjeta
​
string
El icono que se mostrará.Opciones:
  • Nombre del icono de Font Awesome
  • Nombre del icono de Lucide
  • Código SVG (compatible con JSX) envuelto entre llaves
  • URL a un icono alojado externamente
  • Ruta a un archivo de icono en tu proyecto
Para iconos SVG personalizados:
  1. Convierte tu SVG usando el convertidor SVGR.
  2. Pega tu código SVG en el campo de entrada de SVG.
  3. Copia el elemento completo <svg>...</svg> del campo de salida JSX.
  4. Envuelve el código SVG compatible con JSX entre llaves: icon={<svg ...> ... </svg>}.
  5. Ajusta height y width según sea necesario.
​
string
El estilo de icono de Font Awesome. Solo se usa con iconos de Font Awesome.Opciones: regular, solid, light, thin, sharp-solid, duotone, brands.
​
string
Color del ícono como código hexadecimal (por ejemplo, #FF6B6B).
​
string
URL a la que se navega cuando se hace clic en la tarjeta.
​
boolean
Muestra la tarjeta en un diseño horizontal compacto.
​
string
URL o ruta local a una imagen que se muestra en la parte superior de la tarjeta.
​
string
Texto personalizado para el botón de acción.
​
boolean
Mostrar u ocultar el ícono de flecha del enlace.