# Tarjetas (/es/components/cards)

<!-- agent-signals: reading_time_min: 6 · est_tokens: 2955 · updated: 2026-07-30 -->
Related: [Accordions](/es/components/accordions.md), [Insignia](/es/components/badge.md), [Banner](/es/components/banner.md), [Avisos](/es/components/callouts.md), [Grupos de código](/es/components/code-groups.md), [Color](/es/components/color.md)

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

<div id="basic-card">
  ## Tarjeta básica [#tarjeta-básica]
</div>

<Card title="Título de la tarjeta" icon="<svg xmlns=&#x22;http://www.w3.org/2000/svg&#x22; viewBox=&#x22;0 0 24 24&#x22; fill=&#x22;none&#x22;><path d=&#x22;M9 4.5H19&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-linejoin=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/><path d=&#x22;M9 9.5H14&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-linejoin=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/><path d=&#x22;M9 14.5H19&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-linejoin=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/><path d=&#x22;M9 19.5H14&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-linejoin=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/><path d=&#x22;M5 3V21&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-linejoin=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/></svg>" href="/es/components/columns">
  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>

```mdx title="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>
```

<div id="card-variations">
  ## Variantes de tarjetas [#variantes-de-tarjetas]
</div>

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

<div id="horizontal-layout">
  ### Diseño horizontal [#diseño-horizontal]
</div>

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

<Card title="Tarjeta horizontal" icon="<svg xmlns=&#x22;http://www.w3.org/2000/svg&#x22; viewBox=&#x22;0 0 24 24&#x22; fill=&#x22;none&#x22;><path d=&#x22;M9 4.5H19&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-linejoin=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/><path d=&#x22;M9 9.5H14&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-linejoin=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/><path d=&#x22;M9 14.5H19&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-linejoin=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/><path d=&#x22;M9 19.5H14&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-linejoin=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/><path d=&#x22;M5 3V21&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-linejoin=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/></svg>">
  Este es un ejemplo de una tarjeta horizontal.
</Card>

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

<div id="image-cards">
  ### Tarjetas con imagen [#tarjetas-con-imagen]
</div>

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

<Card title="Tarjeta con imagen" img="https://mintlify-assets.b-cdn.net/yosemite.jpg">
  Este es un ejemplo de una tarjeta con imagen.
</Card>

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

<div id="link-cards-with-custom-ctas">
  ### Tarjetas de enlace con CTA personalizadas [#tarjetas-de-enlace-con-cta-personalizadas]
</div>

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.

<Card title="Tarjeta de enlace" icon="<svg xmlns=&#x22;http://www.w3.org/2000/svg&#x22; viewBox=&#x22;0 0 24 24&#x22; fill=&#x22;none&#x22;><path d=&#x22;M9.14339 10.691L9.35031 10.4841C11.329 8.50532 14.5372 8.50532 16.5159 10.4841C18.4947 12.4628 18.4947 15.671 16.5159 17.6497L13.6497 20.5159C11.671 22.4947 8.46279 22.4947 6.48405 20.5159C4.50532 18.5372 4.50532 15.329 6.48405 13.3503L6.9484 12.886&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/><path d=&#x22;M17.0516 11.114L17.5159 10.6497C19.4947 8.67095 19.4947 5.46279 17.5159 3.48405C15.5372 1.50532 12.329 1.50532 10.3503 3.48405L7.48405 6.35031C5.50532 8.32904 5.50532 11.5372 7.48405 13.5159C9.46279 15.4947 12.671 15.4947 14.6497 13.5159L14.8566 13.309&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/></svg>" href="/es/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, irás a la página Columns.
</Card>

```mdx title="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>
```

<div id="typed-cards">
  ### Tarjetas tipadas [#tarjetas-tipadas]
</div>

