> ## Documentation Index
> Fetch the complete documentation index at: https://adminroletesting-justin-client-exports.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

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

<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="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, por lo que puedes usarlas 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 theme={null}
<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 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">
  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>