Tarjetas

Usa los componentes de tarjeta para mostrar enlaces, iconos, imágenes y contenido agrupado como contenedores visuales que organizan la navegación.

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

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

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

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

<Card title="Tarjeta horizontal" icon="text-align-start" horizontal>
  Este es un ejemplo de tarjeta horizontal.
</Card>

Tarjetas con imagen

Agrega una 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 con imagen" img="/images/card-with-image.png">
  Este es un ejemplo de tarjeta con imagen.
</Card>

Tarjetas de enlace con CTA personalizadas

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.

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 ícono y un enlace. Al hacer clic en esta tarjeta, accederás a la página de Columnas.
</Card>

Agrega una propiedad type para aplicar a una tarjeta el mismo estilo que un callout. Las tarjetas tipadas tienen un fondo, un borde y un icono predeterminado de color que coinciden con el tipo seleccionado. Úsalas para destacar contenido agrupado, como notas, advertencias o estados de éxito.

Tipos admitidos: info, warning, note, tip, check y danger. Opcionalmente, puedes sobrescribir el icono predeterminado con la propiedad icon.

Tarjeta de nota

Usa note para resaltar información complementaria.

Tarjeta de advertencia

Usa warning para señalar posibles problemas.

Tarjeta de consejo

Usa tip para compartir sugerencias útiles.

Tarjeta de peligro

Usa danger para acciones destructivas o de riesgo.

Typed card example

<Card title="Tarjeta de nota" type="note">
  Usa `note` para resaltar información complementaria.
</Card>

<Card title="Tarjeta de advertencia" type="warning">
  Usa `warning` para señalar posibles problemas.
</Card>

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

<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

titlestring

El título que se muestra en la tarjeta.

iconstring

El ícono que se mostrará.

Opciones:

Nombre del ícono de Font Awesome, si tienes la propiedad icons.library configurada como fontawesome en tu docs.json
Nombre del ícono de Lucide, si tienes la propiedad icons.library configurada como lucide en tu docs.json
Nombre del ícono de Tabler, si tienes la propiedad icons.library configurada como tabler en tu docs.json
URL de un ícono alojado externamente
Ruta a un archivo de ícono en tu proyecto
Código SVG envuelto entre llaves

Para íconos SVG personalizados:

Convierte tu SVG con el convertidor de SVGR.
Pega tu código SVG en el campo de entrada de SVG.
Copia el elemento completo <svg>...</svg> del campo de salida de JSX.
Envuelve el código SVG compatible con JSX entre llaves: icon={<svg ...> ... </svg>}.
Ajusta height y width según sea necesario.

iconTypestring

El estilo de ícono de Font Awesome. Solo se usa con íconos de Font Awesome.

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

colorstring

Color del ícono como código hexadecimal (por ejemplo, #FF6B6B).

hrefstring

URL a la que se navega cuando se hace clic en la tarjeta.

horizontalboolean

Muestra la tarjeta en un diseño horizontal compacto.

imgstring

URL o ruta local a una imagen que se muestra en la parte superior de la tarjeta.

ctastring

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

arrowboolean

Mostrar u ocultar el ícono de flecha del enlace.

typestring

Aplica un tema con estilo de callout a la tarjeta. Uno de info, warning, note, tip, check o danger. Define el fondo, el borde y el icono predeterminado de la tarjeta para que coincidan con el tipo seleccionado.

Tarjeta básica