Tarjetas

Destaca puntos clave o enlaces con diseños e iconos personalizables

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í es como usar una tarjeta con un icono y un enlace. Al hacer clic en esta tarjeta, irás a la página Columns.

Card example

<Card title="Título de la tarjeta" icon="text" href="/components/columns">
  Así es como se usa una tarjeta con un ícono y un enlace. Al hacer clic en esta tarjeta
  te dirigirá a la página de Columnas.
</Card>

​

Variantes de tarjetas

Las tarjetas ofrecen varias opciones de diseño y estilo para adaptarse a distintas 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

<Card title="Tarjeta horizontal" 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.

Tarjeta con imagen

Este es un ejemplo de una tarjeta con imagen.

Image card example

<Card title="Tarjeta de imagen" img="/images/card-with-image.png">
  Este es un ejemplo de una tarjeta con imagen.
</Card>

​

Tarjetas de enlace con CTA personalizado

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.

Link card

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 de Columns.

Haz clic aquí

Link card example

<Card
  title="Tarjeta de enlace"
  icon="link"
  href="/components/columns"
  arrow="true"
  cta="Haz clic aquí"
>
  Este es un ejemplo de una tarjeta con un icono y un enlace. Al hacer clic en esta tarjeta te lleva a la página de Columnas.
</Card>

​

Agrupar tarjetas

Usa el componente Columns para organizar varias tarjetas lado a lado.

Primera tarjeta

Esta es la primera tarjeta.

Segunda tarjeta

Esta es la segunda tarjeta.

Columns example

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

​

Propiedades

title · string · requerido

El título que se muestra en la tarjeta

icon · string

El ícono que se mostrará.

Opciones:

• nombre del ícono de Font Awesome
• nombre del ícono de Lucide
• Código SVG compatible con JSX envuelto entre llaves
• URL a un ícono alojado externamente
• Ruta a un archivo de ícono en tu proyecto

Para íconos SVG personalizados:

1. Convierte tu SVG con el convertidor de 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 ícono de Font Awesome. Solo se usa con íconos de Font Awesome.

Opciones: regular, solid, light, thin, sharp-solid, duotone, brands.

color · string

Color del ícono en código hexadecimal (por ejemplo, #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 mostrada en la parte superior de la tarjeta.

cta · string

Texto personalizado para el botón de acción.

arrow · boolean

Mostrar u ocultar el ícono de flecha del enlace.