mintlify__docs/es/components/cards.mdx

---
title: "Tarjetas"
description: "Usa los componentes de tarjeta para mostrar enlaces, iconos, imágenes y contenido agrupado como contenedores visuales que organizan la navegación."
keywords: ["tarjetas", "contenedores visuales"]
boost: 3
---

import IconsOptional from "/snippets/es/icons-optional.mdx";

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
</div>

<Card title="Título de la tarjeta" icon="text-align-start" 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 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
</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
</div>

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

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

```mdx 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
</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 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
</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="link" 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 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
</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 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
</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="panel-left-close">
    Esta es la primera tarjeta.
  </Card>

  <Card title="Segunda tarjeta" icon="panel-right-close">
    Esta es la segunda tarjeta.
  </Card>
</Columns>

```mdx 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
</div>

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

<IconsOptional />

<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>