Usa tarjetas para crear contenedores visuales de contenido. Las tarjetas son contenedores flexibles que pueden incluir texto, iconos, imágenes y enlaces.

​
Tarjeta básica

Card title

Así 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
<Card title="Card title" icon="text" href="/components/columns">
  Así 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>

​
Variantes de tarjetas

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

​
Diseño horizontal

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

Horizontal card

Este es un ejemplo de una tarjeta horizontal.
Ejemplo de tarjeta horizontal
<Card title="Horizontal card" icon="text" horizontal>
  Este es un ejemplo de una tarjeta horizontal.
</Card>

​
Tarjetas con imagen

Agrega la 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
<Card title="Tarjeta con imagen" img="/images/card-with-image.png">
  Este es un ejemplo de una tarjeta con imagen.
</Card>
Puedes personalizar el texto del llamado a la acción y controlar si aparece una flecha. De forma predeterminada, las flechas solo se muestran en los enlaces externos.

Link card

Este es un ejemplo de una tarjeta con un icono y un enlace. Al hacer clic en esta tarjeta, irás a la página de Columns.
Link card example
<Card
  title="Link card"
  icon="link"
  href="/components/columns"
  arrow="true"
  cta="Click here"
>
  Este es un ejemplo de una tarjeta con un icono y un enlace. Al hacer clic en esta tarjeta, irás a la página de Columns.
</Card>

​
Agrupar tarjetas

Usa el componente Columns para organizar varias tarjetas una junto a la otra.

First card

Esta es la primera tarjeta.

Second card

Esta es la segunda tarjeta.
Columns example
<Columns cols={2}>
  <Card title="First card" icon="panel-left-close">
    Esta es la primera tarjeta.
  </Card>
  <Card title="Second card" icon="panel-right-close">
    Esta es la segunda tarjeta.
  </Card>
</Columns>

​
Propiedades

​
title
string
required
El título que se muestra en la tarjeta
​
icon
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 de un icono alojado externamente
  • Ruta a un archivo de icono en tu proyecto
Para iconos SVG personalizados:
  1. Convierte tu SVG con 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 de JSX.
  4. Envuelve el código SVG compatible con JSX entre llaves: icon={<svg ...> ... </svg>}.
  5. Ajusta height y width según sea necesario.
​
iconType
string
El estilo del icono de Font Awesome. Solo se usa con iconos de Font Awesome.Opciones: regular, solid, light, thin, sharp-solid, duotone, brands.
​
color
string
Color del icono en código hex (p. ej., #FF6B6B).
​
href
string
URL a la que se navega al hacer clic en la tarjeta.
​
horizontal
boolean
Muestra la tarjeta en un diseño horizontal compacto.
​
img
string
URL o ruta local de una imagen que se muestra en la parte superior de la tarjeta.
​
cta
string
Texto personalizado del botón de acción.
​
arrow
boolean
Mostrar u ocultar el icono de flecha del enlace.