Agrega una propiedad `type` para aplicar a una tarjeta el mismo estilo que un [callout](/es/components/callouts). 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`.

<Columns cols="2">
  <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>

  <Card title="Tarjeta de consejo" type="tip">
    Usa `tip` para compartir sugerencias útiles.
  </Card>

  <Card title="Tarjeta de peligro" type="danger">
    Usa `danger` para acciones destructivas o de riesgo.
  </Card>
</Columns>

```mdx title="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>
```

<div id="group-cards">
  ## Agrupar tarjetas [#agrupar-tarjetas]
</div>

Usa el [componente Columns](/es/components/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.

<Columns cols="2">
  <Card title="Primera tarjeta" icon="<svg xmlns=&#x22;http://www.w3.org/2000/svg&#x22; viewBox=&#x22;0 0 24 24&#x22; fill=&#x22;none&#x22;><path d=&#x22;M21 11C21 7.22876 21 5.34315 19.8284 4.17157C18.6569 3 16.7712 3 13 3H11C7.22876 3 5.34315 3 4.17157 4.17157C3 5.34315 3 7.22876 3 11V13C3 16.7712 3 18.6569 4.17157 19.8284C5.34315 21 7.22876 21 11 21H13C16.7712 21 18.6569 21 19.8284 19.8284C21 18.6569 21 16.7712 21 13V11Z&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-linejoin=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/><path d=&#x22;M9 3V21&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-linejoin=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/><path d=&#x22;M14 9L15.1082 9.87868C16.3694 10.8787 17 11.3787 17 12C17 12.6213 16.3694 13.1213 15.1082 14.1213L14 15&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-linejoin=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/></svg>">
    Esta es la primera tarjeta.
  </Card>

  <Card title="Segunda tarjeta" icon="<svg xmlns=&#x22;http://www.w3.org/2000/svg&#x22; viewBox=&#x22;0 0 24 24&#x22; fill=&#x22;none&#x22;><path d=&#x22;M3 11C3 7.22876 3 5.34315 4.17157 4.17157C5.34315 3 7.22876 3 11 3H13C16.7712 3 18.6569 3 19.8284 4.17157C21 5.34315 21 7.22876 21 11V13C21 16.7712 21 18.6569 19.8284 19.8284C18.6569 21 16.7712 21 13 21H11C7.22876 21 5.34315 21 4.17157 19.8284C3 18.6569 3 16.7712 3 13V11Z&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-linejoin=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/><path d=&#x22;M15 3V21&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-linejoin=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/><path d=&#x22;M8 9L9.10819 9.87868C10.3694 10.8787 11 11.3787 11 12C11 12.6213 10.3694 13.1213 9.10819 14.1213L8 15&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-linejoin=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/></svg>">
    Esta es la segunda tarjeta.
  </Card>
</Columns>

```mdx title="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>
```

<div id="properties">
  ## Propiedades [#propiedades]
</div>

<ResponseField name="title" type="string">
  El título que se muestra en la tarjeta.
</ResponseField>

<ResponseField name="icon" type="string">
  El ícono que se mostrará.

  Opciones:

  * Nombre del ícono de [Font Awesome](https://fontawesome.com/icons), si tienes la [propiedad](/es/organize/settings#param-icons) `icons.library` configurada como `fontawesome` en tu `docs.json`
  * Nombre del ícono de [Lucide](https://lucide.dev/icons), si tienes la [propiedad](/es/organize/settings#param-icons) `icons.library` configurada como `lucide` en tu `docs.json`
  * Nombre del ícono de [Tabler](https://tabler.io/icons), si tienes la [propiedad](/es/organize/settings#param-icons) `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:

  1. Convierte tu SVG con el [convertidor de SVGR](https://react-svgr.com/playground/).
  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.
</ResponseField>

<ResponseField name="iconType" type="string">
  El estilo de ícono de [Font Awesome](https://fontawesome.com/icons). Solo se usa con íconos de Font Awesome.

  Opciones: `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, `brands`.
</ResponseField>

<ResponseField name="color" type="string">
  Color del ícono como código hexadecimal (por ejemplo, `#FF6B6B`).
</ResponseField>

<ResponseField name="href" type="string">
  URL a la que se navega cuando se hace clic en la tarjeta.
</ResponseField>

<ResponseField name="horizontal" type="boolean">
  Muestra la tarjeta en un diseño horizontal compacto.
</ResponseField>

<ResponseField name="img" type="string">
  URL o ruta local a una imagen que se muestra en la parte superior de la tarjeta.
</ResponseField>

<ResponseField name="cta" type="string">
  Texto personalizado para el botón de acción.
</ResponseField>

<ResponseField name="arrow" type="boolean">
  Mostrar u ocultar el ícono de flecha del enlace.
</ResponseField>

<ResponseField name="type" type="string">
  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.
</ResponseField>