> ## Documentation Index
> Fetch the complete documentation index at: https://wiki.another-horizon.eu/llms.txt
> Use this file to discover all available pages before exploring further.

# Tarjetas

> Resalta puntos clave o enlaces con diseños e íconos personalizables.

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 theme={null}
<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 theme={null}
<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 theme={null}
<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 theme={null}
<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="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 theme={null}
<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" required>
  El título que se muestra en la tarjeta
</ResponseField>

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

  Opciones:

  * Nombre del [icono de Font Awesome](https://fontawesome.com/icons)
  * Nombre del [icono de Lucide](https://lucide.dev/icons)
  * Código SVG (compatible con JSX) envuelto entre llaves
  * URL a un icono alojado externamente
  * Ruta a un archivo de icono en tu proyecto

  Para iconos SVG personalizados:

  1. Convierte tu SVG usando el [convertidor 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 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 icono de [Font Awesome](https://fontawesome.com/icons). Solo se usa con iconos 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>